此页面由 Cloud Translation API 翻译。

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

Sofia Emelianova

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

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

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

AI 生成的错误说明。

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

元素 > 样式支持 `@position-try` 规则

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

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

如需了解详情，请参阅使用 CSS 锚点定位将元素彼此共享。

Chromium 问题：40279608。

“来源”面板的改进

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

配置自动美观输出和括号关闭功能

您现在可以在来源中为 Editor 启用或停用自动美观输出和括号关闭功能。美工打印功能可让缩减版文件清晰可辨。当您输入左中括号时，右括号会自动添加右括号（) 或 }）或标记 (>)。

要配置相关行为，请在check_box 设置 > 偏好设置 > 来源中勾选或清除新的check_box 自动右括号和check_box 自动美观输出缩减来源选项。

Chromium 问题：40865010、324314570。

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

如果您使用 .catch() 或双参数 .then() 处理了被拒绝的 promise，则 Sources 面板现在可以正确将其识别为已捕获。

也就是说，当来源 > 断点 > check_box 在未捕获异常时暂停 (Pause on uncaught exceptions) 时，调试程序不会在类似如下的语句上暂停：

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

识别发现遭拒的前后对比分析。

Chromium 问题：40283993。

控制台中的错误原因

控制台现在会显示堆栈轨迹中的错误原因链（如果有）。

为了简化调试流程，您可以在捕获和重新抛出错误时指定错误原因。随着 Console 逐步深入原因链，它会输出带有 Caused by: 前缀的每个错误堆栈，因此您仍然可以看到原始错误。

输出包含“Caused by”前缀的堆栈轨迹之前和之后。

Chromium 问题：40182832。

网络面板改进

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

检查 Early Hints 标头

Early Hints 标头在网络面板上请求的标头标签页中有一个专门的部分。以前，您可以在响应标头部分找到相关标头。

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

为“Early Hints”添加专门的版块前后的对比。

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

Chromium 问题：40222701。

隐藏“瀑布流”列

现在，您可以在网络面板中隐藏广告瀑布流列，方法与隐藏其他列类似。右键点击任意列名称，然后取消选中下拉菜单中的 check_box_outline_blank Waterfall 复选框。

添加用于隐藏瀑布流列的选项之前和之后。

Chromium 问题：40574989。

性能面板改进

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

捕获 CSS 选择器统计信息

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

如要查看统计信息，请选择 Recalculate Style 事件，然后打开新的选择器统计信息标签页。该标签页显示以下相关信息：已用时间、匹配尝试次数和计数，以及每个选择器的慢路径非匹配百分比。

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

Chromium 问题：324282954。

更改顺序并隐藏轨道

Performance 面板新增了一个配置模式，您可以通过该模式更改轨道的顺序并隐藏轨道。

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

下一版本 Chrome 126 将对此界面进行更多改进。

Chromium 问题：311439339。

忽略“Memory”面板中的保留器

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

要忽略保留器，请选择一个对象，在保留器部分中，右键点击保留器，然后从下拉菜单中选择忽略此保留器。忽略的保留器在 Distance 列中用 ignored 值进行标记。要停止忽略，请点击顶部操作栏中的恢复忽略的保留器。

添加用于忽略保留器的选项之前和之后。

此外，堆快照现在支持更大数量（数亿）的包容边缘和节点 (332350576)。

Chromium 问题：327337527。

Lighthouse 11.7.1

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

其中包括对发布商广告插件的支持（在此版本中已过时），

移除发布商广告插件支持前后的对比。

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

Chromium 问题：772558。

其他亮点

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

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

下载预览渠道

您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。