效能功能參考資料

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

本頁面提供 Chrome 開發人員工具效能分析功能的完整參考資料。

如需如何使用 Chrome 開發人員工具分析網頁效能的導覽教學課程，請參閱「分析執行階段效能」。

「即時指標」畫面

首次開啟「Performance」面板時，系統會顯示「Live Metrics」畫面，其中會使用三個網站體驗核心指標，提供目前網頁的即時效能摘要。

「成效」面板中的「即時指標」畫面，顯示 LCP、CLS 和 INP 指標。

當您與網頁互動並前往新網頁時，指標會更新，包括單頁應用程式中的用戶端軟導覽，並以「SOFT NAV」徽章標示。這是找出效能問題的好方法，尤其是只在特定情況下出現的 INP 和 CLS 問題。如果效能問題持續發生，您可以記錄追蹤，取得更多詳細資料，以便對基礎問題進行偵錯。

「即時指標」畫面功能

除了指標外，「即時指標」畫面還提供下列功能：

  • 在「實際使用者資料」面板中啟用 CrUX 的實際使用者資料。
  • 本機和實際環境指標之間的顯著差異摘要。
  • LCP 元素，將游標懸停在該元素上，即可在網頁上醒目顯示。
  • CLS 叢集和 INP 類型詳細資料
  • 將滑鼠游標懸停在指標上時，會顯示更多詳細資料 (例如 LCP 和 INP 子部分，以及實際使用者資料直方圖)
  • 「互動」和「版面配置位移」面板會記錄互動和版面配置位移的歷史記錄。
  • 「現場指標」面板：可啟用 CrUX 資料、查看資料時間範圍的詳細資料、切換來源和網址資料 (如有)，以及切換電腦和行動裝置資料。
  • 「環境設定」面板：根據 CrUX 資料，提供裝置、CPU 和網路節流的使用指南。

詳情請參閱「在開發人員工具中監控本機和實際使用者的 Core Web Vitals 成效」網誌文章。

記錄成效

您可以使用畫面左上角或右側的按鈕，記錄執行階段或載入效能：

畫面左上角和右下角有記錄效能追蹤記錄的按鈕。

記錄執行階段效能

如要分析網頁執行時的效能 (而非載入時的效能)，請記錄執行階段效能。

  1. 前往要分析的網頁。
  2. 在開發人員工具中，按一下「效能」分頁標籤。
  3. 按一下「錄製」圖示 錄製。。
  4. 與網頁互動。開發人員工具會記錄因互動而發生的所有網頁活動。
  5. 再次點按「錄製」或點按「停止」，即可停止錄製。

記錄載入效能

如要分析網頁載入時 (而非執行時) 的效能，請記錄載入效能。

  1. 前往要分析的網頁。
  2. 開啟開發人員工具的「Performance」面板。
  3. 按一下「Record and reload」開始剖析並重新載入頁面。。開發人員工具會先前往 about:blank，清除所有剩餘的螢幕截圖和追蹤記錄。接著，開發人員工具會在頁面重新載入時記錄效能指標，並在載入完成後幾秒自動停止記錄。

DevTools 會自動放大錄製內容中活動最多的部分。

網頁載入記錄。

在本例中，「Performance」面板會顯示載入網頁期間的活動。

錄製時擷取螢幕截圖

啟用「螢幕截圖」核取方塊，即可在錄製影片時擷取每個影格的螢幕截圖。

「螢幕截圖」核取方塊。

如要在記憶體預算內自訂影像記錄保真度，請開啟「擷取設定」擷取設定。，然後從「螢幕截圖擷取」下拉式選單中選取影格大小和計數上限預設值。

「擷取設定」中的「螢幕截圖擷取預設」下拉式選單。

如要瞭解如何與螢幕截圖互動，請參閱「查看螢幕截圖」一文。

錄製時強制執行垃圾回收

錄製網頁時，按一下「Collect garbage」圖示，強制執行垃圾回收。

收集垃圾。

顯示錄製設定

按一下「Capture settings」擷取設定。，即可查看更多與開發人員工具擷取效能記錄方式相關的設定。

「擷取設定」部分。

停用 JavaScript 範例

根據預設，錄製內容的「Main」軌會顯示錄製期間呼叫的 JavaScript 函式詳細呼叫堆疊。如要停用這些呼叫堆疊，請按照下列步驟操作：

  1. 開啟「擷取設定」選單 。。請參閱「節目錄製設定」。
  2. 勾選「停用 JavaScript 樣本」核取方塊。
  3. 錄製網頁。

以下螢幕截圖顯示停用和啟用 JavaScript 範例的差異。停用取樣後，錄製的「主要」軌會短很多，因為系統會省略所有 JavaScript 呼叫堆疊。

