DevTools 新功能（Chrome 92）

Published on 2021年6月2日星期三 • Updated on 2021年6月2日星期三

Translated to: English, Español

Jecelyn Yeen

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

感谢韩昌浩 @hanselfmu 提供的翻译。

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

CSS 网格编辑器

我们新增入了大家期待已久的 CSS 网格编辑器。您现在更方便地预览并编辑 CSS 网格！

当您页面中的 HTML 元素有 display: grid 或 display: inline-grid 的 CSS 声明时, 您会在样式边栏中看到该声明旁边出现了一个图标。点击该图标打开或关闭 CSS 网格编辑器。CSS 网格编辑器里的图标让您预览可能的变化（例如 justify-content: space-around）。接着，您可以一键点击任何图标以编辑网格。

Chromium 议题: 1203241

支持控制台中的 const 重声明

控制台现在也支持 const 重声明，在此之前，DevTools 只支持let 和 class 的重声明。无法在控制台中重声明是开发者们常见的困扰，尤其是当您在试验新 JavaScript 代码的时候。

这项新功能允许开发者将代码复制粘贴进 DevTools 控制台，进行测试和调整。您现在可以无限重复这个过程，并且不需要刷新页面。在此之前，如果控制台中的代码重声明了一个 const 变量，DevTools 就会抛出一个语法错误。

请参见下面的示例。const 重声明的支持是跨 REPL 脚本的（参见变量 a）。按照设计，以下场景是不被支持的：

不允许在 REPL 脚本中重声明页面脚本的 const 变量
不允许在同一个 REPL 脚本中重声明 const （参见变量 b）

Chromium 议题: 1076427

来源顺序查看器

您现在可以在屏幕上查看元素的来源顺序，从而更好地检查无障碍功能。

对于搜索引擎优化和无障碍功能来说，一个 HTML 文档内容的顺序是十分重要的。然而一些新的 CSS 功能允许开发者创建展示顺序与来源顺序十分不同的内容。这对于屏幕阅读器用户来说是一个严重的无障碍功能问题，因为这会给这些用户带来与视觉用户不同的、很可能是令人困惑的体验。

Chromium 议题: 1094406

查看 iframe 详细信息的新快捷方式

右键点击元素面板中的 iframe 元素，选择显示 iframe 详细信息。

这会打开应用面板中的 iframe 版面。您可以在此检查文档的详细信息、安全与隔离状态、权限策略等，从而调试潜在的问题。

Chromium 议题: 1192084

优化跨域资源共享的调试支持

从现在起，问题面板将会展示跨域资源共享（CORS）的错误。这些 CORS 的错误可能由多种原因造成。点击展开每一个问题即可了解潜在的原因及其解决方案。

Chromium 议题: 1141824

网络面板的更新

重命名 XHR 标签为 Fetch/XHR

XHR 标签现被重命名为 Fetch/XHR。这项更新可以让开发者更明确，该过滤项同时包含 XMLHttpRequest 以及 Fetch API 网络请求。

Chromium 议题: 1201398

在网络面板中过滤 Wasm 资源类型

您现在可以点击新的 Wasm 按钮来过滤 Wasm 网络请求。

Chromium 议题: 1103638

网络状况面板中设备的用户代理客户端提示

网络状况 面板下的用户代理现已加入了用户代理客户端提示（User agent client hints）。

用户代理客户端提示是客户端提示 API （Client Hints API）的新扩展。在保护用户隐私的前提下，开发者们可以在利用这个 API ，有效地获取用户浏览器的信息。

Chromium 议题: 1174299

在问题面板中报告怪异模式问题

DevTools 现在会报告怪异模式（quirks mode）和有限怪异模式的问题了。

怪异模式和有限怪异模式是 Web 标准制定之前的传统浏览器模式。这些模式会模拟 Web 标准时代之前的页面布局行为，并常常会造成意外的视觉效果。

在调试布局问题的时候，开发者可能会认为这些问题都是由开发者编写的 CSS 或 HTML 造成的，而实际的问题则可能源于当前页面所在的浏览器模式。DevTools 为此提供了解决建议。

Chromium 议题: 622660

在性能面板中添加"计算相交部分"

DevTools 现在会在火焰图中显示计算相交部分了。这项更新可以帮助您发现 intersection observers 事件，并调试这些事件潜在的性能开销。

Chromium 议题: 1199137

Lighthouse 面板中的 Lighthouse 7.5

Lighthouse 面板现已运行 Lighthouse 7.5。现在针对已通过 CSS 定义了 aspect-ratio 的图片将不再展示"缺少明确的宽高"的警告。在此之前，Lighthouse 会对未定义宽高的图片展示此警告。

完整的更新列表请参见发布版本通知。

Chromium 议题: 772558

在"调用堆栈"边栏中弃用上下文菜单的 "Restart frame" 项

此 Restart frame 菜单项现已被弃用。该功能需要进一步的开发，现在它经常无法正常运作。

Chromium 议题: 1203606

[实验阶段] 协议监视器

如想开启此项实验，请在设置 > 实验下选中协议监视器复选框。

Chrome DevTools 使用 Chrome DevTools 协议 (CDP) 来测量、检查、调试和配置 Chrome 浏览器。协议监视器可以让您查看 DevTools 发出的所有 CDP 请求及其响应。

以下两个新功能可以帮助 CDP 的测试：

新的保存按钮可以让您将已记录的消息以 JSON 文件的形式下载
一个可以让您直接发送原始 CDP 命令的新字段

Chromium 议题: 1204004, 1204466

[实验阶段] Puppeteer Recorder

如想开启此项实验，请在设置 > 实验下选中Recorder复选框。

Puppeteer Recorder 现在会根据您与浏览器的交互来生成一份操作步骤列表，而之前 DevTools 则会直接生成一份 Puppeteer 脚本。一个新的导出按钮可以让您将这些操作步骤以 Puppeteer 脚本的形式导出。

在记录了这些步骤之后，您可以用新的重放按钮来重新播放这些步骤。请参考这里的指示来了解如何开始使用记录功能。

请注意，这是一项早期的实验功能。我们计划会在接下来的时间里改进并扩展 Recorder 的功能。

Chromium 议题: 1199787

下载 Chrome 预览版本

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

联系 Chrome DevTools 团队

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

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