DevTools 新功能(Chrome 100)

Published on Updated on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

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

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

Chrome 100

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

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

样式边栏中查看并修改 @supports at-rule

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

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

查看并编辑 @supports at-rules

Chromium 议题: 1222574, 1222573

Recorder 面板的改进

默认支持常用选择器

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

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

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

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

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

自定义一段录制内容的选择器

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

举个例子,这个演示页面使用了 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)

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

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

下载 Chrome 预览版本

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

联系 Chrome DevTools 团队

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

  • 提交建议或意见回馈:crbug.com.
  • 报告 DevTools 问题:打开 DevTools,按 更多选项图标   More   > 帮助 > 报告 DevTools 问题
  • 在推特上,发推文: @ChromeDevTools.
  • 在我们的 What's new in DevTools YouTube 视频底下留言。

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.