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

Sofia Emelianova
Sofia Emelianova

使用 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 问题:40865010324314570

已处理的遭拒 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 面板捕获的堆快照中忽略保留器。

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

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

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

Chromium 问题:327337527

Lighthouse 11.7.1

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

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

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

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

Chromium 问题:772558

其他亮点

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

  • Recorder 面板现已正式退出预览状态 (329271496)。
  • 现在,当自定义格式设置工具为 body() 函数返回 null 时,控制台不会显示错误,这是一种有效的行为 (329400119)。
  • Sources 面板更新了语法突出显示工具,特别指出它现在支持 vd 标志。
  • 网络 >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 视频发表评论。

开发者工具的新变化

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