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

限制 WebSocket 请求

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

打开 Network 面板,点击某个 Web 套接字请求,然后打开 Messages 标签页以观察消息传输。选择 Slow 3G 以节流速度。

限制 WebSocket 请求

Chromium 问题:423246

“应用”面板中的新版 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 转义序列为日志消息着色,通常会借助一些样式库(例如 chalkcolorsansi-colorskleur 等)来实现。

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

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

控制台样式

Chromium 问题:12828371282076

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

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

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

Chromium 问题:12779441282076

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

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

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

控制台群组过滤条件

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 问题:12842451284995

其他亮点

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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