Chrome 137 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

2025 年 Google I/O 大会版

Chrome DevTools 将在今年的 Google I/O 大会上大放异彩。我们将混合安排直播和录制讲座。

如需了解令人兴奋的新功能，请关注以下内容：

此外，请务必收看 Rachel Andrew 的 “网络领域的新动态”会议，时间为 2025 年 5 月 20 日下午 4:30（太平洋时间）。

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

使用 Gemini 修改并保存工作区中的 CSS 更改

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

自动工作区是一项实验性功能。您可以连接现有源代码文件夹，也可以试用演示版。

关联工作区文件夹后，在 Elements 面板中，点击 Ask AI，让 Gemini 修改 CSS，点击 Continue 以实时测试更改，然后展开 Unsaved changes（未保存的更改），点击 Apply to workspace（应用到工作区），查看差异，然后点击 Save all（全部保存）。

关联工作区文件夹并将更改保存回源文件

现在，您可以自动（或手动）关联工作区文件夹，让开发者工具将 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 报告中添加切换到数据分析的选项之前和之后。

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

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

Chromium 问题：40543651。

其他亮点

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

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

无障碍

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

  • 性能：轨迹中的发起者箭头现在更易于查看。
  • 元素：现在，您可以使用快捷键 A 切换全屏无障碍功能树视图（Chromium 问题：40888478）。

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

    • 从代码块中复制时，系统会显示“已复制到剪贴板”。
    • 在 AI 辅助聊天中将更改应用到工作区时，系统会显示“正在应用到工作区”。
    • 当您在效果 > 注释中要求 AI 生成标签时，系统会显示“正在生成标签”。
    • 请注意，AI 辅助聊天中会显示建议的提示。
    • 依次前往效果 > 数据洞见，查看相关数据洞见的预计节省金额。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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