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。舊工作流程中的樹狀檢視畫面 (左) 與新工作流程 (右) 之間的對應關係。

如果我們遺漏了任何功能，或您對本文有任何其他問題，請在 Twitter 上向 @ChromeDevTools提問，或是在我們的文件存放區提出 GitHub 問題。