停用 JS 樣本時的記錄範例。

這個範例顯示已停用 JS 樣本的錄製內容。

啟用 JS 取樣時的錄製範例。

這個範例顯示已啟用 JS 樣本的錄製內容。

錄製時限制網路

如要在錄製時調節網路，請按照下列步驟操作：

  1. 開啟「擷取設定」選單 。。請參閱「節目錄製設定」。
  2. 將「網路」設為所選的節流等級。

在下拉式選單中，「Performance」面板也可能會根據欄位資料，建議預設的節流預設設定，或接近使用者體驗的預設設定。

錄製時對 CPU 進行節流

如要在錄製時進行 CPU 節流，請按照下列步驟操作：

  1. 開啟「擷取設定」選單 。。請參閱「節目錄製設定」。
  2. 將「CPU」設為所選的節流層級。

節流的程度取決於電腦的功能。舉例來說，如果選擇「2x slowdown」選項，CPU 的運作速度會比平常慢 2 倍。DevTools 無法真正模擬行動裝置的 CPU，因為行動裝置的架構與桌上型電腦和筆記型電腦截然不同。

在下拉式選單中，「Performance」面板也可能會根據欄位資料，建議預設的節流預設設定，或接近使用者體驗的預設設定。

啟用 CSS 選取器統計資料

如要查看長時間執行的「重新計算樣式」事件期間，CSS 規則選取器的統計資料，請按照下列步驟操作：

  1. 開啟「擷取設定」選單 。。請參閱「顯示錄製設定」。
  2. 勾選「啟用 CSS 選取器統計資料」核取方塊。

詳情請參閱「在重新計算樣式事件期間分析 CSS 選取器效能」。

啟用進階繪製檢測

如要查看詳細的繪製檢測：

  1. 開啟「擷取設定」選單 。。請參閱「顯示錄製設定」。
  2. 勾選「啟用進階繪製儀表」核取方塊。

如要瞭解如何與繪製資訊互動，請參閱「查看圖層」和「查看繪製分析器」。

顯示自訂追蹤項目

在追蹤記錄摘要中啟用自訂軌跡和自訂軌跡群組摘要，這些摘要可使用 DevTools Extensibility API 自訂。

清除先前的錄音

錄製完畢後，請按「清除錄製內容」 清除錄音。 從「成效」面板清除錄製內容。

清除錄音。

分析效能記錄

記錄執行階段效能或記錄載入效能後，「Performance」面板會提供大量資料，用於分析剛才發生的效能。

為錄製內容加上註解並分享

請參閱「為成效發現加上註解並分享」。

取得可做為行動依據的洞察資料

「效能」面板包含的成效洞察資訊，也會顯示在 Lighthouse 報表中。這些洞察資料可提供改善效能的方式，並針對下列效能問題 (例如 LCP 和 INP 子部分、LCP 請求探索問題、第三方，以及舊版和重複的 JavaScript 資源) 提供導覽式分析。如需完整清單，請參閱效能深入分析說明文件。

如果沒有偵測到問題，洞察就會通過。「洞察」分頁會將這些項目列在底部的「通過的洞察」收合部分下方。未通過的洞察資訊會列在專屬部分。

如何善用洞察資訊：

  1. 錄製表演。
  2. 在「成效」面板的左側邊欄中，開啟「洞察」分頁，展開不同區段，然後將游標懸停在項目上並點選。「效能」面板會醒目顯示追蹤記錄中的相應事件。

當您將滑鼠游標懸停在效能追蹤記錄上時，「Performance」面板會執行下列操作，協助您瀏覽：

  • 將滑鼠游標懸停在「Timeline overview」(時間軸總覽) 上時，會顯示橫跨整個效能追蹤記錄的垂直標記。
  • 將滑鼠游標懸停在「Main」軌中的項目上時，系統會醒目顯示「Timeline overview」中的範圍。

如要仔細檢查效能記錄，您可以選取記錄的一部分、捲動長火焰圖、放大和縮小，以及使用導覽標記在縮放等級之間跳轉。

使用鍵盤快速鍵進行瀏覽

如要使用鍵盤快速鍵快速瀏覽錄音內容，請先選擇偏好的鍵盤瀏覽方式。

在面板右上角，按一下「說明」「顯示快速鍵」，然後選取下列其中一個選項：

  • 傳統：使用滑鼠滾輪 (觸控板向上或向下) 縮放，並使用 Shift + 滑鼠滾輪垂直捲動。
  • 現代：使用滑鼠滾輪垂直捲動、按住 Shift 鍵並滾動滑鼠滾輪水平捲動，以及按住 Command/Control 鍵並滾動滑鼠滾輪縮放。

