在 Chrome 58(目前为 Canary 版)中,“时间轴”面板已重命名为“性能”面板,“配置文件”面板已重命名为“内存”面板,“配置文件”面板上的“记录 JavaScript CPU 配置文件”功能已移至更隐藏的位置。
长期目标是移除旧版 JavaScript CPU 性能分析器,让每个人都能使用新工作流。
这个简短的迁移指南介绍了如何在“Performance”面板中记录 JS 配置文件,以及“Performance”面板的界面如何映射到您熟悉的旧工作流。
访问旧版 JavaScript CPU 性能分析器
如果您更喜欢以前可以在“Profiles”面板上使用的旧版“Record JavaScript CPU Profile”工作流,您仍然可以这样访问该工作流:
- 打开开发者工具主菜单。
- 选择更多工具 > JavaScript Profiler。旧性能分析器会在名为 JavaScript Profiler 的新面板中打开。
如何记录 JS 配置文件
- 打开开发者工具。
点击 Performance(性能)标签页。
图 1. “Performance”面板。 请通过以下某种方式录制:
- 如需分析网页加载情况,请点击 Record Page Load(记录网页加载)。 开发者工具会自动开始录制,然后在检测到页面加载完毕时自动停止。
- 如需分析正在运行的网页,请点击记录,执行要分析的操作,然后在完成后点击停止。
旧工作流程与新工作流程之间的对应关系
在旧工作流的图表视图中,下面的屏幕截图显示了新工作流中 CPU 使用情况概览图表(顶部箭头)和火焰图(向下箭头)的位置。
![旧工作流和新工作流中的火焰图之间的映射。](https://developer.chrome.google.cn/static/blog/devtools-javascript-cpu-profile-migration-2/image/mapping-between-flame-cha-393e1b410bba.png?authuser=8&hl=sl)
Heavy (Bottom Up) 视图在 Bottom-Up 标签页中提供:
![旧工作流程与新工作流程的“自下而上”视图之间的映射。](https://developer.chrome.google.cn/static/blog/devtools-javascript-cpu-profile-migration-2/image/mapping-between-bottom-v-2490faffe3b88.png?authuser=8&hl=sl)
此外,Call Tree 标签页中也提供 Tree (Top Down) 视图:
![旧工作流和新工作流中的树状视图之间的映射。](https://developer.chrome.google.cn/static/blog/devtools-javascript-cpu-profile-migration-2/image/mapping-between-tree-view-57327d7cc73b5.png?authuser=8&hl=sl)
如果我们遗漏了任何功能,或者如果您对本文有任何其他疑问,请 Ping Twitter 上的 @ChromeDevTools 或在我们的文档代码库中提交 GitHub 问题。