效能功能參考資料

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

請參閱「分析執行階段效能」，瞭解如何使用 Chrome 開發人員工具分析網頁效能。

記錄效能

您可以記錄執行階段或載入效能。

記錄執行階段效能

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

  1. 前往要分析的網頁。
  2. 按一下開發人員工具中的「Performance」分頁標籤。

  3. 按一下「錄影」圖示 錄製。。

    錄製。

  4. 與網頁互動。開發人員工具會記錄使用者互動後發生的所有頁面活動。

  5. 再次按一下「錄影」或「停止」即可停止錄影。

記錄載入效能

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

  1. 前往要分析的網頁。
  2. 開啟開發人員工具的「效能」面板。

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

    重新載入網頁。

開發人員工具會自動放大錄製內容中活動發生頻率最高的部分。

網頁載入錄製畫面。

在這個範例中，「效能」窗格會顯示網頁載入期間的活動。

錄製時擷取螢幕截圖

勾選「螢幕截圖」核取方塊，即可在錄影時擷取每個影格畫面的螢幕截圖。

「螢幕截圖」核取方塊。

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

在錄製期間強制執行垃圾收集

錄製網頁時，請按一下「Collect garbage」 強制執行垃圾收集作業。

回收記憶體。

顯示錄影設定

按一下「擷取設定」擷取設定。，即可顯示與 DevTools 擷取效能錄製檔案的方式相關的更多設定。

「擷取設定」部分。

停用 JavaScript 樣本

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

  1. 開啟「拍攝設定」。 選單。請參閱「顯示錄影設定」。
  2. 勾選「停用 JavaScript 樣本」核取方塊。
  3. 錄製網頁畫面。

下列螢幕截圖顯示停用和啟用 JavaScript 範例的差異。停用取樣功能後，錄製檔案的 Main 軌道會變得非常短，因為系統會略過所有 JavaScript 呼叫堆疊。

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

這個範例顯示的是含有停用 JS 範例的錄製內容。

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

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

在錄製期間限制網路頻寬

如要在錄製期間限制網路頻寬，請按照下列步驟操作：

  1. 開啟「拍攝設定」。 選單。請參閱「顯示錄影設定」。
  2. 將「Network」設為所選的節流等級。

在錄製時限制 CPU 效能

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

  1. 開啟「拍攝設定」。 選單。請參閱「顯示錄影設定」。
  2. 將「CPU」設為所選的節流等級。

節流功能取決於電腦的效能。舉例來說，2 倍減速選項會讓 CPU 的運作速度比平常慢 2 倍。行動裝置的架構與電腦和筆記型電腦的架構大不相同，因此 DevTools 無法真正模擬行動裝置的 CPU。

啟用 CSS 選取器統計資料

如要在長時間執行的 Recalculate Style 事件期間查看 CSS 規則選取器的統計資料，請按照下列步驟操作：

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

如需更多詳細資訊，請參閱如何在重新計算樣式事件期間分析 CSS 選取器效能。

啟用進階繪製檢測

如要查看詳細的繪圖檢測資料：

  1. 開啟「拍攝設定」。 選單。請參閱「顯示錄影設定」。
  2. 勾選「Enable advanced paint instrumentation」核取方塊。

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

為錄音加上註解並分享

記錄完畢後，您可以分析並加上註解，分享所得的結果。

如要為錄製內容加上註解，請開啟「成效」面板左側的 側欄，然後開啟「註解」分頁。你可以透過多種方式新增註解：

  • 標示項目：如要為項目新增標籤，請按兩下項目並輸入標籤。
  • 連結兩個項目：如要連結兩個項目並顯示箭頭，請按兩下第一個項目，然後點選旁邊的箭頭，再點選第二個項目。
  • 標示時間範圍：如要標示任意時間範圍，請按住 Shift 鍵，從時間範圍的開始時間拖曳至結束時間，然後輸入標籤。

錄製的表現內容註解。

在本例的「Network」軌跡中，有兩個註解請求、兩者之間的連線，以及以粉紅色標示的註解時間範圍。「註解」分頁會在分頁名稱旁邊顯示註解數量，在本例中為 4。

