DevTools 新功能（Chrome 100）

Published on 2022年3月8日星期二 • Updated on 2022年3月8日星期二

现为谷歌 Chrome DevTools 的开发技术推广工程师。

感谢韩昌浩 @hanselfmu 提供的翻译。

有兴趣帮忙改进 DevTools 吗？请注册并参与 Google 用户体验调研。

Chrome 100

这是第 100 个 Chrome 版本！ Chrome DevTools 将继续为开发者在 Web 开发上提供可靠的工具。 What's New 选项卡中内含彩蛋，您可以在该选项卡里随意单击以庆祝这个里程碑。

和往常一样，您可以点击图片来观看最新的DevTools 新功能视频。

您现在可以在样式边栏中查看并修改 CSS @supports at-rule 了。这些改动可以让实时实验 @supports at-rules 更容易。

打开此演示页面，检查 <div class="box"> 元素，即可在样式边栏中查看 @supports at-rule。点击该 at-rule 的声明来编辑它。

Chromium 议题: 1222574, 1222573

当在录制过程中试图确定一个唯一的选择器时，Recorder 面板会自动优选选择有以下属性的元素：

上列属性是在自动化测试中常用的选择器。

举个例子，在这个演示页面开始一段新的录制。填写一个电子邮箱地址并观察它的选择器值。

因为该电子邮箱元素定义了 data-testid 属性，该属性被自动用为选择器，而不是它的 id 或 class 属性。默认支持常用选择器

如果您没有使用常用的选择器，您可以自定义一段录制内容的选择器。

举个例子，这个演示页面使用了 data-automate 属性作为选择器。开始一段新的录制并把 data-automate 作为选择器属性输入。填写电子邮箱地址并观察选择器值（[data-automate=email-address]）。

您现在可以在 Recorder 面板中用录制内容的标题旁的编辑按钮（铅笔图标）来重命名一段录制内容。

在来源面板中，您现在可以在调试过程中将鼠标悬停在某类或函数上来预览它的属性。之前，悬停只会展示函数名以及一个指向其在源代码中的位置的链接。

Chromium 议题: 1049947

性能记录现在在帧时间轴中展示了一个新的帧类别：部分呈现帧（Partially presented frames）。

在此之前，帧时间轴会将任何含有延迟主线程的任务的帧作为“丢弃的帧”来展示。然而，在某些情况下，这些帧仍然可以在合成器线程的驱动下产生视觉更新（比如滚动）。

这种情况给用户带来了困扰，因为这些“丢弃的帧”仍然包含了视觉更新。

新的“部分呈现帧”旨在更直观地表示出，尽管某些内容没有在某一帧中被及时呈现，但是这个问题没有严重到完全阻碍了视觉更新。

Chromium 议题: 1261130

本次发布还包含了一些值得注意的修复：

为模拟的设备更新了 iPhone 的用户代理字符串。所有 iPhone 5 之后的版本都会带有 iPhone OS 13_2_3 的用户代理字符串。(1289553)

您现在可以将代码段直接存为一个 JavaScript 文件。在此之前，您需要手动添加 .js 文件名后缀。(1137218)

来源面板现在在调试带有来源映射（source map）的代码时，可以正确展示作用域变量名了。在此之前，来源面板即使在有来源映射的情况下，还是会展示压缩之后的作用域变量名。(1294682)

来源面板现在可以在页面重加载后正确恢复滚动位置。在此之前，滚动位置没有正确恢复，造成了调试的不便。

您可以考虑把 Chrome Canary 版, 开发者版（Dev）或测试版（Beta）设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ，让您抢先在用户之前发现您网站上的问题！

您可以透过一下渠道讨论这篇文章的新功能和改进，或一切关于 DevTools 的一切。