快速鍵對話方塊也會提供可用快速鍵的速查表。

「效能」面板的快速鍵對話方塊，其中包含操作機制和快速鍵速查表。

選取錄音內容的某個部分

在「Performance」面板的動作列下方和記錄檔頂端，您會看到「Timeline overview」部分，其中包含「CPU」和「NET」圖表。

動作列下方的時間軸總覽。

如要選取錄音片段，請點選並按住，然後在「時間軸總覽」上向左或向右拖曳。

如要使用鍵盤選取部分內容：

  1. 聚焦於主要軌道或任何相鄰軌道。
  2. 使用 W、A、S、D 鍵分別放大、向左移動、縮小和向右移動。

如要使用觸控板選取部分內容，請按照下列步驟操作：

  1. 將滑鼠游標懸停在「Timeline overview」部分或任何軌跡 (「Main」和相鄰軌跡) 上。
  2. 用雙指向上滑動可縮小，向左滑動可向左移動，向下滑動可放大，向右滑動可向右移動。

您可以使用「時間軸總覽」連續建立多個巢狀導覽標記、提高縮放等級，然後在縮放等級之間自由跳轉。

如要建立及使用麵包屑：

  1. 在「時間軸總覽」中，選取要分享的錄音片段。
  2. 將滑鼠游標懸停在所選項目上，然後按一下「N 毫秒」 按鈕。選取範圍會擴大，填滿「時間軸總覽」。「時間軸總覽」頂端會開始建立一連串導覽標記。
  3. 重複前兩個步驟，建立另一個巢狀麵包屑。只要選取範圍大於 5 毫秒，您就可以繼續巢狀結構化麵包屑。
  4. 如要跳至所選縮放等級，請按一下「Timeline overview」頂端鏈結中的對應導覽標記。

如要移除導覽標記的子項，請在父項導覽標記上按一下滑鼠右鍵，然後選取「移除子項導覽標記」。

捲動長火焰圖

如要在「Main」軌跡或任何相鄰軌跡中捲動長火焰圖，請點選並按住，然後朝任何方向拖曳，直到找到所需內容。

忽略火焰圖中不相關的指令碼

如要更專注於程式碼，可以將不相關的指令碼加入忽略清單。

如要忽略指令碼，請執行下列任一操作：

  • 按一下頂端動作列中的「壓縮」顯示忽略清單設定對話方塊，然後在輸入欄位中輸入規則運算式。火焰圖會隨著您的輸入內容套用新規則。
  • 在指令碼上按一下滑鼠右鍵，然後選取「新增指令碼至忽略清單」。「效能」面板會將這個指令碼新增至「壓縮」「顯示忽略清單設定對話方塊」中的清單。

面板會自動收合這類指令碼的過多巢狀結構，並標示為 On ignore list (REGULAR_EXPRESSION)。

在「Show ignore list settings dialog」中，您可以開啟或關閉忽略清單規則。

如要從忽略清單中移除指令碼，請在火焰圖中對指令碼按一下滑鼠右鍵，然後選取「Remove script from ignore list」，或在「 Show ignore list settings dialog」中將滑鼠游標懸停在指令碼上，然後按一下「 Remove」。

DevTools 會儲存您在 「設定」>「忽略清單」中新增的忽略清單規則。

此外，如要只著重於第一方指令碼，請勾選「Dim 3rd parties」。「Performance」面板會將第三方指令碼顯示為灰色。

您可以搜尋「Main」軌跡中的活動，以及「Network」軌跡中的要求。

如要在「Performance」面板底部開啟搜尋框，請按下：

  • macOS：Command + F 鍵
  • Control + F 鍵 (Windows、Linux)

搜尋框。

這個範例顯示底部搜尋框中的規則運算式，可找出任何開頭為 E 的活動。

如要逐一查看符合查詢條件的活動，請按照下列步驟操作：

  • 按一下「展開」「上一個」或「展開」「下一個」按鈕。
  • 按下 Shift + Enter 鍵可選取上一個，按下 Enter 鍵則可選取下一個。

「成效」面板會顯示工具提示，說明搜尋框中選取的活動。

如要修改查詢設定，請按照下列步驟操作：

  • 按一下「match_case」「大小寫需相符」，讓查詢區分大小寫。
  • 按一下「regular_expression」規則運算式，在查詢中使用規則運算式。

如要隱藏搜尋框，請按一下「取消」。

變更軌道順序及隱藏軌道

如要整理效能追蹤記錄，可以變更追蹤記錄的順序，並在追蹤記錄設定模式中隱藏不相關的追蹤記錄。

