Chrome 135 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

改进了效果面板

此版本对性能面板进行了多项改进。

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

效果 > 摘要标签页现在会显示指向配置文件和函数调用的相关脚本和来源的链接，因此您无需在主要轨道中将鼠标悬停在这些事件上。

在“摘要”标签页中添加来源和起源前后的界面。

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

Chromium 问题：368541957。

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

启用现场数据后，效果 > 数据分析 > LCP 按阶段数据分析现在会在额外的表格中显示 Chrome 用户体验报告中的第 75 个百分位图像显示时间，以便您直接在数据分析中比较显示时间。

在“按阶段计算的 LCP”数据分析中添加实地数据支持之前和之后。

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

性能 > 数据分析标签页向其集合中添加了新的网络依赖项树数据分析。该数据分析可告知您是否链接了关键请求（不建议这样做）。将鼠标悬停在数据分析中列出的请求上，即可在网络轨道中看到这些请求突出显示。

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

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

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

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

现在，元素面板中默认会开启整页无障碍功能树视图。借助此工具，您可以检查辅助技术如何查看您的内容，并查看 DOM 节点的 ARIA 属性和计算的无障碍功能属性。

如需打开无障碍功能树状视图，请点击 Elements 面板中 DOM 树右上角的 Switch to Accessibility Tree view 按钮。

默认情况下，开启整页无障碍功能树视图前后的效果。

如需了解详情，请参阅 Chrome 开发者工具中的完整无障碍功能树。

Chromium 问题：40808541。

改进了各种面板的空白状态

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

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

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

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

将“询问 AI”选项移至下拉菜单底部之前和之后的对比。

欢迎随时在 crbug.com/364805393 的AI 协助面板中提供反馈。

Lighthouse 12.4.0

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

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

如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：40543651。

其他亮点

以下是此版本中的一些值得注意的修复和改进：

  • 性能 > 摘要：将两个 Total time 和 Self time 行替换为一个 Duration 行，其中还会显示括号中的 (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 开发者工具团队联系

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

开发者工具的新变化

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