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

Sofia Emelianova
Sofia Emelianova
GitHub

Google 用户调研。

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

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

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

AI 生成的错误说明。

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

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

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

支持 @position-try CSS 规则之前和之后。

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

Chromium 问题：40279608。

“来源”面板改进

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

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

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

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

添加了用于自动美化打印和括号关闭的新设置之前和之后。

Chromium 问题：40865010、324314570。

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

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

换句话说，当您依次选择来源 > 断点 > 在未捕获的异常上暂停后，调试器不会在类似以下语句上暂停：

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

识别到捕获的拒绝之前和之后。

Chromium 问题：40283993。

控制台中的错误原因

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

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

带有“Caused by”前缀的之前和之后打印堆栈轨迹。

Chromium 问题：40182832。

“网络”面板改进

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

检查早期提示标头

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

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

添加专用“早期提示”部分之前和之后。

如需了解详情，请参阅使用“早期提示”功能缩短服务器思考时间，从而加快网页加载速度。

Chromium 问题：40222701。

隐藏瀑布图列

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

添加隐藏瀑布图列的选项之前和之后。

Chromium 问题：40574989。

改进了“效果”面板

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

捕获 CSS 选择器统计信息

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

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

添加选择器前后的统计信息。

Chromium 问题：324282954。

更改顺序和隐藏轨道

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

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

下一个版本 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 开发者工具团队联系

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

开发者工具的新变化

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