如要移動及隱藏軌道，請按照下列步驟操作：

  1. 如要進入設定模式，請在軌道名稱上按一下滑鼠右鍵，然後選取「設定軌道」。
  2. 按一下 向上或 向下，即可上下移動測試群組。按一下 即可隱藏。
  3. 完成後，按一下底部的「完成追蹤項目設定」，即可退出設定模式。

觀看影片，瞭解這項工作流程的實際運作情形。

「效能」面板會儲存新追蹤記錄的追蹤設定，但不會儲存在下一個開發人員工具工作階段中。

查看主執行緒活動

使用「Main」追蹤記錄，查看頁面主執行緒上發生的活動。

主要測試群組。

按一下事件，即可在「Summary」分頁中查看更多相關資訊，包括但不限於：時間長度 (和自身時間長度)、來源指令碼中對應行的連結、來源網址 (如有實體名稱，則會一併顯示)、堆疊追蹤 (如有)，以及圓餅圖中的時間細目。

「Performance」面板會以藍色框線標示所選事件。

「摘要」分頁中主執行緒事件的詳細資訊。

這個範例顯示「摘要」分頁中 get 函式呼叫事件的詳細資訊。

區分第一方和第三方事件

過度依賴第三方程式碼可能會對載入效能造成負面影響。「成效」面板可協助您以視覺化方式區分追蹤記錄中的第一方和第三方事件，以便您做出更明智的決策，減少或延遲載入第三方程式碼，優先載入網頁內容。

如要只專注於第一方程式碼的效能：

  1. 確認效能追蹤記錄或「Insights」分頁中未選取任何項目。方法是按一下追蹤記錄中的空白處。
  2. 在頂端的動作列中，勾選「check_box」「Dim 3rd parties」。「Performance」面板會將效能追蹤記錄中與第三方相關的事件設為灰色，只醒目顯示第一方事件。

「Dim 3rd parties」已開啟，成效追蹤記錄中的相關事件會顯示為灰色，第一方則會醒目顯示。

使用「第一方 / 第三方」表格醒目顯示事件

在「時間軸總覽」中選取範圍，且未選取任何事件時，「摘要」分頁會顯示「第一方 / 第三方」表格，列出下列項目的相應傳輸大小和主執行緒時間：

  • 標有 1st party 徽章的第一方實體。
  • 所選範圍內偵測到的所有第三方實體，未標記。
  • 標有 Extension 徽章的擴充功能。
  • 其他 [unattributed] 個實體。

將滑鼠游標懸停在表格中的實體上，即可在追蹤記錄中醒目顯示相關事件，其餘事件則會顯示為灰色。如要讓實體的事件保持醒目顯示，請在表格中選取該實體。如要移除醒目顯示效果，請按一下追蹤記錄中的任何空白處。

如要在「由下而上」分頁中，開啟依這個實體分組的活動，請將游標懸停在表格中的實體上，然後點按旁邊的 「由下而上」。

表格中實體旁的「由下而上」按鈕。

解讀火焰圖

「Performance」面板會以火焰圖呈現主執行緒活動。X 軸代表錄製時間。Y 軸代表呼叫堆疊。上方的事件會導致下方的事件。

火焰圖。

這個範例顯示「Main」軌中的火焰圖。click 事件導致匿名函式呼叫。這個函式接著呼叫 onEndpointClick_，而又呼叫 handleClick_，依此類推。

「Performance」面板會為指令碼指派隨機顏色，拆分火焰圖，提高可讀性。在先前的範例中，一個指令碼的函式呼叫會以淺藍色標示。來自其他指令碼的呼叫會以淺粉紅色標示。深黃色代表指令碼活動，紫色事件代表轉譯活動。這些深黃色和紫色事件在所有錄音中都一致。

長時間任務也會以紅色三角形醒目顯示，超過 50 毫秒的部分則會以紅色陰影標示：

長時間任務。

在本範例中，工作耗時超過 400 毫秒，因此代表最後 350 毫秒的部分會以紅色陰影顯示，而最初的 50 毫秒則不會。

此外，「Main」軌跡會顯示使用 profile() 和 profileEnd() 控制台函式啟動和停止的 CPU 分析器資訊。在程式碼或控制台中呼叫 console.profileEnd()，會自動開啟「Performance」面板，並顯示記錄的追蹤記錄。

如要隱藏 JavaScript 呼叫的詳細火焰圖，請參閱「停用 JavaScript 樣本」。停用 JS 取樣時，只會看到 Event (click) 和 Function Call 等高階事件。

追蹤事件發起者