如要刪除註解，請在「註解」分頁中將游標懸停在註解上，然後按一下旁邊的「刪除」按鈕。

如要隱藏效能追蹤記錄中的註解，請勾選「Annotations」分頁底部的「Hide annotations」核取方塊。

儲存及分享錄音

如要儲存錄製內容，並稍後與附註的成效結果分享，請在「成效」面板頂端的操作列中，依序點選「下載」和「儲存追蹤記錄」。

儲存含有註解的追蹤記錄。

您也可以選取「儲存不含註解的追蹤記錄」。

載入錄音檔

如要載入錄製內容，請按一下「成效」面板頂端的「上傳」動作列。

動作列中的「Load Trace」按鈕。

如果追蹤記錄中含有註解，Performance 面板會顯示這些註解。

清除先前的錄音

錄製完成後，按下「清除錄製內容」圖示 清除錄音檔。，即可在「效能」面板中清除該錄製內容。

清除錄音檔。

分析效能錄製檔案

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

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

「效能」面板會整合 Lighthouse 報表和現已淘汰的「效能深入分析」面板中的效能深入分析資料。這些洞察資料可提供改善成效的建議，並針對下列成效問題提供引導分析，包括但不限於：

  • 依階段顯示 LCP 和 INP
  • LCP 要求探索
  • 版面配置位移主因
  • 轉譯封鎖要求
  • 第三方
  • 圖片提交
  • 文件要求延遲時間
  • 針對行動裝置進行可視區域最佳化
  • CSS 選取器成本

如何善用洞察資訊：

  1. 錄製成效影片。
  2. 在「成效」面板的左側欄中，開啟「洞察」分頁，展開各個部分，然後將滑鼠游標懸停在項目上並按一下。「Performance」面板會在追蹤記錄中醒目顯示對應的事件。

如要仔細檢查錄製的效能，您可以選取錄製內容的一部分、捲動長條圖表、放大或縮小畫面，並使用麵包屑在不同縮放等級之間跳轉。

選取錄音片段

在「Performance」面板的操作列下方和錄製畫面頂端，您可以看到「Timeline overview」部分，其中包含「CPU」和「NET」圖表。

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

如要選取錄音的部分內容，請按住並拖曳時間軸總覽的左側或右側。

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

  1. 將焦點放在「Main」音軌或其鄰近音軌。
  2. 分別使用 W、A、S、D 鍵放大、向左移動、縮小和向右移動。

如何使用觸控板選取部分內容：

  1. 將滑鼠游標懸停在「時間軸總覽」專區或任一音軌 (「主」及其相鄰音軌) 上。
  2. 用兩指向上滑動可縮小畫面，向左滑動可向左移動，向下滑動可放大畫面，向右滑動可向右移動。

時間軸總覽可讓您依序建立多個巢狀麵包屑、增加縮放等級，然後在各縮放等級之間自由切換。

如何建立及使用麵包屑：

  1. 在「時間軸總覽」中，選取部分錄製內容。
  2. 將滑鼠游標懸停在所選範圍上，然後點選「N ms」 按鈕。所選範圍會展開，填滿「時間軸總覽」。時間軸總覽頂端會開始建立麵包屑鏈結。
  3. 重複執行前兩個步驟，建立另一個巢狀麵包屑。只要選取範圍超過 5 毫秒，您就可以繼續巢狀嵌套麵包屑。
  4. 如要跳至所選縮放等級，請在時間軸總覽頂端的鏈結中，按一下相應的麵包屑。

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

捲動長火焰圖

如要在「Main」軌或其相鄰軌道中捲動長形火焰圖表，請按住滑鼠左鍵，然後向任一方向拖曳，直到您要查看的資料顯示在畫面上為止。

您可以搜尋「Main」追蹤記錄中的活動，以及「Network」追蹤記錄中的要求。

如要開啟「成效」面板底部的搜尋框，請按下：

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

搜尋框。

這個範例在底部的搜尋方塊中顯示正規表示式，可找出任何以 E 開頭的活動。

如要循環瀏覽符合查詢的活動，請按照下列步驟操作：

  • 按一下「expand_less」「Previous」或「expand_more」「Next」按鈕。
  • 按下 Shift + Enter 鍵選取上一個，或按下 Enter 鍵選取下一個。

