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

Kayce Basques

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

我們的長期目標是移除舊版 JavaScript CPU Profiler，讓所有人都採用新的工作流程。

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

存取舊版 JavaScript CPU 分析器

如果您偏好舊版「記錄 JavaScript CPU 分析」工作流程 (曾在「Profiles」面板中提供)，仍可透過以下方式存取：

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

如何記錄 JS 設定檔

  1. 開啟開發人員工具。

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

    Chrome 開發人員工具「效能」面板

    圖 1. 「成效」面板。

  3. 請使用下列任一方式進行錄製：

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

舊版工作流程與新版的對應方式

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

舊版和新版工作流程中的火焰圖之間對應關係。

圖 2. 舊工作流程 (左) 和新工作流程 (右) 中的火焰圖對應。

您可以在「由下而上」分頁中查看「重」檢視畫面：

舊工作流程和新工作流程中的「自下而上」檢視畫面之間的對應關係。

圖 3. 舊工作流程中的「自下而上」檢視畫面 (左圖) 與新工作流程的「自下而上」檢視畫面 (右圖) 之間的對應關係。

您可以在「通話樹狀圖」分頁中查看「樹狀圖 (由上而下)」檢視畫面：

舊工作流程和新工作流程的樹狀檢視畫面之間的對應關係。

圖 4. 舊工作流程中的樹狀檢視畫面 (左) 與新工作流程 (右) 之間的對應關係。