「Main」追蹤記錄會顯示箭頭，連結下列啟動器和其引發的事件：

  • 樣式或版面配置失效 ->「Recalculate styles」或「Layout」
  • 要求動畫頁框 -> 已觸發動畫頁框
  • 要求閒置回呼 -> 觸發閒置回呼
  • Install Timer -> Timer Fired
  • 「建立 WebSocket」->「傳送...」和「接收 WebSocket 握手」或「刪除 WebSocket」
  • 排定 postTask -> 觸發 postTask 或取消 postTask

如要查看箭頭，請在火焰圖中找出啟動器或其造成的事件，然後選取該項目。

箭頭從要求指向閒置回呼的觸發。

選取後，「摘要」分頁會顯示發起者的「發起者」連結，以及發起者所觸發事件的「發起者」連結。按一下即可在對應的事件之間跳轉。

「摘要」分頁中的「啟動者」連結。

在火焰圖中隱藏函式及其子項

如要整理「Main」執行緒中的火焰圖，可以隱藏所選函式或其子項：

  1. 在「Main」軌中，按一下滑鼠右鍵並選擇下列其中一個選項，或按下對應的快速鍵：

    • 隱藏函式 (H)
    • 隱藏子項 (C)
    • 隱藏重複子項 (R)
    • 重設子項 (U)
    • 重設追蹤 (T)
    • 將指令碼新增至忽略清單 (I)

    內容選單，可選擇隱藏所選函式或其子項。

    含有隱藏子項的函式名稱旁會顯示 下拉式按鈕。

  2. 如要查看隱藏的子項數量，請將滑鼠游標懸停在 下拉式按鈕上。

    下拉式按鈕上的工具提示，顯示隱藏的子項數量。

  3. 如要重設含有隱藏子項的函式或整個火焰圖，請選取函式並按下 U，或在任何函式上按一下滑鼠右鍵，然後分別選取「重設追蹤」。

忽略火焰圖中的指令碼

如要將指令碼新增至忽略清單，請在圖表中對指令碼按一下滑鼠右鍵，然後選取「Add script to ignore list」。

內容選單，焦點位於「忽略指令碼」選項。

圖表會收合忽略的指令碼，並標示為「在忽略清單中」，然後新增至「設定」 >「忽略清單」中的「自訂排除規則」。系統會儲存忽略的指令碼，直到您從追蹤記錄或「Custom exclusion rules」(自訂排除規則) 中移除為止。

「設定」中的「忽略指令碼清單」分頁。

以表格檢視活動

錄製頁面後，您不必只依賴「Main」軌跡來分析活動。開發人員工具也提供三個表格檢視畫面，可用於分析活動。每種檢視畫面都能從不同角度查看活動：

您可以點選這三個表格中的任一項目 (以及「摘要」分頁中的「第一方 / 第三方表格」)，在瀏覽效能追蹤記錄時，讓對應的事件在追蹤記錄中保持醒目顯示，並將其餘事件調暗。

為協助您更快找到所需內容，這三個分頁的「篩選器」列旁邊都有進階篩選按鈕：

  • 大小寫需相符。
  • 規則運算式。
  • 全字相符。

進階篩選的三個按鈕。

「Performance」面板中的每個表格檢視畫面，都會顯示函式呼叫等活動的連結。為協助您偵錯，開發人員工具會在來源檔案中找出對應的函式宣告。 此外，如果適當的來源對應存在且已啟用，開發人員工具會自動尋找原始檔案。

按一下連結，即可在「Sources」面板中開啟來源檔案。

在「事件記錄」分頁中連結來源檔案。

根活動

以下說明「Call tree」分頁、「Bottom-up」分頁和「事件記錄」部分中提及的「根活動」概念。

根活動是指會導致瀏覽器執行某些工作的活動。舉例來說，當您點選網頁時，瀏覽器會觸發 Event 活動做為根活動。該 Event 可能會導致處理常式執行。

在「主要」軌的火焰圖中，根活動位於圖表頂端。在「Call Tree」和「事件記錄」分頁中，根活動是頂層項目。

如需根活動的範例，請參閱「呼叫樹狀結構」分頁。

「呼叫樹狀結構」分頁

使用「Call tree」分頁標籤，查看哪些根活動會導致最多工作。

「通話樹狀結構」分頁只會顯示錄音中選取部分的活動。如要瞭解如何選取部分內容，請參閱「選取部分錄音內容」。

「呼叫樹狀結構」分頁。

在這個範例中，「活動」欄中的頂層項目 (例如 Event、Paint 和 Composite Layers) 是根活動。巢狀結構代表呼叫堆疊。在這個範例中，Event 導致 Function Call，Function Call 導致 button.addEventListener，button.addEventListener 導致 b，依此類推。

