此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

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

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

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

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

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

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

“Recorder”面板中的导出选项

Chromium 问题：1257499

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

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

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

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

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

Chromium 问题：1240596

支持 hwb() 颜色函数

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

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

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

hwb() 颜色函数

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

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

私有属性

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

其他亮点

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

往返缓存现在会显示阻止 bfcache（如果存在）的扩展程序 ID。(1284548)
修复了对类似数组的对象、CSS 类名称、map.get 和 HTML 标记的自动补全支持。（1297101、1297491、1293807、1296983）
修复了双击字词和撤消自动补全操作时出现的突出显示错误。（1298437、1298667）
修复了 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 视频发表评论。