开发者工具中的新功能 (Chrome 99)

Jecelyn Yeen

限制 WebSocket 请求

网络面板现在支持限制 WebSocket 请求。之前，网络节流不适用于 WebSocket 请求。

打开网络面板，点击某个 WebSocket 请求，然后打开消息标签页，观察消息传输情况。选择慢速 3G 以限制速度。

Chromium 问题：423246

应用面板中的新 Reporting API 窗格

使用新的 Reporting API 窗格监控网页上生成的报告及其状态。

报告 API 旨在帮助您监控网页的安全违规行为、已弃用的 API 调用等。

打开使用 Reporting API 的网页（例如演示网页）。在应用面板中，向下滚动到后台服务部分，然后选择报告 API 窗格。

报告部分会显示您的网页上生成的报告列表及其状态。点击该报告即可查看其详细信息。

端点部分简要介绍了 Reporting-Endpoints 标头中配置的所有端点。

Chromium 问题：1205856

支持在“记录器”面板中等待元素变为可见/可点击

重放用户流记录时，Recorder 面板现在会等到元素在视口中可见或可点击，或者尝试自动将元素滚动到视口中，然后再重放相应步骤。之前，重放会立即失败。

以下示例展示了一个位于视口之外的屏幕外菜单，该菜单在激活时会滑入。用户流程是切换菜单，然后点击菜单项。之前，重放会在最后一步失败，因为菜单项仍在滑动进入视口，尚未在视口中显示。此问题现已修复。

Chromium 问题：1257499

改进了控制台样式、格式和过滤功能

使用 ANSI 转义代码正确设置日志消息的样式

您现在可以使用 ANSI 转义序列来正确设置控制台消息的样式。以前，开发者工具控制台对 ANSI 转义序列的支持非常有限（且部分损坏）。

Node.js 开发者通常会通过 ANSI 转义序列对日志消息进行着色，这通常需要借助一些样式库（例如 chalk、colors、ansi-colors、kleur 等）。

通过这些更改，您现在可以使用开发者工具无缝调试 Node.js 应用，并获得适当的彩色控制台消息。打开此演示自行查看！

如需详细了解如何使用开发者工具设置控制台消息的格式和样式，请参阅在控制台中设置消息的格式和样式文档。

Chromium 问题：1282837、1282076

正确支持 %s、%d、%i 和 %f 格式说明符

控制台现在可以按照控制台标准中的规定正确执行 %s、%d、%i 和 %f 类型转换。之前，对话结果不一致。

Chromium 问题：1277944、1282076

更直观的控制台群组过滤条件

过滤控制台消息时，如果控制台消息的内容与过滤条件匹配，或者群组（或祖先群组）的标题与过滤条件匹配，系统现在会显示该控制台消息。之前，即使应用了过滤条件，控制台群组标题也会显示。

此外，如果显示控制台消息，系统现在还会显示该消息所属的群组（或祖先群组）。

Chromium 问题：1068788

源映射改进

使用源映射文件调试 Chrome 扩展程序

您现在可以使用源映射文件调试 Chrome 扩展程序。以前，开发者工具仅支持内嵌源映射，用于 Chrome 扩展程序调试。

Chromium 问题：212374

改进了“来源”面板中的源文件夹树

来源面板中的源文件夹树现在得到了改进，文件夹结构和命名（例如“../”“./”等）更加简洁。从底层来看，这是对源映射中的绝对源网址进行规范化的结果。

Chromium 问题：1284737

在“来源”面板中显示 worker 源文件

现在，具有相对 Source网址 的工作器（例如 Web 工作器、服务工作器）源文件会显示在来源面板中。之前，工作器源文件未得到正确处理。

Chromium 问题：1277002

Chrome 的“自动深色主题”更新

自动深色主题模拟界面现已简化。现在是一个复选框，之前是一个下拉菜单。

除此之外，当自动深色主题处于启用状态时，模拟 prefers-color-scheme 下拉菜单将被停用，并自动设置为 prefers-color-scheme: dark。

Chrome 96 在 Android 上针对自动深色主题推出了源试用。借助此功能，当用户在操作系统中选择启用深色主题时，浏览器会将自动生成的深色主题应用于使用浅色主题的网站。

Chromium 问题：1243309

支持触控的颜色选择器和分屏窗格

您现在可以在开发者工具中选择颜色，并使用手指或触控笔在触屏设备上调整抽屉的大小。

以下是使用 Google Pixelbook 设备触屏拍摄的示例。

Chromium 问题：1284245、1284995

其他亮点

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

• 修复了“Cookie”窗格中的修改 Cookie 问题。(1290196)
• 使用 Shift + Tab 在命令菜单中选择上一个命令。(1278743)
• 在问题标签页中报告 CORS 预检请求问题。(1272445)。
• 在问题标签页中报告 User-Agent Client Hints 问题。(1219359)。
• 修复了“来源”和“控制台”面板中的 Shift + Delete 和 Page up / Page down 行为。（1278461、1285662）
• 在来源面板中移除断点时，关闭断点修改对话框。(922513)
• 在开发者工具中切换浅色/深色主题时，无需重新加载。(1278738)

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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