「成效」面板會在搜尋框中選取的活動上方顯示工具提示。

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

  • 按一下「match_case」「比對大小寫」，讓查詢區分大小寫。
  • 點選「regular_expression」「規則運算式」，即可在查詢中使用規則運算式。

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

變更曲目順序並隱藏曲目

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

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

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

觀看影片，瞭解這個工作流程的實際運作方式。

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

查看主要執行緒活動

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

主音軌。

點選事件即可在「Summary」分頁中查看更多相關資訊。「成效」面板會以藍色標示所選事件。

在「Summary」(摘要) 分頁中，進一步瞭解主要執行緒事件。

這個範例會在「Summary」分頁中，顯示 get 函式呼叫事件的更多資訊。

解讀火焰圖

「Performance」面板會在火焰圖中呈現主要執行緒活動。X 軸代表錄音時間。y 軸代表呼叫堆疊。頂端的事件會導致下方的事件。

火焰圖。

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

「Performance」面板會為指令碼指派隨機顏色，以便區分火焰圖表，讓圖表更易於閱讀。在先前的範例中，一個指令碼的函式呼叫會以淺藍色標示。來自其他指令碼的呼叫則會以淺粉紅色標示。較深的黃色代表指令碼活動，紫色事件則代表轉譯活動。這些較深的黃色和紫色事件在所有錄影檔中都一致。

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

長時間執行的工作。

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

此外，Main 追蹤記錄會顯示使用 profile() 和 profileEnd() 主控台函式啟動及停止的 CPU 設定檔資訊。

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

追蹤事件啟動者

Main 軌道可顯示箭頭，連結下列啟動程序和所造成的事件：

  • 樣式或版面配置無效 -> 重新計算樣式或「版面配置」
  • 要求動畫頁框 -> 動畫頁框已觸發
  • 要求閒置回呼 -> 觸發閒置回呼
  • 安裝計時器 -> 已觸發計時器
  • 「Create WebSocket」->「Send...」和「Receive WebSocket Handshake」或「Destroy WebSocket」

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

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

選取後，「摘要」分頁會顯示「Initiator for」連結 (針對發起者)，以及「Initiated by」連結 (針對發起事件)。按一下這些按鈕，即可跳轉至對應的事件。

「摘要」分頁中的「發起者」連結。

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

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

  1. 在「Main」軌道中，按一下函式右鍵，然後選擇下列任一選項或按下對應的快速鍵：

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

    內容選單，其中包含隱藏所選函式或其子項的選項。

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

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

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

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

忽略火焰圖中的指令碼

如要將指令碼新增至忽略清單，請在圖表中按一下指令碼，然後選取「將指令碼新增至忽略清單」。

內容選單，其中「忽略指令碼」選項已設為焦點。

圖表會收合已忽略的指令碼，並將其標示為「已加入忽略清單」，然後將其加入 「設定」>「忽略清單」中的「自訂排除」規則。系統會保留遭到略過的腳本，直到您從追蹤記錄或自訂排除規則中移除為止。

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

以表格檢視活動

記錄網頁後，您不必只依賴「Main」追蹤記錄來分析活動。開發人員工具也提供三種表格檢視畫面，方便分析活動。每個檢視畫面都會以不同的角度呈現活動：

為了協助你更快找到所需內容，所有三個分頁的「Filter」列旁都設有進階篩選按鈕：

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

進階篩選的三個按鈕。

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

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

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

根活動

以下說明「呼叫樹狀圖」分頁、「自下而上」分頁和「事件記錄」部分中提到的「根活動」概念。

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

在「Main」追蹤記錄的火焰圖中，根活動位於圖表頂端。在「呼叫樹狀圖」和「事件記錄」分頁中，根活動是頂層項目。

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

「呼叫樹狀結構」分頁

使用「呼叫樹狀結構」分頁標籤，查看哪些根活動造成最多工作。

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

「呼叫樹狀結構」分頁。

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

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

按一下「自學時間」、「總時間」或「活動」，即可依該欄排序表格。

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

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

