听起来很眼熟吗？您正在 Chrome DevTools 中调试性能问题，但“Performance”面板中的信息量太大，因此很难仅关注最相关且最具实用价值的部分。从时间轴的长度、火焰图的深度到许多不同数据的广度，浏览起来可能并非易事。虽然“效果”面板功能强大，但其实用性不应以牺牲易用性为代价！
作为我们改进 Chrome 性能工具的计划的一部分，我们最近推出了三项新功能，旨在降低信息密度，并帮助开发者自定义工作流：
在这篇博文中，我们将逐一介绍上述各项功能，并说明如何使用这些功能，只关注最重要的信息。
隐藏时间轴的不相关的部分
网络性能以毫秒为单位，因此即使您的性能录制内容只有几秒钟长，也有很多机会会丢失位置。
在 Chrome 122 中，我们添加了创建面包屑导航功能。通过此功能，您可以限制时间轴的边界，使您只能在自己设置的兴趣区域内进行缩放或平移。例如，当您尝试调试响应性问题时，以这种方式限制时间轴会特别有用，以便您将注意力集中在单次互动或有问题的长任务上。
上图放大显示了时间轴概览，其中可直观呈现脚本执行和呈现工作等主线程活动。将指针悬停在它上面时，系统会显示一个新按钮，用于将时间轴的边界设置为当前窗口。该按钮由时间窗口的宽度（以毫秒为单位）和 图标进行标记。面包屑导航位于时间轴概览上方，每个面包屑导航都按其时间窗口的大小进行标记。
如需使用此功能，请执行以下操作：
- 缩放时间轴并将其平移到感兴趣的区域。
- 点击时间轴概览中的放大镜图标 可固定时间轴并设置面包屑导航。
- 根据需要重复此操作，以放大嵌套的兴趣区域。
- 点击面包屑导航可返回到之前感兴趣的区域或整个时间轴范围。
剪辑时间轴有助于确保您不会意外滚动出边界，从而滚动到不相关的时间轴部分。但如果需要，您还可以点击路径将其缩小。另一个好处是，时间轴概览将与以下轨道保持一致。这样一来，您可以更轻松地发现性能优化机会（例如强制自动重排），并在火焰图中确定其根本原因。
隐藏火焰图中不相关的部分
分析主线程活动并非易事。“性能”面板的这一部分被称为火焰图，因为调用堆栈可能要经过多长时间和旋转。在一些极端情况下，这些堆栈可能会非常灵活，以至于很难理解整体并专注于您想要优化的内容。
从 Chrome 124 开始，您可以自定义要隐藏的火焰图表中的确切条目，以便专注于最具实用价值的信息。
右键点击火焰图中的某个函数时，系统会显示一个上下文菜单，其中包含多个用于隐藏条目的选项：
- 隐藏函数：从火焰图中移除所选函数。其子级将向上移动，使其紧跟在父级函数之后。
- 隐藏子项：在所选函数处修剪火焰图，隐藏其所有子项。
- 隐藏重复的子项：从火焰图的其余部分中移除所选函数的所有实例。
您还可以使用以下一些实用的键盘快捷键来执行所选函数：
- H：隐藏所选函数
- C：隐藏所选函数的子函数
- R：隐藏堆栈中较后位置的所选函数的实例
- U：显示所选函数的隐藏子函数
永久隐藏不相关的脚本
将脚本添加到忽略列表选项会从火焰图中隐藏所选函数，以及在同一脚本文件中定义的所有其他函数。该脚本还会添加到忽略列表中，开发者工具调试程序使用该列表来单步调试函数并忽略源自该脚本的异常。
添加到忽略列表中的脚本会保留，因此它们将继续在新轨迹的火焰图中隐藏。不受您控制的脚本很适合加入忽略列表。另一方面，隐藏各个函数对于当前跟踪记录来说是暂时的，并且更取决于具体情况。例如，您可能需要隐藏一堆繁琐的递归函数调用，以便更轻松地处理轨迹。
如需还原火焰图中的忽略列表或任何其他隐藏函数，您可以使用上下文菜单重置所选函数的子函数，或重置整个轨迹中的所有隐藏函数。具有隐藏子项的函数带有 ▼ 图标注释，点击该图标还会重置子项。
<ph type="x-smartling-placeholder">您可以从火焰图中移除所有不必要的深度和复杂性，这样火焰图将变得更加实用。在需要时，您可以自定义要显示的条目，这项人体工学改进有助于您将注意力集中在手头任务最重要的信息上。
隐藏不相关的曲目
主线程活动仅构成“性能”面板的一个轨道。“性能”面板中的轨迹直观地显示了进程的活动，并且所有轨迹都与共同的时间轴保持一致，以方便调试。除了主轨道之外，还有用于页面使用的其他子帧、线程和工作器的各个轨道，以及网络、帧、动画和互动轨道。更多轨迹会标记较低级别的 Chrome 进程（例如 IO、GPU 和合成器）的活动。其中包含大量信息！不过，对于大多数效果工作流，您一次只会关注几个轨道的相关信息。
从 Chrome 125 开始，我们推出了一种新的配置模式，可让您隐藏不需要的轨道或按自己的喜好对其进行重新排列。例如，如果您要优化缓慢交互，则可以选择隐藏除 Interactions、Main 和 GPU 跟踪之外的所有跟踪指标。
<ph type="x-smartling-placeholder">
要修改轨道，请右键点击任意轨道的名称，然后选择配置轨道...。此操作会打开配置模式，您可以在该模式下显示、隐藏或重新排列各个轨道。点击完成轨道配置按钮，保存您的偏好设置。
<ph type="x-smartling-placeholder">通过配置轨道，您可以控制“性能”面板向工作流呈现关键信息的方式。您可以使用这些设置来隐藏不相关进程的活动，并以最容易访问所需数据的方式移动轨道。
总结
这三项功能为您提供了强大的全新人体工学控制功能，可让您自定义效果衡量工作流。通过使用这些功能并减少干扰数据，您可以更好地查找所需内容并理解数据。
我们非常期待您提供反馈，告诉我们您做得很好的地方，或者知道如何可以改善您的体验。如果您有任何问题或一般反馈，请通过 @ChromeDevTools 与我们联系。如果出现问题或您对新功能有任何建议，请在这个待解决的问题中留言。
我们致力于改进 Chrome 的性能工具，而这只是我们的开端。我们非常高兴地与大家分享我们不断完善的其他方法，让性能面板变得前所未有地更易于使用和更强大。我们将在下一篇博文中介绍下一批功能，敬请关注 Chrome 开发者博客。同时，您也可以查看 Chrome 中的新变化页面，及时了解开发者工具和 Chrome 中的新变化。