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

Sofia Emelianova
Sofia Emelianova
GitHub

使用 Gemini 更好地在控制台中了解错误和警告

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

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

AI 生成的错误说明。

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

元素 > 中支持 @position-try 规则风格

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

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

如需了解详情，请参阅 CSS Anchor Locationing API 简介。

Chromium 问题：40279608。

来源面板改进

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

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

现在，您可以在来源中为编辑器启用或停用自动美观输出和括号关闭功能。美观输出可让缩减过的文件易读。当您输入左括号（) 或 }）或标记 (>) 时，括号右括号会自动添加右括号。

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

针对自动美观打印和括号闭合的新设置之前和之后。

Chromium 问题：40865010、324314570。

已处理的遭拒 promise 被视为捕获

现在，如果您使用 .catch() 或两个参数 .then() 处理遭到拒绝的 promise，则 Sources 面板可以将这些 promise 正确识别为已捕获。

换句话说，如果来源 >断点 >check_box 在未捕获异常上暂停处于开启状态，调试程序不会在出现类似如下的语句时暂停：

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

发现遭拒情况之前和之后。

Chromium 问题：40283993。

控制台中的错误原因

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

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

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

Chromium 问题：40182832。

网络面板改进

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

检查 Early Hints 标头

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

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

为 Early Hints 添加专用部分之前和之后。

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

Chromium 问题：40222701。

隐藏“广告瀑布流”列

您现在可以在 Network 面板中隐藏 Waterfall 列，类似于隐藏其他列的方式。右键点击任意列名称，然后清除下拉菜单中的 check_box_outline_blank 瀑布图复选框。

添加用于隐藏“瀑布流”列的选项前后的对比。

Chromium 问题：40574989。

性能面板改进

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

捕获 CSS 选择器统计信息

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

要查看统计信息，请选择一个重新计算样式事件，然后打开新的选择器统计信息标签页。该标签会显示有关每个选择器的耗时、匹配尝试次数和计数，以及慢路径不匹配项所占百分比的信息。

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

Chromium 问题：324282954。

更改顺序和隐藏轨道

性能面板提供了新的配置模式，让您可以更改轨道的顺序并隐藏轨道。

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

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

Chromium 问题：311439339。

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

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

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

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

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

Chromium 问题：327337527。

Lighthouse 11.7.1

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

值得注意的变化之一是对发布商广告插件的支持已弃用，该版本在此版本中已过时。

添加之前和之后移除发布商广告插件支持。

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

Chromium 问题：772558。

其他亮点

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

  • Recorder 面板现已正式退出预览状态 (329271496)。
  • 现在，当自定义格式设置工具为 body() 函数返回 null 时，控制台不会显示错误，这是一种有效的行为 (329400119)。
  • Sources 面板更新了语法突出显示工具，特别指出它现在支持 v 和 d 标志。
  • 网络 >Cookie 标签页修复了将豁免 Cookie 映射到响应 Cookie 的 bug (41491846)。
  • 元素 >样式标签页现在会执行以下操作： <ph type="x-smartling-placeholder">
      </ph>
    • 显示具有自定义属性的完全过载的继承规则 (41489874)。
    • 根据颜色主题在 light-dark() 中突出显示已应用的值 (331123816)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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