开发者工具的新变化，Chrome 125

Sofia Emelianova

借助 Gemini 更好地了解控制台中的错误和警告

此 Chrome 版本将生成式 AI 功能引入了开发者工具的控制台，旨在帮助您更好地了解遇到的错误和警告。

如需获取 AI 生成的错误或警告说明，请点击控制台中相应消息旁边的 了解此错误（警告）按钮，然后按照说明操作。

如需了解详情，请参阅借助 AI 更好地了解错误和警告。

“元素”>“样式”中的 @position-try 规则支持

为了帮助您调试 CSS 锚点定位，“元素”>“样式”标签页现在支持 @position-try CSS 规则。该标签页会解析 position-try-options 值，并将每个选项关联到专用的 @position-try --name 部分。

如需了解详情，请参阅推出 CSS 锚定位 API。

Chromium 问题：40279608。

“来源”面板改进

此版本对来源面板进行了多项改进。

配置自动美化打印和括号闭合

您现在可以在来源中的编辑器中开启或关闭自动美化打印和括号关闭功能。美观输出可让压缩文件变得可读。括号自动闭合功能可在您输入左括号时自动添加右括号（) 或 }）或标记 (>)。

如需配置相关行为，请在设置 设置 > 偏好设置 > 来源中选中或清除新的复选框 自动关闭括号和复选框 自动美化精简的来源选项。

Chromium 问题：40865010、324314570。

已处理的被拒绝 promise 会被识别为已捕获

现在，如果您使用 .catch() 或双实参 .then() 处理被拒绝的 promise，“来源”面板会正确识别这些 promise 为已捕获。

换句话说，当您依次选择 Sources > Breakpoints > check_box Pause on uncaught exceptions（在未捕获的异常处暂停）时，调试器不会在类似以下语句处暂停：

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Chromium 问题：40283993。

控制台中的错误原因

控制台现在会在堆栈轨迹中显示一系列错误原因（如有）。

为了方便调试，您可以在捕获并重新抛出错误时指定错误原因。当控制台沿原因链向上追溯时，它会打印每个带有 Caused by: 前缀的错误堆栈，以便您仍能看到原始错误。

Chromium 问题：40182832。

“网络”面板的改进

此版本对网络面板进行了多项改进。

检查早期提示标头

在“网络”面板的“标头”标签页中，早期提示标头会显示在专用部分。以前，您可以在响应标头部分找到相关标头。

抢先提示是一种 HTTP 状态代码 (103 Early Hints)，用于在最终响应之前发送初步 HTTP 响应。这样一来，当服务器忙于生成主要资源时，可以向浏览器发送有关关键子资源（例如样式表或关键 JavaScript）或网页可能会使用的来源的提示。

如需了解详情，请参阅使用 Early Hints 通过服务器思考时间加快网页加载速度。

Chromium 问题：40222701。

隐藏瀑布图列

现在，您可以像隐藏其他列一样，在广告资源网面板中隐藏瀑布流列。右键点击任意列名称，然后清除下拉菜单中的 check_box_outline_blank Waterfall 复选框。

Chromium 问题：40574989。

改进了“效果”面板

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

捕获 CSS 选择器统计信息

性能面板新增了一项设置，可让您捕获长时间运行的 Recalculate Style 事件的 CSS 选择器统计信息。

如需查看统计信息，请选择一个 Recalculate Style 事件，然后打开新的 Selector Stats 标签页。此标签页会显示每个选择器的已用时间、匹配尝试次数和匹配次数，以及慢速路径不匹配百分比。

Chromium 问题：324282954。

更改顺序和隐藏轨道

效果面板新增了一种配置模式，可用于更改轨道顺序和隐藏轨道。

如需进入配置模式，请点击轨道名称左侧的修改 修改按钮。然后，点击arrow_upward向上箭头或 arrow_downward向下箭头可移动轨道，点击 visibility_off 可隐藏轨道。完成后，点击轨道名称右侧的完成 勾号按钮。

下一个版本 Chrome 126 将进一步改进此界面。

Chromium 问题：311439339。

忽略“内存”面板中的保留器

您现在可以在使用内存面板捕获的堆快照中忽略保留器。

如需忽略保留器，请选择一个对象，然后在保留器部分中，右键点击一个保留器，然后从下拉菜单中选择忽略此保留器。被忽略的留存者的距离列中会标记为 ignored 值。如需停止忽略，请点击顶部操作栏中的恢复忽略的留存者。

此外，堆快照现在支持更多（数亿个）包含边和节点 (332350576)。

Chromium 问题：327337527。

Lighthouse 11.7.1

Lighthouse 面板现在运行的是 Lighthouse 11.7.1。请参阅完整的变更列表。

其中一项显著变化是，此版本已弃用对 Publisher Ads 插件的支持，该插件已过时。

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

Chromium 问题：772558。

其他亮点

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

• 记录器面板现已正式退出预览状态 (329271496)。
• 现在，当自定义格式化程序为 body() 函数返回 null 时，控制台不会显示错误，这是有效行为 (329400119)。
• 来源面板更新了语法突出显示器，特别是现在支持正则表达式中的 v 和 d 标志。
• 网络 > Cookie 标签页修复了将豁免的 Cookie 映射到响应 Cookie 的 bug (41491846)。
• 元素 > 样式标签页现在可执行以下操作：
  • 显示具有自定义属性的完全重载的继承规则 (41489874)。
  • 根据颜色主题 (331123816) 突出显示 light-dark() 中应用的值。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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