分享與更多資料的效能追蹤

效能工具記錄的資料可以匯出到磁碟上的檔案，檔案中還可能包含註解、資源內容 (HTML、CSS 和 JavaScript 內容) ，以及原始碼地圖。匯出的檔案稱為追蹤。 匯出追蹤是指 .json 可以隨時在 DevTools 中匯入的檔案。

當你從效能工具匯出追蹤時，可以選擇是否加入額外資料：

你也可以控制追蹤檔案是否被壓縮。

效能工具會記錄你網頁的執行時數據。探索記錄資料能提升網頁的執行效能。

匯出效能追蹤在想與他人分享這些檔案以協助調查問題時非常有用。

追蹤可以儲存，包含註解、資源內容 (（如腳本) ）以及網頁的原始碼映射。這些額外資訊使得分析匯入的追蹤檔案變得更容易，透過重建追蹤記錄的環境，並提供原始原始檔案。

匯出的追蹤檔案與其他基於 Chromium 引擎的瀏覽器相容。

當包含註解、資源內容 (（如腳本) 或原始碼映射）的 trace 匯入 DevTools 時，會出現一個新的 DevTools 視窗。這個新視窗並未連接到瀏覽器中執行的網頁，而是重建了最初記錄追蹤環境的一部分。此 DevTools 實例僅包含效能與來源工具。

從效能工具匯出追蹤

要錄製網頁某些部分的表現，然後匯出表演錄影：

在新視窗或分頁中開啟網頁，例如「待辦事項」。
右鍵點擊網頁，然後選擇檢查。

DevTools 開啟。
在 DevTools 中，打開 Performance ( ，) 工具。
點擊 「錄影 () 按鈕。
與網頁互動，執行你想調查的情境。

例如，在示範頁面的「 新增任務 」文字框中輸入 task 1，然後按下 Enter。
點擊「停止 () 按鈕。

表演檔案顯示。
點擊 「儲存追蹤 」 ( 」) 按鈕。

儲存效能追蹤對話框會在效能工具中開啟 () ：
選擇或清除勾選框，以控制追蹤檔案中包含哪些資訊：
- 「 包含註解 」勾選框。此勾選框僅在有註解時出現。
- 「 包含資源內容 」勾選框。
- 「 包含腳本來源映射 」的勾選框。 (必須先選擇 「包含資源內容 」勾選框 )
可選擇清除 壓縮與 gzip 勾選框。

以下為這些勾選框的詳細資訊。
點擊儲存按鈕。

效能工具中的小對話框會關閉，然後開啟另存新檔對話框。
請前往儲存追蹤檔案的資料夾。

例如，在 Windows /Downloads/ 的目錄中，點擊 「新資料夾 」按鈕，然後建立 /traces/ 一個目錄，儲存效能追蹤檔案：
接受或修改檔案名稱，例如 Trace-20251103T154500.json。
點擊儲存按鈕。

效能追蹤檔案會被儲存，例如 C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json。

在效能工具的「儲存效能追蹤」對話框中，包含註解的勾選框控制是否包含已加入效能設定檔的註解。

註解有助於吸引注意並標示描圖的特定區域，讓觀看時更容易理解細節。

另請參閱:

在效能工具的儲存效能追蹤對話框中，選擇包含資源內容勾選框，會包含匯出追蹤檔案中 HTML 檔案、CSS 檔案及 JavaScript 腳本的內容。除了副檔名外，所有已載入的腳本 () 都會儲存在追蹤檔案中。

當追蹤檔案隨後匯入 DevTools 時，這些資源即可在來源工具中查看。 原始碼工具解析匯入追蹤中發現的原始碼參考，以顯示原始原始碼。

部分效能洞察需要資源內容 (，例如腳本) 分析。即使勾選此勾選框，副檔腳本的內容也不會包含在追蹤檔中，因為副檔名腳本可能包含敏感資訊。

然而，擴充腳本的剖析資料仍會保存在追蹤檔案中，因為擴充腳本會影響效能。

另請參閱:

在效能工具的「儲存效能追蹤」對話框中，選擇「包含腳本來源映射」勾選框，會包含縮減的生產內容檔案及映射回原始原始碼檔案。 DevTools 會用原始碼映射載入原始檔案，並用原始程式碼替換縮小的程式碼。

當隨後開啟產生的追蹤檔案時，效能工具會顯示原始函式名稱，而來源工具則會顯示原始檔案名稱。注意：這可能會暴露原始碼給追蹤檔案接收者。

部分效能洞察需要分析來源圖。請參閱《效能功能參考》中的「獲取可行洞察」。

要讓此勾選框可用而非變暗，您必須選擇 「包含資源內容 」勾選框，該框包含追蹤檔案中的腳本內容。

另請參閱:

在效能工具的「儲存效能追蹤」對話框中，預設勾選了「壓縮與 gzip」勾選框。此選項有助於壓縮大型效能追蹤以節省磁碟空間，並使 DevTools 中追蹤檔案的匯入與處理更為快速。

當追蹤檔案在 DevTools 中) 開啟 (匯入時，瀏覽器會開啟一個新的專門 DevTools 分頁，僅包含效能與來源工具。追蹤可以包含註解、資源內容 (（如腳本) ）以及來源地圖。這個新分頁並未連接到瀏覽器中執行的網頁，而是重建了最初記錄追蹤環境的一部分。

要在 DevTools 中開啟已儲存的追蹤檔案：

打開 Microsoft Edge 或其他基於 Chromium 的瀏覽器。
右鍵點擊網頁或空白分頁，然後選擇檢視。

DevTools 開啟。
在 DevTools 中，選擇 Performance ( ，) 工具。
點擊 載入追蹤 () 按鈕。

開啟 對話框 。
導覽到共用的追蹤檔案，例如 C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz。
選擇檔案，例如壓縮檔 Trace-20251103T154500.json.gz。
點擊開啟按鈕。

瀏覽器中會開啟一個專門的 DevTools 分頁，裡面完全是 DevTools，並開啟 了 Sources 與 Performance 工具：

地址列會顯示一個特殊的網址，例如：
- devtools://devtools/bundled/trace_app.html
- devtools://devtools/bundled/rehydrated_devtools_app.html
這是瀏覽器中專門為 DevTools 設計的分頁，而非未安裝的 DevTools 視窗。點擊 「更多工具 」按鈕，還有一些可能有助於分析追蹤的相關工具，例如：
- 開發者資源
- 快速來源
- 渲染
- 搜尋
- 感應器