Chrome 開發人員工具 - Chrome 58 版 JavaScript CPU 剖析

Kayce Basques

在 Chrome 58 (目前為 Canary 版) 中，「Timeline」面板已重新命名為「Performance」面板，「Profiles」面板已重新命名為「Memory」面板，而「Profile JavaScript CPU Profile」功能則移到更隱藏的位置。

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

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

存取舊版 JavaScript CPU 分析器

如果您偏好在「Profile」(設定檔) 面板上提供的舊「Record JavaScript CPU Profile」(記錄 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. 舊工作流程 (左側) 和新工作流程的「由下而上」檢視畫面之間的對應關係。

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

舊工作流程和新工作流程中的樹狀結構檢視畫面對應。
圖 4. 舊工作流程 (左側) 和新工作流程 (右側) 的樹狀結構檢視畫面對應。

如果遺漏任何功能，或是你對本文有任何其他疑問，請在 Twitter 上對 @ChromeDevTools 進行連線偵測 (ping)，或在文件存放區中開啟 GitHub 問題。