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

Jecelyn Yeen

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

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

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

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

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

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

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

Chromium 问题：1257499

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

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

在此示例中，定义了 3 个级联层：page、component 和 base。在样式窗格中，您可以查看每个图层及其样式。

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

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

Chromium 问题：1240596

支持 hwb() 颜色函数

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

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

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

hwb() 颜色函数

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

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

控制台中的私有媒体资源

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

其他亮点

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

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

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

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

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

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

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

Chromium 问题：772558

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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