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

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

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

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

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

ファイルを.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

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

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

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

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

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

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

{
    "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_countsnapshot.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

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

"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詳細については、 の クラスであるファイルを生成するコードをHeapSnapshotGeneratorheap-snapshot-generator.h参照してください。

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