共用方式為


共享一個記憶體軌跡,包含更多資料

記憶體工具會記錄網頁的執行時資料。 探索已記錄的資料有助於改善網頁的記憶體使用率。

此外,錄製的資料也能匯出為磁碟上的檔案。 匯出的檔案稱為追蹤。

當你想與他人分享這些檔案以協助調查問題時,匯出記憶體痕跡非常有用。

檔案格式

追蹤檔案可以隨時匯入 DevTools。 預設情況下,這些追蹤只包含追蹤網頁執行時資料的最低限度資訊。

匯出的追蹤可以是基本 .heapsnapshot的 、 .heapprofile.heaptimeline 檔案。

記憶體追蹤也可以儲存為 .devtools 檔案,該檔案包含更多來自追蹤網頁的執行時資料。 檔案 .devtools 格式的優點:

  • 這讓解決記憶體問題變得更容易,透過重建追蹤記錄的環境,並提供原始原始碼檔案。

  • 這使得能夠可靠地將匯入追蹤中的原始碼參考解析到原始 工具中的實際執行時程式碼。

  • 如果在記錄痕跡時已有原始碼映射,或它們儲存在 Azure Artifacts Symbol Server 上,也可以解析原始原始碼的程式碼參考。

瀏覽器相容性

  • .heapsnapshot.heapprofile.heaptimeline以及追蹤檔案與 Microsoft Edge 及其他基於 Chromium 引擎的瀏覽器相容。

  • .devtools 追蹤只能在 Microsoft Edge 中匯入。

設定預設的記憶體追蹤類型

預設情況下, 記憶體 工具會匯出資料為 .heapsnapshot.heapprofile.heaptimeline trace 檔案。

要將預設走線類型改為 .devtools

  1. 在 Windows、Linux) 按 Ctrl+Shift+ I 開啟 DevTools,或在 macOS) 按 Command+Option+I ( (。

  2. 在 DevTools 右上角,選擇自訂 並控制 DevTools>設定 (設定按鈕) 。 設定開啟 ,並選擇 偏好設定 頁面。

  3. 偏好設定頁面的持久性區塊中,使用匯出 .devtools 記憶體追蹤的勾選框來控制預設類型。

    DevTools 的設定面板,顯示匯出類型選項

設定記憶體追蹤的匯出選項

記憶體追蹤 .devtools 檔案在有來源映射時都會包含,並且可選擇性地包含主控台訊息、腳本原始碼和 DOM 元素。

為了控制主控台訊息、腳本來源或 DOM 元素是否包含在記憶體追蹤中:

  1. 在 Windows、Linux) 按 Ctrl+Shift+ I 開啟 DevTools,或在 macOS) 按 Command+Option+I ( (。

  2. 在 DevTools 右上角,選擇自訂 並控制 DevTools>設定 (設定按鈕) 。 設定開啟 ,並選擇 偏好設定 頁面。

  3. 往下滑到 持久性 區塊:

    DevTools 的設定面板,顯示追蹤選項

  4. 請使用這些勾選框來控制包含哪些內容:

    • 在 .devtools 記憶體追蹤中包含主控台訊息

    • 在 .devtools 記憶體追蹤中包含腳本來源

    • 在 .devtools 中包含 DOM 快照,記憶體追蹤 (實驗)

  5. 在 DevTools 右上角,點擊 關閉 (關閉圖示) 按鈕。

從記憶體工具匯出追蹤

記憶體 工具匯出記憶體資訊:

  1. 打開 記憶 工具。

  2. 選擇你想要的記憶體錄製類型的選項按鈕,例如堆 積快照 選項按鈕。

    如果你選擇不同的記憶體記錄類型,以下指示會類似於 修正記憶體問題

    以堆快照為例:

  3. 點擊頂部的 「Take heap snapshot 」 (「 Take heap snapshot」圖示) 按鈕,或是底部的 「Take snapshot 」按鈕。

    快照會被錄製並顯示。

  4. 在工具列中,選擇 儲存個人檔案 (儲存個人資料圖示) 按鈕:

    Microsoft Edge 搭配 DevTools,顯示記憶體工具,並透過儲存按鈕

    或者,在 記憶體 工具側邊欄,將滑鼠移到新快照的條目上,然後選擇 「儲存設定檔」。

    另存為」 對話框會開啟:

    Windows 中的「另存為」對話框,顯示記憶體追蹤檔案被儲存在追蹤資料夾中

  5. 請前往儲存追蹤檔案的資料夾。

  6. 檔案名稱 文字框中,如果需要可以調整檔案名稱。

  7. 檔案名稱 文字框中,保留或修改檔名後面指定的副檔名。

    • .devtools 包含主控台訊息、腳本原始碼及 DOM 元素。

    • .heapsnapshot.heapprofile, 或 .heaptimeline 省略主控台訊息、腳本來源及 DOM 元素。

    最初顯示哪個擴充功能由 DevTools 設定控制;詳見上方設定 預設記憶體追蹤類型

  8. 點擊 儲存 按鈕。

    另存為」 對話框關閉,檔案會被儲存到磁碟。

在記憶體工具中匯入追蹤

要在 記憶體 工具中匯入追蹤:

  1. 打開 記憶體 工具:

    Microsoft Edge,顯示 DevTools 中的記憶體工具,並透過載入按鈕

  2. 點擊頂部的 「載入設定檔 」 (載入設定檔圖示) 按鈕。 或者,點擊底部的 「載入設定檔 」按鈕。

    顯示 開啟 對話框。

  3. 在左下拉選單 (篩選) 中,選擇要顯示的檔案類型:

    • **效能追蹤 (.devtools; .json) - 搭配 Performance 工具使用。
    • **堆積快照 (.devtools; .heapsnapshot)
    • **堆積時間軸 (.devtools; .堆疊時間軸)
    • **取樣堆積剖面 (.devtools; .heapprofile)
  4. 找到磁碟上的追蹤檔案,然後選取它。

    追蹤檔案可以是 .devtools 檔案,或 .heapsnapshot是 、 .heaptimeline.heapprofile 檔案。

    Windows 開啟對話框,顯示記憶體追蹤檔案

  5. 點擊 開啟 按鈕。

    如果是 .devtools 檔案,會跳出一個新的 DevTools 視窗,顯示記憶體資訊以及在 來源主控台元素 工具中記錄的額外執行時資訊。

    否則,記憶體資訊會顯示在 記憶體 工具中,而其他 DevTools 分頁則繼續顯示與當前網頁相關的資訊。

另請參閱