共用方式為


共用增強的效能和記憶體追蹤

記憶體 工具會記錄有關您網頁的運行時間數據。 探索記錄的數據可讓您改善網頁的記憶體使用量或運行時間效能。

此外,記錄的數據可以匯出至磁碟上的檔案。 導出的檔案稱為 追蹤

當您想要與其他人共用這些檔案以取得調查問題的協助時,匯出效能和記憶體追蹤會很有用。 導出的.json追蹤是可隨時匯入DevTools中的、.heapsnapshot.heapprofile、 或 .heaptimeline 檔案。

根據預設,追蹤包含追蹤網頁中有關運行時間數據的最少資訊,但追蹤也可以匯出為 增強的追蹤,作為實驗性功能。 增強的追蹤是一個 .devtools 檔案,其中包含來自追蹤網頁的更多運行時間數據。 增強的追蹤可讓您更輕鬆地解決效能和記憶體問題,方法是重新建立記錄追蹤的環境,以及提供原始來源檔案。

使用增強型追蹤可讓您可靠地將匯入追蹤中找到的原始碼參考解析為 Sources 工具中的實際運行時間程式代碼。 此外,如果記錄追蹤時存在來源對應,或是它們儲存在 Azure Artifacts Symbol Server 上,也可以解析其原始原始原始程式碼的程式代碼參考。

一般和增強型追蹤之間的差異

一般追蹤

一般追蹤只包含網頁中存在的一些資訊。 大部分的原始程式代碼都會遺失,而且追蹤中只會保留網頁的記錄效能或記憶體數據。 例如,匯入在另一個 DevTools 工作階段或另一部 .heapsnapshot 電腦上記錄的記憶體追蹤時,無法從 記憶體 工具中的物件移至 來源 工具中的建構函式。

同樣地,在效 工具中,當您匯入稍早記錄的效能追蹤時:

  • 追蹤必須記錄在相同的月臺和相同的設定上,才能從效能報告對應至在瀏覽器中執行的 JavaScript。
  • 如果自錄製之後檔案或函式名稱已變更,則對應很容易發生錯誤。

增強的追蹤

增強的追蹤會保留有關錄製所在網頁的更多資訊。 例如,增強的追蹤包含執行內容和剖析的腳本清單,而且可以選擇性地包含主控台訊息、腳本來源和 DOM 樹狀結構的快照集。

在 DevTools 中匯入增強的追蹤時,會出現新的 DevTools 視窗。 這個新視窗不會連線到在瀏覽器中執行的網頁,而是重新建立原始記錄追蹤的環境部分。

例如,如果 DOM 的快照集記錄在增強的追蹤中,則 Elements 工具會顯示此快照集。 如果已記錄主控台訊息, 主控台 工具會列印這些訊息。 來源工具會顯示錄製期間出現的腳本。

增強的追蹤只能在 Microsoft Edge 中匯入,而一般追蹤則會根據 Chromium 引擎與其他瀏覽器相容。

設定預設追蹤類型

根據預設, 效能記憶體 工具會將資料匯出為一般追蹤,但您可以將預設追蹤類型設定為 enhanced

若要變更追蹤類型:

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

  2. 在 DevTools 中,按下右上方的 [ 設定 ] ([設定] 按鈕) 。 [設定] 隨即 開啟,並選取 [ 喜好設定] 頁面。

  3. 在 [喜好設定] 頁面的 [持續性] 區段中,選取 [匯出增強的效能和記憶體追蹤] 複選框:

    DevTools 中的 [設定] 面板,已核取 [增強的追蹤] 選項

  4. 增強的追蹤也可以選擇性地包含主控台訊息、腳本來源和 DOM 元素。 若要控制要包含在增強型追蹤中的內容,請使用下列複選框:

    • 在增強的追蹤中包含主控台訊息
    • 在增強的追蹤中包含腳本來源
    • 將 DOM 快照集包含在 (實驗) 的增強型追蹤 中。

    DevTools 中的 [設定] 面板,顯示其他增強的追蹤選項

從效能工具匯出追蹤