「Self Time」代表直接花費在該活動的時間。「Total Time」代表在該活動或其任何子項中花費的時間。

按一下「Self Time」、「Total Time」或「Activity」，即可依該欄排序表格。

使用「篩選」方塊，依活動名稱篩選事件。

「分組」選單預設為「不分組」。使用「Grouping」選單，根據各種條件排序活動表格。

「由下往上」分頁

使用「Bottom-up」分頁，查看哪些活動直接耗費最多時間。

「Bottom-up」分頁只會顯示所選記錄部分中的活動。如要瞭解如何選取部分內容，請參閱「選取部分錄音內容」。

「Bottom-Up」分頁。

在本範例的「Main」追蹤記錄火焰圖中，您可以看到幾乎所有時間都花在執行對 wait() 的三次呼叫。因此，「Bottom-up」分頁中的頂端活動為 wait。在火焰圖中，對 wait 的呼叫下方的黃色部分實際上是數千個 Minor GC 呼叫。因此，您可以在「Bottom-up」分頁中看到，下一個最耗費資源的活動是 Minor GC。

「自我時間」欄代表所有活動發生次數的直接總耗時。

「Total Time」欄代表該活動或其任何子項耗費的總時間。

「執行時間最長的堆疊」表格

在「呼叫樹狀結構」或「由下而上」分頁的右側，按一下「right_panel_open」「顯示最重的堆疊」，即可顯示「最重的堆疊」表格。

這個表格會顯示所選活動的哪些子項執行時間最長。將滑鼠游標懸停在表格中的項目上，即可在「Main」軌跡中醒目顯示對應的事件，其餘事件則會變暗。

這樣一來，您就能在效能追蹤中，以視覺化方式找出呼叫堆疊中耗時最長的巢狀活動。

「事件記錄」分頁

使用「事件記錄」分頁，依錄製期間發生的順序查看活動。

「事件記錄」分頁只會顯示所選錄影片段的活動。如要瞭解如何選取部分內容，請參閱「選取部分錄音內容」。

「事件記錄」分頁。

「Start Time」欄代表該活動開始的時間點 (相對於錄製開始時間)。在本例中，所選項目的 1573.0 ms 開始時間表示活動在錄製開始後 1573 毫秒開始。

「Self Time」(自行時間) 欄代表直接在該活動中花費的時間。

「總時間」欄代表直接在該活動或任何子項中花費的時間。

按一下「開始時間」、「Self Time」或「Total Time」，即可依該欄排序表格。

使用「篩選器」方塊，依名稱篩選活動。

使用「時間長度」選單，篩除時間長度少於 1 毫秒或 15 毫秒的活動。根據預設，「時間長度」選單會設為「全部」，也就是顯示所有活動。

取消勾選「Loading」、「Scripting」、「Rendering」或「Painting」核取方塊，即可篩除這些類別的所有活動。

查看效能標記

在成效追蹤記錄中，您可以在疊加層中看到垂直線，代表重要的成效標記，例如：

疊加層中的成效標記。

將游標懸停在追蹤記錄底部的標記名稱上，即可查看時間戳記。

查看自訂時間

在「Timings」追蹤記錄中，查看自訂效能標記，例如：

  • performance.mark() 通電話。下方顯示的個別標記附有工具提示，時間為 813.44 毫秒，標示為「Starting to run JavaScript」(開始執行 JavaScript)。
  • performance.measure() 通電話。下方會顯示標示為「Slow Interaction」(互動緩慢) 的黃色跨度。

「Timings」軌跡中的標記。

選取標記，即可在「摘要」分頁中查看更多詳細資料，包括時間戳記、總時間、自我時間和 detail 物件。如果是 performance.mark() 和 performance.measure() 呼叫，這個分頁也會顯示堆疊追蹤。

查看互動

在「互動」追蹤記錄中查看使用者互動，找出潛在的回應速度問題。

如要查看互動：

  1. 開啟開發人員工具，例如在這個示範頁面。
  2. 開啟「Performance」面板，然後開始錄製。
  3. 點選元素 (咖啡)，然後停止錄製。
  4. 在時間軸中找出「Interactions」追蹤記錄。

「互動」軌。

在本例中，「Interactions」追蹤記錄會顯示「Pointer」互動。互動有鬍鬚，表示處理時間邊界的輸入和呈現延遲。將滑鼠游標懸停在互動上，即可查看工具提示，其中包含輸入延遲、處理時間和呈現延遲。

