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

以 JSON 文件的形式导入和导出记录的用户体验历程

录制器面板现在支持将用户体验历程录制内容导入和导出为 JSON 文件。这项新增功能让您可以更轻松地共享用户体验流程,对 bug 报告也非常有用。

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

此外,您还可以导出录音。录制用户流程后,点击导出按钮。有 3 种导出选项:

  • 导出为 JSON 文件。以 JSON 文件的形式下载录音。
  • 导出为 @puppeteer/replay 脚本。将录制内容下载为 Puppeteer 重放脚本。
  • 导出为 Puppeteer 脚本。将录制内容下载为 Puppeteer 脚本。

请参阅文档,详细了解这些选项之间的差异。

“录音机”面板中的导出选项

Chromium 问题:1257499

在“样式”窗格中查看级联图层

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

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

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

在“样式”窗格中查看级联图层

Chromium 问题:1240596

支持 hwb() 颜色函数

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

Styles 窗格中,按住 Shift 键,然后点击任意颜色预览以更改颜色格式。添加了 HWB 颜色格式。

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

hwb() 颜色函数

改进了私有媒体资源的显示

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

控制台中的私有媒体资源

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

其他亮点

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

  • 返回/前进缓存现在会显示屏蔽 bfcache 的扩展程序 ID(如果有)。(1284548
  • 修复了对数组类对象、CSS 类名称、map.get 和 HTML 标记的自动补全支持。(1297101129749112938071296983
  • 修复了双击字词并撤消自动补全时突出显示内容不正确的问题。(12984371298667
  • 修复了来源面板中的评论键盘快捷键。(1296535)
  • 重新启用在来源面板中使用 Alt(选项)键进行多选的功能。(1304070)

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

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

例如,您可以使用时间跨度报告来分析用户互动情况。打开此演示页面。选择时间范围模式,然后点击开始时间范围。在页面上,点击一杯咖啡,然后结束时间段。阅读报告,了解互动导致的总阻塞时间累计布局偏移

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

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

Chromium 问题:772558

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。