ヒープスナップショットファイル形式

Web アプリケーションでのメモリ使用量の調査は困難な場合があります。 DevTools Memory ツールを使用すると、ヒープをスナップショットすることで、Web アプリケーションによってメモリに割り当てられているすべてのオブジェクトを探索できます。 この情報は、最も多くのメモリを消費しているオブジェクトを確認できるため、パフォーマンスの調査に役立ちます。

ただし、 メモリ ツールに 表示されないメモリ データの特定の部分に焦点を当てる必要がある場合があります。 この場合は、DevTools を使用して、メモリ データのセット全体を .heapsnapshot JSON ファイルとしてエクスポートします。

この記事では、独自の視覚化と分析ツールを構築できるように、 .heapsnapshot JSON ファイルの構造と内容について説明します。

ヒープ スナップショットを記録する

.heapsnapshot ファイルをエクスポートするには、まず、次のように、メモリ ツールでヒープ スナップショットを記録する必要があります。

1. Microsoft Edge で、データをエクスポートする Web サイトに移動します。

2. Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押して Devtools を開きます。

3. メモリ ツールを開きます。

4. [ヒープ スナップショット] を選択し、[スナップショットの取得] をクリックします。

詳細については、「メモリ ツールを使用してヒープ スナップショットを記録する ("ヒープ スナップショット" プロファイリングの種類)」を参照してください。

.heapsnapshot ファイルをエクスポートして表示する

ヒープ スナップショットを記録したら、それをエクスポートできます。

1. メモリ ツールの左側のサイドバーで、記録したヒープ スナップショット項目の横にある [保存] をクリックします。

2. ファイル拡張子を .heapsnapshot から .json に変更して、テキスト エディターでファイルを簡単に開くことができます。

3. Visual Studio Code などのテキスト エディターで保存したファイルを開きます。

4. JSON を読みやすくするには、Visual Studio Code でコード内の任意の場所を右クリックし、[ ドキュメントの書式設定] を選択します。

一般に、結果の.heapsnapshot ファイルは、ヒープ スナップショットを記録してエクスポートするたびに異なります。 ヒープ スナップショットは、DevTools で現在検査されている Web アプリケーションの内容に基づいて動的に生成されます。

.heapsnapshotファイル形式の概要

Web アプリケーションによって使用されるメモリは、Microsoft Edge によって使用される JavaScript エンジンである V8 によってグラフとして編成されます。 グラフは、 ノード (グラフ上のポイント) と エッジ (ポイント間のリンク) で構成されるデータ型です。

.heapsnapshot ファイル内のデータは、効率的にグラフ化する Web アプリのメモリを表し、ブラウザー プロセスと DevTools 間でデータのグループを転送しやすくなります。 .heapsnapshot ファイルには、数値と文字列の配列を含む JSON オブジェクトとして、ノードとエッジ間の関係のフラット化された表現が含まれています。 ファイルには .heapsnapshot ファイル名拡張子があり、JSON 形式のデータが含まれています。

データには、次の 2 つの主要な部分があります。

• メモリ グラフを表すデータの配列を解析するために必要なすべての情報を含むメタデータ。
• 配列データ。グラフの再作成に必要な実際のデータが含まれます。

このデータ形式のドキュメントの更新

以下に記載されているように、 .heapsnapshot ファイルの形式は、V8 と DevTools の進化に伴って変更される可能性があります。 ドキュメントに不一致が見つかる場合は、 MicrosoftDocs/edge-developer リポジトリでフィードバックを提供してください。

.heapsnapshot データのスキーマ

最上位レベルの構造

.heapsnapshot JSON データには、次のプロパティを持つルート オブジェクトが含まれています。

{
    "snapshot": {},
    "nodes": [],
    "edges": [],
    "trace_function_infos": [],
    "trace_tree": [],
    "samples": [],
    "locations": [],
    "strings": []
}

スナップショット

{
    "snapshot": {     
        "meta": {},
        "node_count": 123,
        "edge_count": 456,
        "trace_function_count": 0
    }
    ...
}

スナップショット メタデータ

{
    "snapshot": {
        "meta": {
            "node_fields": [],
            "node_types": [],
            "edge_fields": [],
            "edge_types": []
        }
    }
    ...
}

メタデータ オブジェクトの例を次に示します。

{
    "snapshot": {
        "meta": {
            "node_fields": [
                "type",
                "name",
                "id",
                "self_size",
                "edge_count",
                "trace_node_id",
                "detachedness"
            ],
            "node_types": [
                [
                    "hidden",
                    "array",
                    "string",
                    "object",
                    "code",
                    "closure",
                    "regexp",
                    "number",
                    "native",
                    "synthetic",
                    "concatenated string",
                    "sliced string",
                    "symbol",
                    "bigint",
                    "object shape"
                ],
                "string",
                "number",
                "number",
                "number",
                "number",
                "number"
            ],
            "edge_fields": [
                "type",
                "name_or_index",
                "to_node"
            ],
            "edge_types": [
                [
                    "context",
                    "element",
                    "property",
                    "internal",
                    "hidden",
                    "shortcut",
                    "weak"
                ],
                "string_or_number",
                "node"
            ]
        }
    }
}

