开发者工具的新变化 (Chrome 100)

Chrome 100

祝贺 Chrome 发布第 100 个版本!Chrome DevTools 将继续为开发者提供可靠的工具,帮助他们在 Web 上进行构建。请花点时间点击新功能标签页,共同庆祝这些里程碑。

一如既往,您可以点击图片观看最新的 “DevTools 中的新变化”视频

在“Styles”窗格中查看和修改 @supports at 规则

现在,您可以在 Styles 窗格中查看和修改 CSS @supports at-rule。这些更改让您可以更轻松地实时试验 at-rule。打开此演示页面检查 <div class=”box”> 元素,在样式窗格中查看 @supports at-rule。点击相应规则的声明即可对其进行修改。

查看和修改 @supports at 规则

Chromium 问题:1222574、1222573

改进了“录音机”面板

默认支持常见选择器

在录制过程中确定唯一选择器时,录制器面板现在会自动优先选择具有以下属性的元素:

  • 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])。

自定义录制的选择器

自定义选择器选择的结果

重命名录音

现在,您可以在录音机面板中使用录音标题旁边的修改按钮(铅笔图标)重命名录音。

重命名录音

悬停时预览类/函数属性

现在,您可以在调试期间将鼠标悬停在 Sources 面板中的类或函数上,以预览其属性。以前,该标签页只会显示函数名称和指向其在源代码中位置的链接。

悬停时预览类/函数属性

Chromium 问题:1049947

“性能”面板中的部分呈现帧

现在,性能记录功能会在时间轴中显示新的帧类别“部分呈现的帧”。

以前,时间轴会将主线程工作延迟的任何帧视为“丢帧”。不过,在某些情况下,某些帧可能仍会由 compositor 线程驱动产生视觉更新(例如滚动)。

这会导致用户感到困惑,因为这些“丢帧”的屏幕截图仍会反映视觉更新。

新增的“部分呈现的帧”旨在更直观地表明,虽然某些内容未在帧中及时呈现,但问题并不严重,不会完全阻止视觉更新。

“性能”面板中的部分呈现帧

Chromium 问题:1261130

其他亮点

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

  • 更新了模拟设备的 iPhone 用户代理字符串。所有 iPhone 5 及更高版本的 user-agent 字符串均为 iPhone OS 13_2_3。(1289553)
  • 现在,您可以直接将代码段另存为 JavaScript 文件。以前,您需要手动附加 .js 文件扩展名。(1137218)
  • 现在,使用源代码映射进行调试时,Sources 面板会正确显示作用域变量名称。以前,即使提供了源代码映射,Sources 面板也会显示经过缩减的范围变量名称。(1294682)
  • 来源面板现在会在页面加载时正确恢复滚动位置。之前,系统未正确恢复位置,导致调试不便。(1294422)

下载预览渠道

不妨考虑将 Chrome Canary 版开发者版Beta 版用作默认开发浏览器。通过这些预览版渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并帮助您在用户发现问题之前发现网站上的问题!

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。