DevTools 新功能（Chrome 99）

Published on 2022年2月21日星期一 • Updated on 2022年2月21日星期一

Translated to: English, Español, Português, 한국어, Pусский, 日本語

Jecelyn Yeen

现为谷歌 Chrome DevTools 的开发技术推广工程师。

感谢流浪大法师 @liuliangsir 提供的翻译。

有兴趣帮忙改进 DevTools 吗？请注册并参与 Google 用户体验调研。

WebSocket 请求限速

网络面板现在已经支持对网络套接字（web socket）请求进行限速。在此之前，网络限速的功能对网络套接字（web socket）请求不起作用。

打开网络面板，点击一个网络套接字（web socket）请求，然后打开消息选项卡来查看消息的传输情况。选择 慢速 3G 来限速。

Chromium 议题: 423246

应用面板里面的报告 API （Reportng API）新边栏

使用 报告 API 新边栏来查看有关自己页面情况的报告以及报告对应的状态。

该 Reporting API 是为了帮助您了解自己页面的安全违规情况，弃用 API 的调用情况以及更多。

打开一个使用 Reporting API 的页面（例如 demo 页面）。在应用面板里面，把滚动条滚动到后台服务区域，然后选择 Reporting API 边栏。

报告区域为您展示有关自己页面情况的各种报告以及报告对应的状态。点击某个报告可以查看该报告的详情。

Endpoints 区域为您展示那些所有被配置 Reporting-Endpoints 头部的 endpoints。

Chromium 议题: 1205856

支持 Recorder 面板一直处于等待状态，直到元素可见或可点击

在重放用户流程记录的过程中，现在的 Recorder 面板将会一直处于等待状态，直到元素在视口范围内能够被看见或可以被点击；或者 Recorder 面板会尝试自动将元素滚动到视口范围，然后再执行重放该步的动作。在此之前，重放动作会立即失败。

这里有一个例子：菜单被放置在视口范围之外，当这个菜单被激活时，会从视口外面滑动到视口里面。这个用户流程描述了从点击 toggle off-screen menu 按钮开始到点击菜单里面选项的全过程。在此之前，重放动作会在最后一步失败，这是因为此时的菜单项还处于滑入状态且在视口范围内不可见。现在这个问题已经被修复。

Chromium 议题: 1257499

更好的控制台样式，格式化和过滤

使用 ANSI 转义码来适当地修饰日志信息

您现在可以使用 ANSI escape sequences 来适当地修饰控制台信息。在此之前，DevTools 控制台对 ANSI escape sequences 的支持实属有限（且部分功能已经失效）。

对 Node.js 开发者来说，使用 ANSI escape sequences 来美化日志信息的做法实属平常，通常是需要使用一些样式库，如 chalk、colors、ansi-colors、kleur 等。

有了这些改动，您现在就可以无差别地使用 DevTools 来调试您的 Node.js 应用程序，并且能够适当地美化控制台信息。打开这个 demo 来亲眼目睹效果！

如果您想了解更多关于 DevTools 格式化以及美化控制台信息的内容，请查看格式化和修饰控制台信息文档。

Chromium 议题: 1282837, 1282076

适当地支持 `%s`, `%d`, `%i` 和 `%f` 格式指定符

控制台现在能够正确完成对 %s、%d、%i 以及 %f 类型的转换，参考 Console Standard。在此之前，会出现转换结果不一致的情况。

Chromium 议题: 1277944, 1282076

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

在过滤控制台信息的过程中，现在只有在其内容和过滤器匹配或者控制台组（或其祖先组）标题和过滤器匹配的情况下，控制台信息才会被显示出来。在此之前，控制台组标题的显示会无视过滤器。

此外，如果控制台信息被显示出来，那么其所属的控制台组（或其祖先组）也会被显示出来。

Chromium 议题: 1068788

改进 Source maps

使用 source map 文件来调试 Chrome 扩展

您现在可以使用 source map 文件来调试 Chrome 扩展。在此之前，DevTools 只支持内联 sourcemap。

Chromium 议题: 212374

优化 Sources 面板里面源文件夹树的显示问题

现在，Sources 面板里面的源文件夹树变得更加简洁，并且命名更加易读（例如：“../”、“./”等）。这项功能的实现得益于规范化 source maps 里面的绝对源 URL。

Chromium 议题: 1284737

Sources 面板里面显示 Worker 源文件

现在，Worker（例如：web worker、service worker）源文件在使用相对 SourceURL 的情况下，会被显示在 Source 面板里面。在此之前，Worker 源文件不会被正确处理。

Chromium 议题: 1277002

Chrome 自动深色模式的更新

现在，自动深色模式模拟 UI 变得更加简洁。当下是个复选框，之前是个下拉框。

除了上面说的这些，在开启自动深色主题功能之后，Emulate prefers-color-scheme 下拉框会被禁用掉，并且下拉框选项还会被自动设置为 prefers-color-scheme: dark。

Chrome 96 发布了自动深色主题的 Origin Trial （目前只限于 Android 版）。有了该功能，当用户在操作系统那里选择深色主题时，浏览器将自动为浅色主题网站生成深色主题。

Chromium 议题: 1243309

颜色选择器和分割面板支持触摸

您现在可以在 DevTools 那里用手指或者触控笔来选择颜色以及改变 Drawer 的大小。

这里有个用 Google Pixelbook 触屏设备捕捉的例子。

Chromium 议题: 1284245, 1284995

其他的更新

下面列出的是此次更新需要注意的 bug 修复：

修复 Cookies 面板里面关于 edit cookies 问题。(1290196)

使用 Shift + Tab 可以选择命令菜单里面的前一个命令。(1278743)

在 Issues 选项卡里面，会报告 CORS preflight request 问题。(1272445)

在 Issues 选项卡里面，会报告 User-Agent Client Hints 问题。(1219359)

在 Sources 和 Console 面板里面修复 Shift + Delete 和 Page up / Page down 的行为。(1278461, 1285662)

在 Sources 面板里面移除断点，会关闭断点编辑对话框。(922513)

在 DevTools 里面切换浅色/深色主题，不需要重新加载 DevTools。(1278738)

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版（Dev）或测试版（Beta）设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ，让您抢先在用户之前发现您网站上的问题！

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进，或一切关于 DevTools 的一切。

提交建议或意见回馈：crbug.com.
报告 DevTools 问题：打开 DevTools，按 更多选项图标 > 帮助 > 报告 DevTools 问题。
在推特上，发推文： @ChromeDevTools.
在我们的 What's new in DevTools YouTube 视频底下留言。

DevTools 新功能（Chrome 99）

WebSocket 请求限速

应用面板里面的报告 API （Reportng API）新边栏

支持 Recorder 面板一直处于等待状态，直到元素可见或可点击