Nodes

.heapsnapshot データの最上位にある nodes 配列には、メモリ グラフのノードを再作成するために必要なすべての情報が含まれています。

この配列を解析するには、次の情報が必要です。

• snapshot.node_countは、ノードの数を知るために使用されます。
• snapshot.meta.node_fieldsを使用して、各ノードに含まれるフィールドの数を確認します。

配列内の各ノードは、一連の snapshot.meta.node_fields.length 番号で表されます。 そのため、nodes配列内の要素の合計数は、snapshot.meta.node_fields.lengthで乗算snapshot.node_count。

ノードを再作成するには、サイズsnapshot.meta.node_fields.lengthのグループでnodes配列から数値を読み取る。

次のコード スニペットは、グラフ内の最初の 2 つのノードの node_fields メタデータとデータを示しています。

{
    "snapshot": {
        "meta": {
            "node_fields": [
                "type",
                "name",
                "id",
                "self_size",
                "edge_count",
                "trace_node_id",
                "detachedness"
            ]
            ...
        }
        ...
    },
    "nodes": [
        9,1,1,0,10,0,0,
        2,1,79,12,1,0,0,
        ...
    ]
    ...
}

ノードの種類

nodes配列内のノードの数値グループの最初の数値は、その型に対応します。 この番号は、 snapshot.meta.node_types[0] 配列内の型名を検索するために使用できるインデックスです。

エッジ

nodes配列と同様に、edges最上位の配列には、メモリ グラフのエッジを再作成するために必要なすべての要素が含まれています。

ノードと同様に、エッジの合計数は、 snapshot.edge_count に snapshot.meta.edge_fields.lengthを掛けることによって計算できます。 エッジは数値のシーケンスとしても格納されます。これは、サイズ snapshot.meta.edge_fields.lengthのグループで反復処理する必要があります。

ただし、 edges 配列を正しく読み取るために、各ノードが持つエッジの数を認識するため、最初に nodes 配列を読み取る必要があります。

エッジを再作成するには、次の 3 つの情報が必要です。

• エッジの種類。
• エッジ名またはインデックス。
• エッジが接続されているノード。

たとえば、nodes配列の最初のノードを読み取り、そのedge_count プロパティを 4 に設定した場合、edges配列内のsnapshot.meta.edge_fields.length番号の最初の 4 つのグループは、このノードの 4 つのエッジに対応します。

エッジの種類

edges配列のエッジの数値グループの最初の数値は、その型に対応します。 この番号は、 snapshot.meta.edge_types[0] 配列内の型名を検索するために使用できるインデックスです。

locations

.heapsnapshot データの最上位にある locations 配列には、スナップショット内のノードの一部が作成された場所に関する情報が含まれています。 この配列は、サイズ snapshot.meta.location_fields.lengthのグループによって読み取られる一連の数値で構成されます。 したがって、 snapshot.meta.location_fields に移動して、 locations 配列内の各場所に含まれるフィールドの数と、それらのフィールドが何であるかを知ります。 たとえば、 location_fields に 4 つの項目が含まれている場合、 locations 配列は 4 のグループで読み取られます。

snapshot.meta.location_fields には、各場所の情報が含まれています。

次のコード例は、 snapshot.locations 配列を snapshot.nodes 配列にリンクする方法を示しています。

{
    "snapshot": {
        "meta": {
            "location_fields": [
                "object_index",
                "script_id",
                "line",
                "column"
            ]
            ...
        }
        ...
    },
    "nodes": [
        9,1,1,0,10,0,0,
        2,1,79,12,1,0,0,
        ...
    ],
    "locations":[
        7,9,0,0,
        113792,3,25,21,
        ...
    ],
    ...
}

locations配列の最初の場所は7,9,0,0,です。 この場所は、 nodes 配列のインデックス 7 から始まるノード情報グループに関連付けられます。 そのため、ノードには次のキーと値のペアが含まれています。

"type": 2,
"name": 1,
"id": 79,
"self_size": 12,
"edge_count": 1,
"trace_node_id": 0,
"detachedness": 0,
"script_id": 9,
"line" 0,
"column": 0,

関連項目

.heapsnapshot ファイル形式の詳細については、ファイルを生成するコード (heap-snapshot-generator.hのHeapSnapshotGenerator クラス) を参照してください。

• HeapSnapshot クラス (142 行目)
• HeapSnapshotGenerator クラス (522 行目)