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

Jecelyn Yeen

Chrome 100

祝贺 Chrome 第 100 个版本发布！Chrome DevTools 将继续为开发者提供可靠的工具，以便他们在 Web 上进行开发。不妨花点时间点击新功能标签页，庆祝这些里程碑。

与往常一样，您可以点击图片观看最新的开发者工具新功能视频。

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

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

Chromium 问题：1222574、1222573

改进了“Recorder”面板

默认支持常见选择器

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

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

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

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

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

自定义录制内容的选择器

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

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

重命名录屏

您现在可以在录音机面板中重命名录音，只需点击录音标题旁边的修改按钮（铅笔图标）即可。

悬停时预览类/函数属性

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

Chromium 问题：1049947

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

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

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

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

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

Chromium 问题：1261130

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容的列表。