查看原文
其他

Chrome 120 DevTools 新功能速览

小懒 FED实验室 2024-02-12
关注下方公众号,获取更多系列文章

Chrome 120 版本已正式发布🎉,带来众多特性更新,大家可以更新使用。同时,DevTools 也带来众多特性更新🌟,主要包括:

  • 第三方 Cookie 逐步被淘汰
  • 调试时会跳过 node_modules
  • 远程调试期间新增了输入模式切换开关
  • Elements 面板新增显示 #document 节点的 documentURL
  • 改进了动画调试
  • Preloading 已更名为 Speculative loads
  • Lighthouse 11.2.0
  • 无障碍功能改进

1.第三方 Cookie 逐步被淘汰

Chrome 浏览器计划从 2024 年第一季度开始禁用 1% 用户的第三方 Cookie,以方便测试,然后在 2024 年第三季度逐步覆盖到 100% 用户。Chrome 推出了一系列API,为诸如身份验证、广告和欺诈检测等用例提供了以隐私为重点的替代方案。详见,前端快讯|重要提醒!第三方 Cookie 即将被禁用

默认情况下,系统已为所有 Chrome 用户启用复选框。包括第三方 Cookie 问题复选框。因此,现在问题标签页会针对即将弃用和逐步淘汰第三方 Cookie 的 Cookie 向您发出警告。您可以随时取消选中该复选框,让系统不再显示这些问题。

2.调试时会跳过 node_modules

Chrome 120 版本可在 settings > ignore list 忽略列表中启用默认正则表达式作为自定义排除规则。为了帮助您专注于代码,Debugger 现在会默认跳过 /node_modules//bower_components/ 中的脚本。当然您可以随时在设置中停用此规则。

3.远程调试期间新增了输入模式切换开关

现在,在远程调试 Chrome 标签页时,您可以在触摸和鼠标输入之间切换。例如,当您使用 --remote-debugging-port=<port> 运行 Chrome 实例,并通过 chrome://inspect/#devices 连接到此网络目标时。

4.Elements 面板新增显示 #document 节点的 documentURL

为了让开发者更轻松地调试 iframe,Elements 面板现在会在 #document 节点旁边显示 documentURL

5.改进了动画调试

现在,在 Animations 标签页中,您可以:

  • 点击时间轴标题上的任意位置,即可设置进度条指针。如果动画已在播放,则继续播放,否则停止。以前,您必须拖动它。
  • 调整名称列的大小即可查看完整的动画名称。

6.Preloading 已更名为 Speculative loads

为避免过度使用之前的术语并更好地反映该行为,Chrome 120 版本已将 Application > Preloading 重命名为 Speculative loads。推测性加载允许近乎即时的网页加载,而推测规则可让您定义您的网站,以便预呈现和预提取最常被导航到的网页。

7.Lighthouse 11.2.0

Lighthouse 面板现在已升级至 Lighthouse 11.2.0 版本。

此次更新包括对性能类别的一次更新。现在,系统会根据效果数据分析对效果指标的预计影响为它们打分并排定优先级。此外,性能得分衡量标准包含有关每项指标如何影响得分的详细信息。

8.无障碍功能改进

该版本在无障碍功能方面进行了以下改进:

  • 屏幕阅读器会读出 Sources > Breakpoints 下复选框的状态(选中或取消选中)。
  • 您可以使用键盘访问隐藏此类问题下拉菜单。

此外还有一些其他亮点更新:https://developer.chrome.com/blog/new-in-devtools-120

大家都在看

继续滑动看下一个

Chrome 120 DevTools 新功能速览

小懒 FED实验室
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存