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

Jecelyn Yeen

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

“记录器”面板改进

默认支持常见选择器

在录制期间确定唯一选择器时，Recorder 面板现在会自动优先选择具有以下属性的元素：

  • data-testid
  • 数据测试
  • data-qa
  • data-cy
  • data-test-id
  • 数据-QA-ID
  • data-testing

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

例如，使用此演示页面开始录制新内容。填写一个电子邮件地址，然后观察选择器值。

由于电子邮件地址元素已定义 data-testid，因此系统会自动将其用作选择器，而不是使用 id 或 class 属性。

默认支持常见选择器

自定义录音的选择器

如果您不使用常用选择器，则可以自定义录制的选择器。

例如，此演示页面使用 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 版用作您的默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并帮助您在用户之前发现网站上的问题！

与 Chrome DevTools 团队联系

使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

开发者工具的新变化

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