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

Jecelyn Yeen

限制 WebSocket 请求

Network 面板现在支持节流 Web 套接字请求。以前，网络节流不适用于 Web 套接字请求。

打开网络面板，点击 Web Socket 请求并打开邮件标签页，观察邮件的传输情况。选择 Slow 3G 以节流速度。

限制 WebSocket 请求

Chromium 问题：423246

“Application”面板中的“New Reporting API”窗格

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

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

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

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

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

Reporting API 窗格

Chromium 问题：1205856

支持在 Recorder 面板中等待元素可见/可点击

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

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

Chromium 问题：1257499

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

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

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

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

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

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

控制台样式

Chromium 问题：1282837、1282076

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

管理中心现在会按照 管理中心标准中指定的方式正确执行 %s、%d、%i 和 %f 类型的转换。以前，对话结果不一致。

支持控制台消息中的格式说明符

Chromium 问题：1277944、1282076

更直观的控制台群组过滤器

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

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

控制台群组过滤条件

Chromium 问题：1068788

改进了源映射

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

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

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

Chromium 问题：212374

改进了“Sources”面板中的源代码文件夹树

Sources 面板中的源文件夹树现在已得到改进，文件夹结构和命名（例如“../”“./”等）更清晰。在底层，这是对源映射中的绝对来源网址进行标准化处理的结果。

改进了“Sources”面板中的源代码文件夹树

Chromium 问题：1284737

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

现在，具有相对 Source网址 的 Worker（例如 Web Worker、Service Worker）源文件会显示在 Source 面板中。之前，系统无法正确处理 worker 源文件。

ALT_TEXT_HERE

Chromium 问题：1277002

Chrome 的自动深色主题更新

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

此外，启用自动深色主题后，模拟 prefers-color-scheme 下拉菜单将被停用，并自动设为 prefers-color-scheme: dark。

Chrome 96 为 Android 上的自动深色主题引入了源试用。借助此功能，如果用户在操作系统中选择启用深色主题，浏览器会将自动生成的深色主题应用于浅色主题网站。

自动深色主题模拟

Chromium 问题：1243309

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

现在，您可以在触摸屏设备上使用手指或触控笔在 DevTools 中选择颜色并调整抽屉式导航栏的大小。

以下是使用 Google Pixelbook 设备触摸屏截取的示例。

Chromium 问题：1284245、1284995

其他亮点

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。