发布时间：2025 年 3 月 19 日
我们一直在关注旨在改进 Chrome 性能工具的计划，现在，我们很高兴地宣布，我们对 DevTools 性能面板的互动方式进行了更多升级。这些改进旨在帮助您更好地浏览性能轨迹并减少无关噪声，以便您专注于快速跟踪和解决性能问题。
改进的导航
许多用户向我们反馈，在“效果”面板中滚动和缩放不够直观。虽然许多长期用户已经习惯了这种方式，但许多用户都希望滚动手势能够滚动，而不是放大和缩小轨迹。
下方新增了一个选项，可在现有的“传统”滚动方式和新的“现代”滚动方式之间切换。
在传统模式下，滚动（通过触控板或滚轮）会继续缩放，而按住 Shift 键并滚动则会在火焰图中向上或向下滚动。
在新版“现代”模式下，这些操作的效果相反：滚动现在会滚动火焰图，而按住 Shift 键并滚动则会放大和缩小。
键盘快捷键（例如使用 WASD 键浏览轨迹）将继续保持不变。
双向概览
性能面板顶部附近是CPU 图表，属于时间轴概览的一部分。它会显示轨迹记录期间的 CPU 使用率估算值，按工作类型细分（例如，橙色代表脚本执行，紫色代表渲染操作）。
这会提供轨迹的概览（有时称为迷你地图），即使您深入缩放以调查特定问题，也能提供整个时间轴的概要信息。
不过，如果主要查看轨迹，则很容易在小地图中迷失位置，反之亦然。因此，我们推出了一些新功能，可帮助您将概览与放大后的视图相关联。现在，当您将鼠标悬停在概览上时，火焰图中会显示一条对应的垂直线，标记火焰图中同一时间点：
同样，现在，将鼠标悬停在火焰图中的条目上，CPU 图表的对应部分也会突出显示。这非常有助于准确了解是哪些任务导致了 CPU 激增。
过滤跟踪记录
调试性能问题通常需要仔细过滤大量数据。为了帮助您专注于最相关的信息，我们改进了过滤噪声的能力。
去年，我们推出了将“性能”面板中的脚本添加到 DevTools 忽略列表的功能，以滤除火焰图中不太相关的条目。例如，如果您要调试网页中某个组件的性能，而框架的调用堆栈足够深，需要您上下滚动性能面板，这可能会造成干扰，因此您通常希望收起大部分调用堆栈，以便专注于重要部分。
您可以右键点击火焰图中的条目，然后选择将脚本添加到忽略列表，以将脚本添加到 DevTools 的忽略列表，并在火焰图中收起该脚本中的所有条目。
不过，现在您还可以直接通过效果面板顶部的手动修改忽略列表。忽略列表正则表达式会在各个 DevTools 中共享，因此在“Sources”面板中调试时，系统会跳过匹配的脚本，并在火焰图中将其收起为单个条目，并且该列表会在各个 DevTools 会话中保持不变。
这样，您就可以精细地控制要忽略的文件，并在工作时方便地启用和停用规则。
淡化第三方脚本
第三方脚本在网站上很常见，但通常不受我们控制，或者与特定调试会话无关。“效果”面板顶部的全新 淡化第三方选项会将时间轴中的第三方脚本和网络活动灰显，减少视觉杂乱，让您能够专注于第一方效果贡献。
但有时，您可能需要更大的控制权，例如专注于特定第三方，甚至仅使用您自己的 API 或 CDN 提供的贡献。摘要标签页面板底部会列出开发者工具能够在网页中找到的第一方和第三方。将鼠标悬停在列表中的每个实体上，系统会将不属于该实体的所有活动灰显。
总结
这些新功能应该有助于您更好地浏览“性能”面板，滤除噪声，从而专注于对您重要的轨迹部分。欢迎试用这些功能，并告诉我们如何进一步改进这些功能，或您希望我们做出哪些其他改进。