开发者工具的新变化 (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 面板现在支持另外两种衡量用户流的模式：时间范围和快照。

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

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

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

Chromium 问题：772558

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 在开发者工具中使用更多选项   了解详情   > 帮助 > 报告开发者工具问题来报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 浏览器 111

Chrome 浏览器 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 入门指南

Chrome 浏览器 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59