按一下「Show Heaviest Stack」顯示「執行時間最長的堆疊」。，即可在「Activity」表格右側查看另一個表格。按一下活動即可填入「執行時間最長的堆疊」表格。「執行時間最長的堆疊」表格會顯示所選活動的哪些子項執行時間最長。

「由下往上」分頁

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

「自下而上」分頁只會顯示所選錄影片段中的活動。請參閱選取錄音檔的部分內容，瞭解如何選取部分內容。

「由下往上」分頁。

在本例的「Main」追蹤火焰圖中，您可以看到幾乎所有時間都花在執行對 wait() 的三個呼叫。因此，自下而上分頁中顯示的頂端活動是 wait。在火焰圖中，wait 呼叫下方的黃色部分，實際上是數千個 Minor GC 呼叫。因此，您會發現在「Bottom-Up」分頁中，第二大耗用資源的活動是 Minor GC。

「Self Time」欄代表在該活動中直接花費的時間總和，涵蓋所有活動發生情形。

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

「事件記錄」分頁

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

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

「事件記錄」分頁。

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

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

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

按一下「開始時間」、「自訂時間」或「總時間」，即可依該欄排序表格。

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

使用「Duration」選單，篩除耗時不到 1 毫秒或 15 毫秒的任何活動。預設情況下，「Duration」選單會設為「All」，也就是顯示所有活動。

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

查看時間

在「時間」軌道上，查看重要標記，例如：

時間資訊軌跡中的標記。

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

查看互動

查看「互動」追蹤記錄中的使用者互動情形，找出可能的回應問題。

如要查看互動，請按照下列步驟操作：

  1. 例如，在這個示範頁面上開啟開發人員工具。
  2. 開啟「Performance」面板，然後開始錄製。
  3. 按一下元素 (咖啡) 並停止錄製。
  4. 在時間軸中找出「互動」軌跡。

「互動」追蹤。

在本例中，「互動」軌跡會顯示「指標」互動。互動有細長的線條，用來指出在處理時間邊界處的輸入和顯示延遲。將滑鼠游標懸停在互動上，即可看到工具提示，其中包含輸入延遲、處理時間和呈現延遲。

「互動」追蹤記錄也會在「摘要」分頁和滑鼠游標懸停時的工具提示中，顯示超過 200 毫秒的互動Interaction to Next Paint (INP) 警告：

INP 警告。

「互動」追蹤記錄會在右上角以紅色三角形標示超過 200 毫秒的互動。

檢視版面配置位移

查看「版面配置位移」軌跡上的版面配置位移。系統會以紫色鑽石圖示顯示變化情形，並根據時間軸上的相鄰程度，將變化情形分組成clusters (紫色線條)。

版面配置位移軌跡。

如要醒目顯示導致可視區域版面配置轉移的元素，請將滑鼠游標懸停在相應的鑽石圖示上。

如要進一步瞭解版面配置偏移或偏移情況，請點選「Summary」分頁標籤中的對應鑽石圖示或叢集，即可查看時間、分數、元素和潛在問題原因。

詳情請參閱「累計版面配置位移 (CLS)」。

查看動畫

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

選取非合成動畫的「動畫」群組。

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

查看 GPU 活動

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

「GPU」區段。

查看光柵活動

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

「Thread Pool」部分中的光柵活動。

分析每秒畫格數 (FPS)

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

「Frames」區段

「Frames」區段會顯示特定影格所需的時間。

將滑鼠游標懸停在框架上，即可查看包含更多資訊的工具提示。

將滑鼠游標懸停在框架上。

這個範例會在您將滑鼠游標懸停在框架上時顯示工具提示。

「Frames」部分可顯示四種類型的框架：

  1. 閒置頁框 (白色)。無變更。
  2. 影格 (綠色)：如預期及時算繪。
  3. 部分呈現的畫面 (黃色，帶有稀疏的寬虛線圖案)。Chrome 會盡力在適當時間內算繪至少部分視覺更新。舉例來說，如果轉譯器程序 (畫布動畫) 的主執行緒的工作延遲，但合成器執行緒 (捲動) 的時間恰好。
  4. 捨棄的影格 (紅色，以密集的實線圖案表示)。Chrome 無法在合理的時間內轉譯影格。

將滑鼠游標懸停在部分顯示的頁框上。

