Chrome 135 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

改进了“效果”面板

此版本对性能面板进行了一些改进。

性能中的配置文件和函数调用的来源和脚本链接

现在，“性能”>“摘要”标签页会显示指向相关脚本和来源（用于分析和函数调用）的链接，因此您无需将鼠标悬停在“主”轨道中的这些事件上。

“摘要”标签页在添加来源和出处前后的对比。

此外，现在当您将鼠标悬停在事件上时，网络和主轨道会在提示中显示第三方名称（如果有）。

Chromium 问题：368541957。

“按阶段划分的 LCP”字段数据支持

在实测数据处于开启状态时，“性能”>“数据洞见”>“按阶段划分的 LCP”数据洞见现在会在一个额外的表格中显示 Chrome 用户体验报告中的第 75 百分位图片时间，以便您直接在数据洞见中比较这些时间。

添加字段数据支持前后的“按阶段划分的 LCP”数据洞见。

“网络依赖关系树”数据分析

性能 > 数据分析标签页在其集合中添加了新的网络依赖树数据分析。该意见会告知您是否存在链接关键请求的情况，建议您避免这种情况。将鼠标悬停在信息中心内列出的请求上，即可看到这些请求在网络轨道中突出显示。

如需了解详情，请参阅避免链接关键请求。

“执行用时最长的堆栈”突出显示

现在，当您在调用树或自下而上 > 最重的堆栈边栏中将鼠标悬停在主轨道中的项上时，性能面板会突出显示这些项，并使其余项变暗。这样，您就可以直观地找到调用堆栈中耗时最多的嵌套项。

“元素”中的无障碍功能树状视图

现在，元素面板中默认处于开启状态的是整页模式的无障碍功能树视图。

之前，您可以在元素 > 无障碍功能标签页中浏览单独的无障碍功能树。现在，您可以点击元素面板中 DOM 树右上角的 切换到无障碍功能树状视图按钮，在 DOM 树和全页无障碍功能树之间来回切换，以便更轻松地探索它们及其关系。

启用整页模式的无障碍功能树状视图前后的对比。

借助可访问性树，您可以检查辅助技术如何查看您的内容，并查看 DOM 节点的 ARIA 属性和计算出的可访问性属性。如需了解详情，请参阅 Chrome 开发者工具中的完整无障碍树。

Chromium 问题：40808541。

改进了各种面板的空状态

我们简化了各种面板、部分和标签页的空状态（未打开任何内容时），以便您确切了解如何开始使用它们。现在，某些空状态（例如网络面板中的空状态）具有相关的实用按钮，例如重新加载页面。

改进后的“网络”和“搜索”面板中的空状态。

“向 AI 提问”选项已移至菜单底部

向 AI 提问选项现在位于下拉菜单底部，而不是顶部。

将“向 AI 提问”选项移至下拉菜单底部之前和之后。

欢迎在 crbug.com/364805393 的 AI 辅助面板中留下您的反馈。

Lighthouse 12.4.0

Lighthouse 面板现在运行的是 Lighthouse 12.4.0。

此版本在通过条件下将一些性能审核标记为信息性，而不是将其隐藏在“已通过的审核”部分中。请参阅完整的变更列表。

如需了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：40543651。

其他亮点

此版本包含以下值得注意的修复和改进：

  • 性能 > 摘要：将两行总时间和自用时间替换为一行时长，该行还会显示括号中的 (self time)（如果有）（crbug.com/395572753）。
  • 问题：添加了新的问题类型：可访问性树中的 <select> 问题，以及在网络服务中进行解析或验证期间发生的 SRI 消息签名错误 (crbug.com/381044049、crbug.com/347890366)。
  • 无障碍功能：“元素” >“样式”标签页现在会突出显示您使用键盘导航逐步浏览的元素 (crbug.com/396311936)。
  • 元素：现在支持 <select> 问题，并以波浪下划线突出显示（crbug.com/378738916）。
  • 网络：现在，“覆盖点”和 Cookie 警告图标显示在标签页名称的右侧，而不是左侧 (crbug.com/390556283)。

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试前沿的 Web 平台 API，并帮助您在用户之前发现网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容的列表。