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

Sofia Emelianova
Sofia Emelianova
GitHub

借助 Gemini，更好地了解 Play 管理中心中的错误和警告

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

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

AI 生成的错误说明。

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

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

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

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

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

Chromium 问题：40279608。

“来源”面板改进

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

配置自动美化输出和括号闭合

现在，您可以在来源中为编辑器开启或关闭自动美化输出和括号闭合功能。美观输出可使压缩文件变得可读。括号闭合功能会在您输入开头括号时自动添加闭合括号 () 或 }) 或标记 (>)。

如需配置相关行为，请依次前往 Settings > Preferences > Sources，然后选中或取消选中新的 Auto closing brackets 和 Automatically pretty print minified sources 选项。

添加自动美化输出和括号闭合新设置之前和之后。

Chromium 问题：40865010、324314570。

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

如果您使用 .catch() 或带两个参数的 .then() 处理已被拒绝的 promise，Sources 面板现在会正确识别已被拒绝的 promise 为已捕获。

换句话说，如果您已开启 Sources > Breakpoints > Pause on uncaught exceptions，调试程序便不会在类似以下代码的语句上暂停：

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

识别到被拒绝的广告之前和之后。

Chromium 问题：40283993。

控制台中的错误原因

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

为了更轻松地进行调试，您可以在捕获和重新抛出错误时指定错误原因。当 Console 沿原因链向上遍历时，它会输出带有 Caused by: 前缀的每个错误堆栈，以便您仍能看到原始错误。

在使用“Caused by”前缀输出堆栈轨迹之前和之后。

Chromium 问题：40182832。

改进了“网络”面板

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

检查早期提示标头

网络面板中，请求的标头标签页中会有一个专门的部分用于显示提前提示标头。以前，您可以在响应标头部分找到相关标头。

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

在为早期提示添加专门部分之前和之后。

如需了解详情，请参阅结合使用服务器思考时间和提前提示，加快网页加载速度。

Chromium 问题：40222701。

隐藏“广告瀑布流”列

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

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

Chromium 问题：40574989。

改进了性能面板

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

捕获 CSS 选择器统计信息

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

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

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

Chromium 问题：324282954。

更改顺序和隐藏轨道

效果面板新增了配置模式，可让您更改轨道的顺序并隐藏轨道。

如需进入配置模式，请点击轨道名称左侧的 Edit 按钮。然后，点击 上箭头或 下箭头以移动轨道，或点击 隐藏。完成后，点击曲目名称右侧的 检查按钮。

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

Chromium 问题：311439339。

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

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

如需忽略某个保留器，请选择一个对象，然后在 Retainer（保留器）部分中，右键点击保留器，然后从下拉菜单中选择 Ignore this retainer（忽略此保留器）。距离列中的值为 ignored 表示被忽略的预订。如需停止忽略，请点击顶部操作栏中的恢复已忽略的保留器。

添加了忽略预授权的选项之前和之后。

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

Chromium 问题：327337527。

Lighthouse 11.7.1

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

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

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

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

Chromium 问题：772558。

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。