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

Sofia Emelianova
Sofia Emelianova
GitHub

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

此版本的 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。

“来源”面板改进

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

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

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

如需配置相关行为，请依次前往 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。

网络面板改进

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

检查早期提示标头

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

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

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

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

Chromium 问题：40222701。

隐藏“广告瀑布流”列

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

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

Chromium 问题：40574989。

性能面板改进

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

捕获 CSS 选择器统计信息

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

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

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

Chromium 问题：324282954。

更改顺序和隐藏轨道

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

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

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

Chromium 问题：311439339。

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

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

如需忽略某个保留器，请选择一个对象，然后在 Retainer（保留器）部分中，右键点击保留器，然后从下拉菜单中选择 Ignore this 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)。
  • Elements > Styles 标签页现在会执行以下操作：
    • 显示具有自定义属性的完全重载的继承规则 (41489874)。
    • 根据颜色主题在 light-dark() 中突出显示已应用的值 (331123816)。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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