這個範例會在您將滑鼠游標懸停在部分顯示的框架上時，顯示工具提示。

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

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

查看網路要求

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

在「網路」追蹤記錄中選取的請求，並開啟「摘要」分頁。

「Network」追蹤記錄名稱旁邊有個圖例，其中以顏色編碼表示要求類型。

在右上角標示出會造成轉譯阻斷的請求。

將滑鼠游標懸停在要求上，即可查看包含下列資訊的工具提示：

  • 要求的網址和執行所需的總時間。
  • 優先順序或優先順序變更，例如 Medium -> High。
  • 要求是否為 Render blocking。
  • 請求時間細目 (稍後說明)。

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

此外，「效能」面板會顯示「摘要」分頁，提供要求的更多資訊，包括但不限於「初始優先順序」和 (最終)「優先順序」欄位。如果兩者值不同，表示在錄製期間要求的擷取優先順序已變更。詳情請參閱「使用 Fetch Priority API 最佳化資源載入」。

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

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

www.google.com 的請求由左側的線條 (|–)、中間的深色和淺色區塊，以及右側的線條 (–|) 所代表。

您可以在「Network」分頁中找到其他時間分析資料。在「網路」追蹤記錄中，按一下滑鼠右鍵，選取所需要求，或在「摘要」分頁中選取所需網址，然後按一下「在網路面板中顯示」。開發人員工具會將您帶往「網路」面板，並選取相應要求。開啟「時間」分頁。

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

以下是這兩種細目資料的對應關係：

  • 左側線條 (|–) 是包含 Connection start 群組的所有事件。也就是說，它是 Request Sent 之前的所有內容。
  • 列的淺色部分是 Request sent 和 Waiting for server response。
  • 列的深色部分是 Content download。
  • 右側線條 (–|) 是等待主執行緒的時間。網路 > 時間分頁不會顯示。

查看記憶體指標

勾選「Memory」核取方塊，即可查看上次錄製時的記憶體指標。

「Memory」核取方塊。

開發人員工具會在「Summary」分頁上方顯示新的「Memory」圖表。在 NET 圖表下方，還有一個名為 HEAP 的新圖表。「HEAP」圖表提供的資訊與「Memory」圖表中的「JS 堆積」行相同。

記憶體指標。

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

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

圖表只會顯示所選錄音檔的區域。在前述範例中，「Memory」圖表只會顯示錄製開始時的記憶體用量，直到 1000ms 左右。

查看錄音檔的部分時間長度

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

查看錄音檔的部分時間長度。

在本例中，選取部分底部的 488.53ms 時間戳記會指出該部分所需的時間。

查看螢幕截圖

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

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

查看螢幕截圖。

您也可以按一下「Frames」部分中的畫面，查看螢幕截圖。開發人員工具會在「Summary」分頁中顯示螢幕截圖的小型版本。

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

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

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

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

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

查看圖層資訊

如何查看影格相關的進階圖層資訊：

  1. 啟用進階繪製檢測。
  2. 在「Frames」部分中選取相框。開發人員工具會在「Layers」分頁中顯示其層級資訊，該分頁位於「Event Log」分頁旁。

「圖層」分頁。

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

醒目顯示圖層。

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

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

  • 按一下「平移模式」圖示 平移模式。，沿著 X 軸和 Y 軸移動。
  • 按一下「旋轉模式」圖示 旋轉模式。，沿著 Z 軸旋轉。
  • 按一下「重設轉換」圖示 重設轉換。，將圖表重設為原始位置。

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

查看 Paint Profiler

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

  1. 啟用進階繪製檢測。
  2. 在「Main」軌道中選取「Paint」事件。

Paint Profiler 分頁。

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

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

開啟「算繪」分頁。

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

「影格算繪統計資料」是顯示在檢視區右上角的疊加層，在網頁執行期間，提供 FPS 的即時預估值。

請參閱「影格算繪統計資料」。

使用 Paint Flashing 即時查看繪圖事件

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

請參閱「閃動顯示繪製區域」。

使用「圖層邊框」檢視圖層重疊

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

請參閱「圖層邊框」一文。

即時找出捲動效能問題

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

請參閱捲動效能問題。