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

Jecelyn Yeen

Chrome 浏览器 100

Chrome 浏览器推出第 100 版啦！Chrome 开发者工具将继续为开发者提供可靠的 Web 构建工具。不妨花点时间浏览新变化标签页中，庆祝一下这些里程碑。

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

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

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

在规则中查看和修改 @supports

Chromium 问题：1222574、1222573

“记录器”面板改进

默认情况下支持常用选择器

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

  • data-testid
  • data-test
  • data-qa
  • 数据周期
  • data-test-id
  • data-qa-id
  • 数据测试

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

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

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

默认情况下支持常用选择器

自定义录音的选择器

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

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

自定义录音的选择器

选择自定义选择器的结果

重命名录制内容

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

重命名录制内容

悬停时预览类/函数属性

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

悬停时预览类/函数属性

Chromium 问题：1049947

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

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

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

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

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

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

Chromium 问题：1261130

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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