如果互動時間超過 200 毫秒，「互動」軌跡也會在「摘要」分頁和懸停工具提示中，顯示 Interaction to Next Paint (INP) 警告：

INP 警告。

「互動」軌跡會以右上角的紅色三角形標示超過 200 毫秒的互動。

查看版面配置位移

在「Layout shifts」軌跡上查看版面配置位移。班次會以紫色菱形顯示，並根據時間軸上的鄰近程度分組為叢集 (紫色線條)。

版面配置位移軌。

如要醒目顯示可視區域中造成版面配置轉移的元素，請將游標懸停在相應的菱形上。

如要查看版面配置位移的詳細資訊，請在「摘要」分頁中點選相應的菱形或叢集，即可查看時間、分數、元素和潛在原因。

詳情請參閱「Cumulative Layout Shift (CLS)」。

查看動畫

在「動畫」軌跡上查看動畫。動畫會以對應的 CSS 屬性或元素 (如有) 命名，例如 transform 或 my-element。非合成動畫的右上角會標示紅色三角形。

選取非合成動畫的「動畫」軌。

選取動畫，即可在「Summary」分頁中查看更多詳細資料，包括合成失敗的原因。

查看 GPU 活動

在「GPU」部分查看 GPU 活動。

GPU 區段。

查看光柵活動

在「Thread Pool」部分查看光柵活動。

「執行緒集區」部分中的點陣活動。

分析每秒影格數 (FPS)

開發人員工具提供多種分析每秒影格數的方法：

「Frames」部分

「Frames」部分會顯示特定影格的確切耗時。

將滑鼠游標懸停在影格上，即可查看工具提示，瞭解更多相關資訊。

將滑鼠游標懸停在影格上。

這個範例顯示將滑鼠游標懸停在影格上時，會出現工具提示。

「Frames」部分會顯示四種影格：

  1. 閒置頁框 (白色)。無變更。
  2. 影格 (綠色)。如期正常顯示。
  3. 呈現部分頁框 (黃色，稀疏的寬虛線模式)。Chrome 會盡可能及時顯示至少部分視覺更新。舉例來說，如果算繪器程序主執行緒的工作 (畫布動畫) 延遲，但合成器執行緒 (捲動) 準時。
  4. 捨棄的影格 (紅色，實線密集)。Chrome 無法在合理時間內轉譯影格。

將滑鼠游標懸停在呈現部分頁框上。

這個範例顯示滑鼠游標懸停在部分呈現的影格上時，會出現工具提示。

按一下影格，即可在「Summary」分頁中查看更多相關資訊。開發人員工具會以藍色框線標示所選影格。

在「摘要」分頁中查看影格。

查看網路要求

展開「網路」部分，即可查看效能記錄期間發生的網路要求刊登序列。

在「網路」軌道中選取要求，並開啟「摘要」分頁。

「Network」軌跡名稱旁會顯示圖例，以不同顏色標示要求類型。

轉譯阻斷要求在右上角會標有紅色三角形。

將滑鼠游標懸停在要求上，即可查看工具提示，當中會顯示：

  • 要求的網址和執行要求所需的總時間。
  • 優先順序或優先順序變更，例如 Medium -> High。
  • 要求是否為 Render-blocking。
  • 要求時間的細目，詳情請見下文。

點選要求後，「Network」追蹤記錄會從發起端繪製箭頭指向要求。

此外，「Performance」面板會顯示「Summary」分頁，其中包含要求的詳細資訊，包括但不限於「Initial Priority」和 (最終)「Priority」欄位。如果兩者值不同，表示要求的擷取優先順序在記錄期間有所變更。詳情請參閱「使用 Fetch Priority API 最佳化資源載入」。

「Summary」分頁也會顯示要求時間的細目。

「Summary」分頁中的要求時間細目。

在本例中，www.google.com 的要求以左側的線條 (|–) 表示，中間的長條則分為深色和淺色部分，右側的線條 (–|) 則代表回應。

如果有的話，「摘要」分頁也會顯示實作伺服器端轉譯技術的網路要求伺服器時間細目。對於這類要求，「Performance」面板會從 Server-Timing 回應標頭擷取資料。

「摘要」分頁中的伺服器時間細目。

您可以在「Network」分頁中找到另一個時間細目。在「網路」追蹤記錄中的要求上按一下滑鼠右鍵，或在「摘要」分頁中的網址上按一下滑鼠右鍵，然後點選「在『網路』面板中顯示」。開發人員工具會將您帶往「網路」面板，並選取相應的要求。開啟「時間碼」分頁。

「網路」面板中要求的「時間」分頁。

