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