Chrome 开发者工具 - Chrome 58 中的 JavaScript CPU 性能分析

凯斯·巴斯克 (Kayce Basques)
Kayce Basques
Twitter GitHub Glitch

在 Chrome 58（目前为 Canary 版）中，“Timeline”面板已重命名为“Performance”面板，“Profiles”面板已重命名为“Memory”面板，“Profiles”面板上的“Record JavaScript CPU Profile”功能已移至更隐藏的位置。

长期目标是移除旧的 JavaScript CPU 性能分析器，让所有人开始使用新的工作流。

这本小小的迁移指南将向您介绍如何在“性能”面板中记录 JS 配置文件，以及“性能”面板的界面如何映射到您惯用的旧工作流。

访问旧版 JavaScript CPU 性能分析器

如果您更喜欢以前在“分析”面板上提供的旧版“记录 JavaScript CPU 配置文件”工作流，仍可以按如下方式访问：

  1. 打开开发者工具主菜单。
  2. 依次选择更多工具 > JavaScript 性能分析器。旧版性能分析器会在名为 JavaScript 性能分析器的新面板中打开。

如何记录 JS 配置文件

  1. 打开开发者工具。

  2. 点击效果标签页。

    Chrome 开发者工具性能面板。
    图 1. “性能”面板。

  3. 通过以下某种方式进行录制：

    • 如需分析网页加载情况，请点击 Record Page Load（记录网页加载）。 开发者工具会自动开始记录，然后在检测到页面已加载完毕时自动停止记录。
    • 如需分析正在运行的页面，请点击 Record，执行要分析的操作，然后在完成分析后点击停止。

旧工作流程与新工作流程的对应关系

以下屏幕截图在旧工作流的 Chart 视图中显示了 CPU 使用率概览图表（顶部箭头）和火焰图（底部箭头）在新工作流中的位置。

旧工作流和新工作流中的火焰图之间的映射。
图 2. 旧工作流（左侧）和新工作流（右侧）中的火焰图之间的映射。

Bottom-Up 标签页提供 Heavy (Bottom Up) 视图：

旧工作流程和新工作流程中的“自下而上”视图之间的对应关系。
图 3. 旧工作流中的“Bottom-Up”视图（左）和新工作流（右）中的映射。

Call Tree 标签页中提供了 Tree (Top Down) 视图：

旧工作流和新工作流中的树状视图之间的映射。
图 4. 旧工作流（左侧）和新工作流（右侧）中的树状视图。

如果我们遗漏了任何功能，或者您对本文有任何其他疑问，请在 Twitter 上 Ping @ChromeDevTools，或者在我们的文档代码库中打开 GitHub 问题。