Chrome 135 版本开发者工具（DevTools）更新内容

一、性能（Performance）面板改进

1. 性能面板中的配置文件和函数调用现已显示来源和脚本链接

Performance > Summary（性能 > 概览）选项卡现在会显示配置分析（profile）和函数调用相关的脚本及来源链接，这样就不需要再将鼠标悬停在 Main 轨道上的事件上来查看这些信息了。

显示在 Summary 面板中添加来源和脚本链接前后的对比。

此外，当将鼠标悬停在 Network（网络）或 Main（主线程）轨道上的事件时，工具提示中现在还会显示第三方名称。

2. 支持按阶段划分的 LCP字段数据

启用字段数据后，Performance > Insights > LCP by phase（按阶段划分的最大内容绘制）洞察项现在会在额外的表格中显示来自 Chrome 用户体验报告的第 75 百分位图像加载时间，可以直接在该洞察中对比各阶段的加载时间。

3. 网络依赖树洞察项

Performance > Insights（性能 > 洞察）标签页新增了一个名为 Network dependency tree（网络依赖树）的洞察项。该洞察可以知道是否存在串联的关键请求，而这通常是不推荐的。可以将鼠标悬停在洞察项中列出的请求上，它们会在 Network（网络）轨道中被高亮显示。

4. 最重调用栈高亮显示

Performance 面板现在支持将鼠标悬停在 Call tree（调用树）或 Bottom-up > Heaviest stack（自底向上 > 最重调用栈）侧边栏中的项时，在 Main 轨道中高亮显示对应内容，并自动淡化其他内容。这样可以更直观地找到调用栈中耗时最多的嵌套项。

二、Elements 面板中的辅助功能树视图

现在，Elements（元素）面板默认启用了全页辅助功能（Accessibility）树视图。

之前只能在 Elements > Accessibility 标签页中浏览一个独立的辅助功能树。现在，可以点击 DOM 树右上角的 “辅助功能树视图切换” 按钮（图标为 accessibility_new），在 DOM 树与全页辅助功能树之间自由切换，方便同时查看两者及其对应关系。

启用默认的辅助功能树视图前后的界面差异也被展示了出来。

辅助功能树允许检查辅助技术（如屏幕阅读器）如何感知页面内容，并显示每个 DOM 节点的 ARIA 属性及其计算后的辅助功能属性。

三、多个面板的空状态优化

针对多个面板、区域和标签页在“空状态”（即无内容显示）下的界面进行了优化，能够更清楚地知道接下来该做什么来开始使用它们。

例如，Network（网络）面板中的空状态现在新增了实用按钮，如“重新加载页面”（Reload page），快速触发网络活动，开始调试。

四、Ask AI 选项移至菜单底部

Ask AI（询问 AI）选项现在已从下拉菜单的顶部移到了菜单的底部，更符合用户的操作习惯和界面布局逻辑。

五、Lighthouse 升级至 12.4.0

Lighthouse 面板现已升级为 Lighthouse 12.4.0 版本。

在此版本中，一些性能审计项在通过条件下会被标记为“信息性（informative）”，而不再隐藏在“已通过的审计”列表中，更全面地了解页面表现。

六、其他

性能 > Summary：将原来的“两行 Total time 与 Self time”合并为“一行 Duration”，若有自耗时则会以括号形式显示（例如 Duration (self: 12ms)），简化展示信息
Issues 面板：新增两种问题类型支持：
- <select> 元素在辅助功能树中的相关问题；
- 网络服务中解析或校验时发生的 SRI 消息签名错误
辅助功能（Accessibility）：使用键盘导航在 Elements > Styles 中逐步查看元素时，当前元素现在会有可视化描边提示
Elements 面板：与 <select> 元素相关的问题现在会被高亮标出，显示为波浪下划线
Network 面板：覆盖提示点（override dot）和 Cookie 警告图标的位置从标签左侧移到了右侧，使界面更整洁

Chrome 135

引用

What's new in DevTools