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

将记录的用户流作为 JSON 文件导入和导出

Recorder 面板现在支持以 JSON 文件的形式导入和导出用户流录制内容。此新增功能可让您更轻松地分享用户流,并且可用于 bug 报告。

例如,下载此 JSON 文件。您可以使用导入按钮将其导入,然后重放用户流

除此之外,您还可以导出录制内容。记录用户流后,点击导出按钮。导出选项有以下 3 种:

  • 导出为 JSON 文件。将录制内容下载为 JSON 文件。
  • 导出为 @puppeteer/replay 脚本。将录制内容下载为 Puppeteer Replay 脚本。
  • 导出为 Puppeteer 脚本。将录制内容下载为 Puppeteer 脚本。

如需详细了解这些选项之间的差异,请参阅相关文档

“Recorder”面板中的导出选项

Chromium 问题:1257499

在“Styles”窗格中查看级联层

级联层可让您更明确地控制 CSS 文件,以防止样式特异性冲突。这对于大型代码库、设计系统以及管理应用中的第三方样式时特别有用。

示例中定义了 3 个级联层:pagecomponentbase。在 Styles 窗格中,您可以查看每个图层及其样式。

点击图层名称,查看图层顺序。page 层具有最高的特异性,因此 box 背景为绿色。

在“Styles”窗格中查看级联层

Chromium 问题:1240596

支持 hwb() 颜色函数

您现在可以在开发者工具中查看和修改 HWB 颜色格式

样式窗格中,按住 Shift 键并点击任意颜色预览,即可更改颜色格式。添加了 HWB 颜色格式。

或者,您也可以在颜色选择器中将颜色格式更改为 HWB。

hwb() 颜色函数

改进了私有属性的显示方式

开发者工具现在可以正确评估并显示私有访问器。以前,您无法在控制台来源面板中展开具有私有访问器的类。

私有属性

Chromium 问题:1296855https://crbug.com/1303407

其他亮点

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

  • 往返缓存现在会显示阻止 bfcache(如果存在)的扩展程序 ID。(1284548)
  • 修复了对类似数组的对象、CSS 类名称、map.get 和 HTML 标记的自动补全支持。(1297101129749112938071296983
  • 修复了双击字词和撤消自动补全操作时出现的突出显示错误。(12984371298667
  • 修复了 Sources 面板中的注释键盘快捷键。(1296535)
  • 重新支持在 Sources 面板中使用 Alt(选项)键进行多选。(1304070)

[实验性] Lighthouse 面板中新增了时间范围和快照模式

除了现有的导航模式之外,Lighthouse 面板现在支持另外两种衡量用户流的模式:时间范围快照

例如,您可以使用“时间跨度”报告来分析用户互动。打开此demo页面。选择时间范围模式,然后点击开始时间范围。在该页面上,点击一杯咖啡并结束时间跨度模式。阅读该报告,了解此类互动导致的总阻塞时间Cumulative Layout Shift

每种模式都有自己独特的用例、优势和限制。如需了解详情,请参阅 Lighthouse 文档

Lighthouse 面板屋中的时间跨度和快照模式

Chromium 问题:772558

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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