此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

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

Recorder 面板现在支持以 JSON 文件格式导入和导出用户流记录。添加后可以更轻松地共享用户流，并且对 bug 报告非常有用。

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

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

导出为 JSON 文件。以 JSON 文件格式下载录制内容。
导出为 @puppeteer/replay 脚本。以 Puppeteer Replay 脚本的形式下载录制内容。
导出为 Puppeteer 脚本。以 Puppeteer 脚本的形式下载录制内容。

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

“记录器”面板中的导出选项

Chromium 问题：1257499

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

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

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

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

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

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 面板中新增了时间跨度和快照模式

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

例如，您可以使用时间跨度报告来分析用户互动。打开此演示页面。选择时间跨度模式，然后点击开始时间跨度。在该页面上，点击一杯咖啡，然后结束时间跨度。阅读该报告，了解由互动导致的 Total Blocking Time 和 Cumulative Layout Shift。

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

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

Chromium 问题：772558

下载预览渠道

您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。