這兩種細目之間的對應關係如下：

  • 左側線條 (|–) 代表 Connection start 事件群組之前的所有事件，包括 事件群組。也就是 Request Sent 之前的所有內容。
  • 亮度列的亮部為 Request sent 和 Waiting for server response。
  • 深色部分代表 Content download。
  • 右側線條 (–|) 代表等待主執行緒的時間。「Network」>「Timing」分頁不會顯示這項資訊。

查看記憶體指標

啟用「記憶體」核取方塊，即可查看上次錄製的記憶體指標。

「記憶體」核取方塊。

開發人員工具會在「摘要」分頁上方，顯示新的「記憶體」圖表。「NET」圖表下方也會顯示名為「HEAP」的新圖表。「HEAP」圖表提供的資訊與「Memory」圖表中的「JS Heap」線相同。

記憶體指標。

這個範例顯示「Summary」分頁上方的記憶體指標。

圖表中的彩色線條對應到圖表上方的彩色核取方塊。取消勾選方塊，即可從圖表中隱藏該類別。

圖表只會顯示所選錄音檔的區域。在先前的範例中，「Memory」圖表只會顯示錄製開始時的記憶體用量，最多約 1000 毫秒。

查看錄音部分內容的時間長度

分析「網路」或「主要」等部分時，有時需要更精確地估算特定事件所花費的時間。按住 Shift 鍵，然後點選並按住並向左或向右拖曳，即可選取錄音的某個部分。開發人員工具會在所選範圍底部顯示該部分耗費的時間。

查看部分錄製內容的時間長度。

在這個範例中，所選部分底部的 488.53ms 時間戳記表示該部分所需的時間。

查看螢幕截圖

如要瞭解如何啟用螢幕截圖功能，請參閱「在錄製影片時擷取螢幕截圖」。

將游標懸停在「時間軸總覽」上，即可查看錄製期間該時間點的網頁螢幕截圖。「時間軸總覽」部分包含「CPU」、「FPS」和「NET」圖表。

查看螢幕截圖。

您也可以按一下「影格」部分中的影格，查看螢幕截圖。開發人員工具會在「摘要」分頁中顯示螢幕截圖的縮小版。

在「摘要」分頁中查看螢幕截圖。

這個範例顯示在「Frames」部分點選 195.5ms 影格時，「Summary」分頁中的螢幕截圖。

按一下「摘要」分頁中的縮圖，即可放大螢幕截圖。

從「摘要」分頁放大螢幕截圖。

這個範例顯示在「Summary」分頁中點選縮圖後，放大的螢幕截圖。

查看圖層資訊

如要查看影格的進階圖層資訊，請按照下列步驟操作：

  1. 啟用進階繪製檢測。
  2. 在「頁框」部分選取頁框。開發人員工具會在「事件記錄」分頁旁的「圖層」分頁中，顯示圖層相關資訊。

「圖層」分頁。

將滑鼠游標懸停在圖表中的某個層，即可醒目顯示該層。

醒目顯示圖層。

這個範例顯示將滑鼠游標懸停在圖層 #39 上時，該圖層會醒目顯示。

如要移動圖表，請按照下列步驟操作：

  • 按一下「Pan Mode」平移模式。，即可沿著 X 和 Y 軸移動。
  • 按一下「旋轉模式」 旋轉模式。 沿 Z 軸旋轉。
  • 按一下「Reset Transform」(重設轉換) 重設轉換。，將圖表重設為原始位置。

查看圖層分析的實際運作情況：

查看繪製分析器

如要查看繪製事件的進階資訊，請按照下列步驟操作：

  1. 啟用進階繪製檢測。
  2. 在「Main」追蹤記錄中選取「Paint」事件。

「Paint Profiler」分頁。

使用「轉譯」分頁分析轉譯效能

使用「轉譯」分頁的功能，以視覺化方式呈現網頁的轉譯效能。

開啟「Rendering」分頁。

使用 FPS 計量器即時查看每秒影格數

「Frame rendering stats」是顯示在可視區域右上角的疊加層，在頁面執行時，即時預估 FPS。

請參閱「影格轉譯統計資料」。

使用「繪圖閃爍」功能即時查看繪圖事件

使用「Paint Flashing」，即時查看網頁上的所有繪製事件。

請參閱「繪製閃爍」。

使用「圖層框線」查看圖層疊加

使用「Layer Borders」，在頁面頂端查看圖層邊框和圖塊的疊加層。

請參閱「圖層邊框」。

即時找出捲動效能問題

使用「Scrolling Performance Issues」，找出網頁中含有與捲動相關事件監聽器的元素，這些元素可能會影響網頁效能。開發人員工具會以藍綠色標示可能發生問題的元素。

請參閱「捲動效能問題」。