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

Jecelyn Yeen

限制 WebSocket 请求

Network 面板现在支持限制 Web Socket 请求。之前，网络节流功能对 Web Socket 请求无效。

打开网络面板，点击 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 面板会等到相应元素在视口中可见或可点击，或者尝试自动将元素滚动到视口中，然后再重放步骤。以前，重放会立即失败。

下面是一个位于视口外部的屏幕外菜单的示例，该菜单在启用后滑入。用户流程是切换菜单，然后点击菜单项。以前，重放会在最后一步失败，因为菜单项仍在滑入且在视口中还不可见。此问题现已解决。

Chromium 问题：1257499

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

使用 ANSI 转义码设置适当的日志消息样式

您现在可以使用 ANSI 转义序列来正确设置控制台消息的样式。之前，DevTools 控制台对 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 扩展程序。以前，DevTools 仅支持进行 Chrome 扩展程序调试的内嵌源代码映射。

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

Chromium 问题：212374

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

Sources 面板中的源代码文件夹树现已经过改进，文件夹结构和命名方式（例如“../”、“./”等）更加简洁。从本质上讲，这是对源映射中的绝对来源网址进行标准化处理的结果。

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

Chromium 问题：1284737

在“Sources”面板中显示工作器源文件

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

ALT_TEXT_HERE

Chromium 问题：1277002

Chrome 自动深色主题更新

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

除此之外，启用自动深色主题后，Emulate preferences-color-scheme 下拉菜单将停用，并且自动设为 prefers-color-scheme: dark。

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

自动深色主题模拟

Chromium 问题：1243309

易于触摸的颜色选择器和拆分窗格

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

这是使用 Google Pixelbook 设备触摸屏拍摄的屏幕示例。

Chromium 问题：1284245、1284995

其他亮点

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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