Chrome 137 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

2025 年 Google I/O 大会版

Chrome DevTools 将在今年的 Google I/O 大会上大放异彩。届时将有直播课程和录制课程。

如需了解精彩的新功能，请关注以下内容：

此外，别忘了在 2025 年 5 月 20 日下午 4:30（太平洋时间）观看 Rachel Andrew 的网络领域的新动态会议。

观看我们的最新视频，快速了解最新亮点：

使用 Gemini 修改 CSS 并将更改保存到工作区

现在，只需点击几下，您就可以让 Gemini 修改和修复 CSS，并且通过关联的工作区文件夹将所做更改保存回计算机上的源文件。

自动工作区是一项实验性功能。您可以关联现有来源文件夹，也可以尝试演示。

关联工作区文件夹后，在元素面板中，点击向 AI 提问，让 Gemini 修改 CSS，点击继续以实时测试更改，然后展开未保存的更改，点击应用到工作区，查看差异，然后点击全部保存。

连接工作区文件夹并将更改保存回源文件

您现在可以自动（或手动）关联工作区文件夹，以便开发者工具将 JavaScript、HTML 和 CSS 更改保存回存储在您计算机上的源文件。

了解如何使用 JavaScript 实现此功能：

Chromium 问题：404170628。

向 Gemini 询问效果分析

现在，只需点击一个按钮，您就可以开始与 Gemini 对话，以调查并根据以下效果分析采取行动：

  • 按阶段划分的 LCP
  • 发现 LCP 请求
  • 渲染屏蔽请求
  • 布局偏移原因
  • 文档请求延迟时间

在性能面板中的数据分析中添加“向 AI 提问”按钮前后的对比。

欢迎在 crbug.com/371170842 中就此功能提供反馈。

使用 Gemini 注释效果分析结果

现在，您可以让 Gemini 生成有关性能轨迹中事件的注释。

双击主轨道中的某个事件，然后点击输入字段旁边的生成标签。Gemini 可以根据堆栈轨迹和上下文建议标签。

将屏幕截图添加到与 Gemini 的对话中

在 AI 辅助面板中，您现在可以点击 截取屏幕截图按钮来截取网页的屏幕截图，并将其提交给您与 Gemini 的对话。

您可以使用屏幕截图为提示提供更多视觉背景信息，例如，检查所有可见按钮是否具有相同的间距。

在“AI 辅助”面板中添加“拍摄屏幕截图”按钮之前和之后。

“效果”面板中的新数据洞见

此版本为性能面板带来了两项新的数据分析：重复的 JavaScript 和旧版 JavaScript。

重复的 JavaScript

新的效果 > 数据洞见 > 重复的 JavaScript 将在网络轨道中突出显示网页上是否存在对软件包中大型重复 JavaScript 模块的请求。

“性能”面板中的“重复的 JavaScript”数据分析。

您还可以点击数据分析中的查看树状图，探索 JavaScript 依赖项。

旧版 JavaScript

新的性能 > 洞见 > 旧版 JavaScript 将在网络轨道中突出显示网页上旧版 JavaScript 的请求（如果有），例如让旧版浏览器能够使用新的 JavaScript 功能的 polyfill 和 transform。不过，其中的很多函数对现代浏览器而言并不是必需的。

“性能”面板中的“旧版 JavaScript”数据分析。

推测现在支持规则标记

应用 > 推测性加载现在会显示规则集的标记（如果存在标记），而不是网址。

替换规则集网址之前和之后。

Chromium 问题：393408589。

Lighthouse 12.6.0

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

在此版本中，最值得注意的是 Lighthouse 将改用性能洞见审核。在 Lighthouse 报告的性能类别中，您现在可以试用数据分析。

添加在 Lighthouse 报告中切换到“洞见”的选项之前和之后。

另请参阅完整的变更列表。

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

Chromium 问题：40543651。

其他亮点

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

  • 网络：添加了对已知服务器计时格式的解析。
  • 现在，您可以使用 Cmd/Ctrl + 点击操作取消选择表格中的行（Chromium 问题：409474445）。
  • 效果 > 数据洞见 > 使用高效的缓存生命周期现在会忽略 TTL 等于或长于 30 天的资源。

无障碍

此版本带来了以下无障碍功能改进：

  • 性能：轨迹中的启动器箭头现在更加醒目。
  • 元素：您现在可以使用快捷键 A 切换全页无障碍功能树视图（Chromium 问题：40888478）。

  • 现在，屏幕阅读器会读出以下内容（以及其他内容）：

    • 从代码块复制内容时显示“已复制到剪贴板”。
    • 在 AI 辅助功能聊天对话中将更改应用到工作区时显示“正在应用到工作区”。
    • 当您在效果 > 注释中要求 AI 生成标签时，系统会显示“正在生成标签”。
    • 请注意，AI 辅助聊天中提供了建议的提示。
    • 在效果 > 数据洞见中，朗读相关数据洞见的估计节省金额。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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