Chrome 開發人員工具：Chrome 58 版中的 JavaScript CPU 剖析

凱斯巴斯克
Kayce Basques
Twitter GitHub Glitch

在 Chrome 58 (目前為 Canary 版) 中，時間軸面板已重新命名為「Performance」(效能) 面板，「Profile」(設定檔) 面板已重新命名為「Memory」面板，而「Profile」(設定檔) 面板中的「Record JavaScript CPU Profile」(記錄 JavaScript CPU 設定檔) 功能則已移至更隱藏的位置。

長期目標是移除舊的 JavaScript CPU 分析器，讓所有人使用新的工作流程。

這份簡短的遷移指南說明如何在「Performance」(效能) 面板中記錄 JS 設定檔，以及「效能」面板的 UI 對應至您以往的工作流程。

存取舊版 JavaScript CPU 分析器

如果您偏好先前在「Profiles」面板提供的「Record JavaScript CPU 設定檔」工作流程，仍可透過以下方式存取：

  1. 開啟開發人員工具主選單。
  2. 依序選取「More tools」 >「JavaScript Profiler」。舊版分析器會在名為「JavaScript Profiler」的新面板中開啟。

如何記錄 JS 設定檔

  1. 開啟開發人員工具。

  2. 按一下「成效」分頁標籤。

    Chrome 開發人員工具效能面板

    圖 1. 「效能」面板。

  3. 你可以透過下列其中一種方式錄製：

    • 如要剖析網頁載入，請按一下「記錄網頁載入，」開發人員工具會自動開始錄製，並在偵測到頁面載入完畢時自動停止。
    • 如要剖析執行中的頁面，請按一下「Record」，執行要剖析的動作，然後在完成後按一下「Stop」。

舊工作流程如何對應至新工作流程

在舊版工作流程的「Chart」檢視畫面中，螢幕截圖顯示 CPU 用量總覽圖表 (頂端箭頭) 和火焰圖 (底部箭頭) 在新工作流程中的位置。

在舊版工作流程與新工作流程中的火焰圖對應。

圖 2：舊工作流程中的火焰圖對應 (左側) 與新工作流程 (右側)。

您可以在「Bottom-Up」分頁查看「Heavy (Bottom Up)」檢視畫面：

在舊工作流程中，由下而上檢視之間的對應。

圖 3. 舊工作流程中由下而上檢視畫面之間的對應 (左側) 和新工作流程 (右側)。

「Tree (Top Down)」檢視畫面也會顯示「Call Tree」分頁：

在舊版工作流程與新工作流程中的樹狀檢視之間進行對應。

圖 4. 在舊版工作流程中的樹狀檢視 (左側) 和新工作流程 (右側)。