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

Jecelyn Yeen

Google 用户调研。

以 JSON 文件形式导入和导出录制的用户流

记录器面板现在支持以 JSON 文件格式导入和导出用户流程记录。此新增功能可让您更轻松地分享用户流程，并且有助于报告 bug。

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

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

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

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

“Recorder”面板中的导出选项

Chromium 问题：1257499

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

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

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

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

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

Chromium 问题：1240596

支持 hwb() 颜色函数

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

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

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

hwb() 颜色函数

改进了私有属性的显示

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

控制台中的私密房源

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 开发者工具团队联系

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

开发者工具的新变化

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