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

凱斯巴斯克
Kayce Basques

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

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

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

存取舊版 JavaScript CPU 分析器

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

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

如何記錄 JS 設定檔

  1. 開啟開發人員工具。
  2. 按一下「成效」分頁標籤。

    Chrome 開發人員工具效能面板。
    圖 1. 「效能」面板。

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

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

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

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

在舊版工作流程與新工作流程中的火焰圖對應。
圖 2. 舊工作流程 (左側) 與新工作流程 (右側) 之間的火焰圖對應。

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

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

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

在舊版工作流程與新工作流程中的樹狀檢視之間進行對應。
圖 4. 在舊版工作流程 (左側) 和新工作流程中的樹狀檢視之間對應。

在 Twitter 上連線偵測 (ping) @ChromeDevTools。如果我們遺漏了任何功能,或者您有其他關於本文的疑問,請前往我們的文件存放區開啟 GitHub 問題