記憶體工具會記錄網頁的執行時資料。 探索已記錄的資料有助於改善網頁的記憶體使用率。
此外,錄製的資料也能匯出為磁碟上的檔案。 匯出的檔案稱為追蹤。
當你想與他人分享這些檔案以協助調查問題時,匯出記憶體痕跡非常有用。
檔案格式
追蹤檔案可以隨時匯入 DevTools。 預設情況下,這些追蹤只包含追蹤網頁執行時資料的最低限度資訊。
匯出的追蹤可以是基本 .heapsnapshot的 、 .heapprofile或 .heaptimeline 檔案。
記憶體追蹤也可以儲存為 .devtools 檔案,該檔案包含更多來自追蹤網頁的執行時資料。 檔案 .devtools 格式的優點:
這讓解決記憶體問題變得更容易,透過重建追蹤記錄的環境,並提供原始原始碼檔案。
這使得能夠可靠地將匯入追蹤中的原始碼參考解析到原始 碼 工具中的實際執行時程式碼。
如果在記錄痕跡時已有原始碼映射,或它們儲存在 Azure Artifacts Symbol Server 上,也可以解析原始原始碼的程式碼參考。
瀏覽器相容性
.heapsnapshot、.heapprofile.heaptimeline以及追蹤檔案與 Microsoft Edge 及其他基於 Chromium 引擎的瀏覽器相容。.devtools追蹤只能在 Microsoft Edge 中匯入。
設定預設的記憶體追蹤類型
預設情況下, 記憶體 工具會匯出資料為 .heapsnapshot、 .heapprofile或 .heaptimeline trace 檔案。
要將預設走線類型改為 .devtools:
在 Windows、Linux) 按 Ctrl+Shift+ I 開啟 DevTools,或在 macOS) 按 Command+Option+I ( (。
在 DevTools 右上角,選擇自訂 並控制 DevTools>設定 (
) 。
設定開啟 ,並選擇 偏好設定 頁面。在偏好設定頁面的持久性區塊中,使用匯出 .devtools 記憶體追蹤的勾選框來控制預設類型。
設定記憶體追蹤的匯出選項
記憶體追蹤 .devtools 檔案在有來源映射時都會包含,並且可選擇性地包含主控台訊息、腳本原始碼和 DOM 元素。
為了控制主控台訊息、腳本來源或 DOM 元素是否包含在記憶體追蹤中:
在 Windows、Linux) 按 Ctrl+Shift+ I 開啟 DevTools,或在 macOS) 按 Command+Option+I ( (。
在 DevTools 右上角,選擇自訂 並控制 DevTools>設定 (
) 。
設定開啟 ,並選擇 偏好設定 頁面。往下滑到 持久性 區塊:
請使用這些勾選框來控制包含哪些內容:
在 .devtools 記憶體追蹤中包含主控台訊息
在 .devtools 記憶體追蹤中包含腳本來源
在 .devtools 中包含 DOM 快照,記憶體追蹤 (實驗)
在 DevTools 右上角,點擊 關閉 (
) 按鈕。
從記憶體工具匯出追蹤
從 記憶體 工具匯出記憶體資訊:
打開 記憶 工具。
選擇你想要的記憶體錄製類型的選項按鈕,例如堆 積快照 選項按鈕。
如果你選擇不同的記憶體記錄類型,以下指示會類似於 修正記憶體問題。
以堆快照為例:
點擊頂部的 「Take heap snapshot 」 (「
) 按鈕,或是底部的 「Take snapshot 」按鈕。快照會被錄製並顯示。
在工具列中,選擇 儲存個人檔案 (
) 按鈕:
或者,在 記憶體 工具側邊欄,將滑鼠移到新快照的條目上,然後選擇 「儲存設定檔」。
「 另存為」 對話框會開啟:
請前往儲存追蹤檔案的資料夾。
在 檔案名稱 文字框中,如果需要可以調整檔案名稱。
在 檔案名稱 文字框中,保留或修改檔名後面指定的副檔名。
.devtools包含主控台訊息、腳本原始碼及 DOM 元素。.heapsnapshot,.heapprofile, 或.heaptimeline省略主控台訊息、腳本來源及 DOM 元素。
最初顯示哪個擴充功能由 DevTools 設定控制;詳見上方設定 預設記憶體追蹤類型。
點擊 儲存 按鈕。
「 另存為」 對話框關閉,檔案會被儲存到磁碟。
在記憶體工具中匯入追蹤
要在 記憶體 工具中匯入追蹤:
打開 記憶體 工具:
點擊頂部的 「載入設定檔 」 (
) 按鈕。 或者,點擊底部的 「載入設定檔 」按鈕。顯示 開啟 對話框。
在左下拉選單 (篩選) 中,選擇要顯示的檔案類型:
- **效能追蹤 (.devtools; .json) - 搭配 Performance 工具使用。
- **堆積快照 (.devtools; .heapsnapshot)
- **堆積時間軸 (.devtools; .堆疊時間軸)
- **取樣堆積剖面 (.devtools; .heapprofile)
找到磁碟上的追蹤檔案,然後選取它。
追蹤檔案可以是
.devtools檔案,或.heapsnapshot是 、.heaptimeline、.heapprofile檔案。
點擊 開啟 按鈕。
如果是
.devtools檔案,會跳出一個新的 DevTools 視窗,顯示記憶體資訊以及在 來源、 主控台和 元素 工具中記錄的額外執行時資訊。否則,記憶體資訊會顯示在 記憶體 工具中,而其他 DevTools 分頁則繼續顯示與當前網頁相關的資訊。