此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

Chrome 100

Chrome 现已推出第 100 个版本！Chrome 开发者工具将继续为开发者提供可靠的工具，帮助其构建 Web 应用。您可以花点时间在新功能标签页中点击一下，以庆祝里程碑。

和往常一样，您可以点击图片，观看最新的“开发者工具的新变化”视频。

在“样式”窗格中查看和修改规则中的 @supports

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

在规则中查看和修改 @supports

Chromium 问题：1222574、1222573

改进了“录音机”面板

默认支持常用选择器

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

数据测试 ID
数据测试
data-qa
data-cy
data-test-id
data-qa-id
数据测试

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

例如，您可以使用此演示页面开始录制新的视频。填写电子邮件地址并观察选择器值。

由于 email 元素已定义 data-testid，因此它会自动用作选择器，而不会使用 id 或 class 属性。

默认支持常用选择器

自定义录制内容的选择器

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

例如，此演示页面使用 data-automate 属性作为选择器。开始新录音并输入 data-automate 作为选择器属性。填写电子邮件地址，并观察选择器值 ([data-automate=email-address])。

自定义录制内容的选择器

自定义选择器选择的结果

重命名录音

现在，您可以在 Recorder 面板中重命名录音，使用录音标题旁边的修改按钮（铅笔图标）。

重命名录音

悬停鼠标时预览类/函数属性

现在，在调试期间，您可以在 Sources 面板中将鼠标悬停在某个类或函数上，预览其属性。以前，它仅显示函数名称以及指向其在源代码中位置的链接。

悬停鼠标时预览类/函数属性

Chromium 问题：1049947

“Performance”面板中部分呈现的帧

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

以前，Frames 时间轴会将因延迟主线程工作的任何帧可视化为“丢帧”。不过，在某些情况下，某些帧可能仍会产生由合成器线程驱动的视觉更新（例如滚动）。

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

新的“部分呈现的帧”旨在更直观地表明，虽然某些内容没有及时在帧中呈现，但问题并不严重，以至于完全无法完全阻止视觉更新。

“Performance”面板中部分呈现的帧

Chromium 问题：1261130

其他亮点

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

更新了模拟设备的 iPhone 用户代理字符串。所有 iPhone 5 之后的版本都包含适用于 iPhone OS 13_2_3 的用户代理字符串。(1289553)
现在，您可以直接将代码段另存为 JavaScript 文件。以前，您需要手动附加 .js 文件扩展名。(1137218)
现在，使用源映射进行调试时，Sources 面板可以正确显示作用域变量名称。以前，尽管提供了源映射，Sources 面板仍会显示缩减的作用域变量名称。(1294682)
现在，Sources 面板可在网页加载时正确恢复滚动位置。以前，该位置无法正确恢复，导致调试不便。(1294422)

下载预览渠道

您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。