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

Kayce Basques

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

我們的長期目標是移除舊的 JavaScript CPU 分析器，讓每個人都能使用新的工作流程。

這份簡短的遷移指南會說明如何在效能面板中記錄 JS 設定檔，以及如何將效能面板的 UI 對應至您使用的舊版工作流程。

存取舊版 JavaScript CPU 分析器

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

  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：舊工作流程 (左側) 和新工作流程的「由下而上」檢視畫面之間的對應關係。

「Call Tree」分頁則提供「Tree (Top Down)」檢視畫面：

舊工作流程和新工作流程中的樹狀結構檢視畫面對應。

圖 4 舊工作流程 (左側) 和新工作流程的樹狀結構對應圖。