堆積快照檔案格式

調查網頁應用程式中的記憶體使用情況可能相當困難。 DevTools 記憶體 工具允許你透過堆積快照來探索網頁應用程式在記憶體中分配的所有物件。 這些資訊對效能調查很有用，因為你可以找出哪些物件佔用最多記憶體。

不過，有時你可能需要專注於 記憶體 工具無法顯示的特定記憶體資料部分。 在這種情況下，使用 DevTools 將整組記憶體資料匯出成 .heapsnapshot JSON 檔案。

本文說明 JSON 檔案的 .heapsnapshot 結構與內容，讓您能自行建立視覺化與分析工具。

記錄堆積快照

要匯出檔案 .heapsnapshot ，首先你需要在 記憶體 工具中錄製堆積快照，如下：

1. 在 Microsoft Edge 中，導向你想匯出資料的網站。

2. 在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (開啟開發工具。

3. 打開 記憶 工具。

4. 選擇 堆積快照 ，然後點選 「擷取快照」。

欲了解更多資訊，請參閱 使用記憶體工具記錄堆積快照 (「堆積快照」剖析類型) 。

匯出並檢視 .heapsnapshot 檔案

錄製完堆積快照後，就可以匯出。

1. 在 記憶體 工具左側邊欄，點選你剛錄製的堆積快照項目旁的 儲存 。

2. 將檔案副檔名 .heapsnapshot 從 改為 .json，以便更容易在文字編輯器中開啟檔案。

3. 在文字編輯器（如 Visual Studio Code）中開啟已儲存的檔案。

4. 為了讓 JSON 更易讀，在 Visual Studio Code 中，右鍵點擊程式碼中任意位置，然後選擇「格式化文件」。

通常每次錄製並匯出堆積快照時，最終檔案 .heapsnapshot 都會不同。 堆積快照是根據目前在 DevTools 中檢查的網頁應用程式內容動態產生的。

檔案格式概述.heapsnapshot

網頁應用程式所使用的記憶體由 V8 以圖形形式組織，V8 是 Microsoft Edge 使用的 JavaScript 引擎。 圖是一種資料型態，由圖) 上的 節點 (點，以及) 點間的 邊 (連結所組成。

檔案中的 .heapsnapshot 資料代表網頁應用程式的記憶體，該圖能有效繪製，並方便在瀏覽器程序與 DevTools 之間傳輸資料群組。 該 .heapsnapshot 檔案包含節點與邊之間關係的扁平表示，作為包含數字與字串陣列的 JSON 物件。 該檔案具有 .heapsnapshot 副檔名，並包含 JSON 格式的資料。

數據主要分為兩部分：

• 元資料包含解析代表記憶體圖資料陣列所需的所有資訊。
• 陣列資料，包含重建圖所需的實際資料。

更新此資料格式文件

檔案格式 .heapsnapshot 如下所述，隨著 V8 與 DevTools 的演進可能會改變。 如果你發現文件中有差異，請在 MicrosoftDocs 或 edge-developer 倉庫中提供回饋。

資料結構.heapsnapshot

頂層結構

JSON .heapsnapshot 資料包含一個根物件，具有以下屬性：

{
    "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 數字表示。 因此，陣列中 nodes 元素總數乘 snapshot.node_count 以 snapshot.meta.node_fields.length。

要重建節點，請從陣列中依大小snapshot.meta.node_fields.length為 的群組讀取數字nodes。

以下程式碼片段顯示 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] 型別名稱。

邊緣

與陣列類似，nodesedges頂層陣列包含重建記憶體圖邊緣所需的所有元素。

與節點類似，邊的總數可透過 snapshot.edge_count 乘以 snapshot.meta.edge_fields.length來計算。 邊也會以一串數字儲存，你需要依大小 snapshot.meta.edge_fields.length為 的群組來迭代。

然而，要正確讀取 edges 陣列，首先需要讀取陣列， nodes 因為每個節點都知道它有多少條邊。

要重現一條邊，你需要三個資訊：

• 邊緣型。
• 邊緣名稱或索引。
• 邊連接的節點。

例如，如果你讀取陣列中的nodes第一個節點，且其edge_count屬性設為 4，那麼陣列中的edges前四組snapshot.meta.edge_fields.length數字對應該節點的四條邊。

邊型

陣列中邊 edges 的數字組中的第一個數字對應其類型。 這個數字是一個索引，可以用來查詢陣列中的 snapshot.meta.edge_types[0] 型別名稱。

地點

locations陣列位於資料的最.heapsnapshot頂層，包含快照中部分節點建立位置的資訊。 此陣列由一串數字組成，設計給大小 snapshot.meta.location_fields.length為 的群組讀取。 因此，我們會去 snapshot.meta.location_fields 了解陣列中 locations 每個位置有多少欄位，以及這些欄位是什麼。 例如，若 location_fields 包含 4 個項目，則應由 4 個組成的群組讀取該 locations 陣列。

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資訊，請參閱產生該檔案的程式碼，也就是 HeapSnapshotGenerator 。heap-snapshot-generator.h

• HeapSnapshot 類別 (第 142 行)
• HeapSnapshotGenerator 類別 (第 522 行)