当前位置：首页 > news >正文

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

news 来源：原创 2025/8/22 9:01:27

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

Performance panel improvements
Origin and script links for profile and function calls in Performance
LCP by phase field data support
Network dependency tree insight
Duration instead of total and self time in Summary
Heaviest stack highlighting
Improved empty states for various panels
Accessibility tree view in Elements
Lighthouse 12.4.0
Miscellaneous highlights

引用

What’s new in DevTools