3 new features to customize your performance workflows in DevTools  |  Blog  |  Chrome for Developers

背景

在使用 Chrome DevTools 排查性能问题时，庞大的信息量往往让人难以聚焦于最相关的部分。为了改善这一问题，Chrome 最近推出了三种新功能，帮助开发者减少信息密度，优化工作流。

新功能介绍

1. 隐藏时间线中无关的部分

   • 功能：添加了面包屑功能，允许创建时间线的边界，只聚焦于用户设置的兴趣区域。
   • 用法：
     1. 缩放并平移时间线到感兴趣的区域。
     2. 点击时间线概览中的放大镜图标来设定边界。
     3. 重复此步骤，可进一步聚焦到嵌套的兴趣区域。
     4. 点击面包屑返回到之前的兴趣区域或整个时间线范围。

   https://developer.chrome.com/static/blog/devtools-customization/video/timeline.mp4

2. 隐藏 Flame Chart（火焰图）中无关的部分

   • 功能：自定义隐藏 Flame Chart 中的特定条目，便于聚焦于最相关的信息。
   • 用法：
     1. 右键点击火焰图中的某个函数，选择隐藏函数或者其子节点。
     2. 使用快捷键：H隐藏函数，C 隐藏子节点，R 隐藏重复子节点，U 恢复隐藏的子节点。

   https://developer.chrome.com/static/blog/devtools-customization/video/flame-chart.mp4

3. 永久隐藏无关的脚本

   • 功能：将某个脚本文件加入忽略列表，在火焰图和调试过程中不再显示这些脚本中的函数。
   • 用法：
     1. 右键点击火焰图中的某个函数，选择“Add script to ignore list”将整个脚本文件加入忽略列表。
     2. 通过上下文菜单或点击箭头图标来重置隐藏的子节点或整个函数。

   https://developer.chrome.com/static/blog/devtools-customization/video/ignore-list.mp4

4. 隐藏无关的轨道

   • 功能：快速隐藏或重新排列性能面板中的轨道，使其更加符合个人优化流程。
   • 用法：
     1. 右键点击某个轨道名称，选择“Configure tracks…”。
     2. 在配置模式中显示、隐藏或重新排列个别轨道。
     3. 点击“Finish configuring tracks”保存配置。

   https://developer.chrome.com/static/blog/devtools-customization/video/tracks.mp4