Chrome 125中的新特性 - DevTools

原文信息: 查看原文查看原文

What's new in DevTools, Chrome 125

- Sofia Emelianova

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

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

在支持@position-try CSS规则前后的对比。

要了解更多信息,请查看使用CSS锚点定位将元素绑定在一起

Chromium问题:40279608

源代码面板改进

这个版本为源代码面板带来了几项改进。

配置自动美化和括号闭合

你现在可以为源代码中的编辑器开启或关闭自动美化和括号闭合功能。美化可以使压缩文件可读。括号闭合在你输入一个开启括号时自动添加一个闭合括号()})或标签(>)。

要配置相关行为,请在设置设置 > 首选项 > 源代码中勾选或取消勾选新的复选框自动闭合括号和复选框自动美化压缩源代码

在添加自动美化和括号闭合新设置前后的对比。

Chromium问题:40865010324314570

正确识别已处理的拒绝承诺

如果使用.catch()或双参数.then()处理了拒绝的承诺,源代码面板现在可以正确地将其识别为已捕获。

换句话说,当源代码 > 断点 > 复选框暂停在未捕获的异常上被开启时,调试器不会在类似于以下语句上暂停:

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

在识别捕获的拒绝前后的对比。

Chromium问题:40283993

控制台中的错误原因

如果存在,控制台现在在堆栈跟踪中显示错误原因链。

为了使调试更容易,你可以在捕获并重新抛出错误时指定错误原因。随着控制台沿着原因链向上移动,它打印出每个错误堆栈,并在前面加上由...引起:前缀,这样你仍然可以看到原始错误。

在打印带有<code>由...引起</code>前缀的堆栈跟踪前后的对比。

Chromium问题:40182832

网络面板改进

这个版本为网络面板带来了几项改进。

检查早期提示头

早期提示头在请求的网络面板的标签页中获得了一个专门部分。以前,你可以在响应头部分找到相关头。

早期提示是一个HTTP状态码(103 Early Hints),用于在最终响应之前发送一个初步的HTTP响应。这允许服务器在忙于生成主资源时,向浏览器发送关于页面可能使用的临界子资源(例如,样式表或关键JavaScript)或来源的提示。

在添加早期提示专门部分前后的对比。

有关更多信息,请参见使用服务器思考时间与早期提示加快页面加载速度

Chromium问题:40222701

隐藏瀑布流列

你现在可以像隐藏其他列一样隐藏网络面板中的瀑布流列。右键单击任何列名称,并在下拉菜单中清除复选框瀑布流

在添加隐藏瀑布流列选项前后的对比。

Chromium问题:40574989

性能面板改进

这个版本为性能面板带来了几项改进。

捕获CSS选择器统计信息

性能面板获得了一个新的设置,允许你为长时间运行的重新计算样式事件捕获CSS选择器统计信息。

要查看统计信息,请选择一个重新计算样式事件并打开新的选择器统计标签页。该标签页向你显示每个选择器的经过时间、匹配尝试和计数以及慢速路径不匹配的百分比的信息。

在添加选择器统计前后的对比。

注意:启用CSS选择器统计可能会减慢报告生成速度。

Chromium问题:324282954

更改顺序和隐藏轨道

性能面板获得了一个新的配置模式,允许你更改轨道的顺序并隐藏它们。

要进入配置模式,请单击轨道名称左侧的编辑编辑按钮。然后单击向上箭头或向下箭头来移动轨道或单击不可见隐藏。完成后,单击轨道名称右侧的完成勾选按钮。

下一个版本,Chrome 126,将为这个UI带来更多改进。

Chromium问题:311439339

内存面板中忽略保留者

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

要忽略一个保留者,选择一个对象,并在保留者部分,右键单击一个保留者并从下拉菜单中选择忽略这个保留者。被忽略的保留者在距离列中标记为ignored值。要停止忽略,请点击顶部操作栏中的恢复被忽略的保留者

在添加忽略保留者选项前后的对比。

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

Chromium问题:327337527

Lighthouse 11.7.1

Lighthouse面板现在运行Lighthouse 11.7.1。查看完整的更改列表

在值得注意的更改中,发布商广告插件的支持已被弃用,该插件在本版本中已过时。

在添加删除发布商广告插件支持前后的对比。

要学习在DevTools中使用Lighthouse面板的基础知识,请参见Lighthouse:优化网站速度

Chromium问题:772558

其他亮点

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

  • 录制器面板现在已正式退出预览状态(329271496)。
  • 当自定义格式化程序返回null作为body()函数的结果时,控制台现在不会显示错误,这是有效的行为(329400119)。
  • 源代码面板更新了语法高亮器,特别是现在支持正则表达式中的vd标志。
  • 网络 > Cookies标签页修复了将豁免的Cookies映射到响应Cookies的漏洞(41491846)。
  • 元素 > 样式标签页现在执行以下操作:
    • 显示完全重载的继承规则与自定义属性(41489874)。
    • 根据颜色主题突出显示light-dark()中应用的值(331123816)。

下载预览通道

考虑使用Chrome CanaryDevBeta 作为您的默认开发浏览器。这些预览通道让您可以访问最新的DevTools功能,测试尖端的Web平台API,并在您的用户之前发现您网站上的问题!

与Chrome DevTools团队联系

使用以下选项来讨论帖子中的新特性和更改,或与DevTools相关的任何其他事项。

  • 通过 crbug.com 向我们提交建议或反馈。
  • 使用DevTools中的更多选项 更多 > 帮助 > 报告DevTools问题来报告DevTools问题。
  • 在Twitter上向@ChromeDevTools发推文。
  • 在我们的DevTools YouTube视频 或DevTools Tips YouTube视频上留下评论。
分享于 2024-05-10

访问量 121

预览图片