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

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 问题:12225741222573

“记录器”面板改进

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

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

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

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

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

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

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

自定义录音的选择器

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

例如,此演示页面使用 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 视频发表评论。

开发者工具的新变化

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