若要從效能工具匯出效 記錄:

  1. 開啟 [ 效能 ] 工具。

  2. 按兩下 [記錄 ] 並執行您想要藉由與網頁互動來調查 效能的案例,然後按兩下 [ 停止]

  3. 當效能設定檔出現時,按下 [ 儲存設定檔 ([儲存配置檔] 按鈕) :

    Microsoft Edge 搭配 DevTools,顯示效能工具,並顯示 [儲存配置檔] 按鈕

  4. 選擇在磁碟上儲存追蹤檔案的位置:

    [Windows 儲存] 對話框,顯示要儲存在追蹤資料夾中的效能追蹤檔案

    如果您將默認追蹤類型設定為標準 .json ,則追蹤是檔案,如果您將默認追蹤類型設定為增強,則它是 .devtools 檔案。

從記憶體工具匯出追蹤

若要從記憶體工具匯出 記憶體 資訊:

  1. 開啟 記憶體 工具。

  2. 選擇您感興趣的記憶體錄製類型,例如 堆積快照集。 如果您選擇不同的記憶體錄製類型,下列指示很類似。 若要深入瞭解不同的記憶體錄製類型,請參閱 修正記憶體問題

  3. 按兩下 [擷取快照集]

  4. 記錄快照集時,按兩下 [記憶體] 工具提要字段中的 [儲存] 按鈕:

    Microsoft Edge 搭配 DevTools,顯示記憶體工具,並包含 [儲存] 按鈕

  5. 選擇在磁碟上儲存追蹤檔案的位置:

    [Windows 儲存] 對話方塊,其中顯示要儲存在追蹤資料夾中的記憶體追蹤檔案

    如果您將預設追蹤類型設定為標準 .heapsnapshot,則追蹤為、 .heapprofile.heaptimeline 檔案,如果您將預設追蹤類型設定為增強,則為 .devtools 檔案。

匯出時選擇追蹤類型

追蹤會匯出為一般或增強的追蹤,視 [匯出增強效能 和記憶體追蹤] 選項而定 。 若要變更預設追蹤類型,請參閱 設定預設追蹤類型。 您也可以選擇匯出時想要的追蹤類型。

若要在匯出時選擇不同的追蹤類型:

  1. 以滑鼠右鍵按兩下 (或按住 Ctrl 鍵,然後按兩下) [效能] 工具中的 [儲存設定檔 (儲存設定檔] 按鈕) 或 [記憶體] 工具中的 [儲存] 按鈕。

  2. 如果您想要導出增強的追蹤,請按兩下 .devtools (Microsoft Edge) 的增強格式,或按兩下 [.json (与 Microsoft Edge 搭配使用,如果您想要正常追蹤,請) Chromium 瀏覽器。

    [效能] 工具中 [儲存配置檔] 按鈕上的右鍵功能表,以選取追蹤類型

在效能工具中匯入追蹤

若要在效 能工具中 匯入追蹤:

  1. 開啟 [ 效能 ] 工具。

  2. 點選 取 [載入設定檔 ] ([載入設定檔] 按鈕) :

    Microsoft Edge 中,使用 [載入配置檔] 按鈕在 DevTools 中顯示效能工具

  3. 在磁碟上找出追蹤檔案。 它是 .devtools 增強追蹤) 的檔案 (,或是 .json 一般追蹤) 的檔案 (:

    Windows 開啟對話框,顯示效能追蹤檔案

  4. 開啟檔案。

    如果檔案是增強的追蹤,則會出現新的 DevTools 視窗,其中顯示效能配置檔,以及 [ 來源]、 [控制台] 和 [ 元素 ] 工具中所記錄的額外運行時間資訊。

    如果檔案是一般追蹤,效能配置檔會出現在效 能工具中 ,而其餘的 DevTools 索引標籤會繼續顯示與目前網頁相關的資訊。

在記憶體工具中匯入追蹤

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

  1. 開啟 記憶體 工具。

  2. 點選單擊 [ 載入設定檔] 按鈕:

    Microsoft Edge,其中顯示 DevTools 中的記憶體工具,並包含 [載入] 按鈕

  3. 在磁碟上找出追蹤檔案。 .devtools它是增強追蹤) 的檔案 (,或是.heapsnapshot一般追蹤) 的、 .heaptimeline.heapprofile檔案 (。

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

  4. 開啟檔案。

    如果檔案是增強的追蹤,則會出現新的 DevTools 視窗,其中顯示記憶體資訊,以及在 來源控制台元素 工具中記錄的額外運行時間資訊。

    如果檔案是一般追蹤, 記憶體 資訊會出現在記憶體工具中,而其餘的 DevTools 索引標籤會繼續顯示與目前網頁相關的資訊。

分享有關增強型追蹤的意見反應

增強的追蹤是一項實驗性功能,可讓您透過查看未精明的程序代碼,更輕鬆地共同解決效能和記憶體問題。

Microsoft Edge DevTools 小組歡迎您對於增強的追蹤有任何意見反應。 如果您嘗試過這項新功能,請隨意在我們的 GitHub 存放庫上回報任何相關問題或想法。