DevTools 新功能(Chrome 92)

Published on Updated on

Translated to: English, Español

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

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

CSS 网格编辑器

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

CSS 网格编辑器

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

Chromium 议题: 1203241

支持控制台中的 const 重声明

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

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

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

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

Chromium 议题: 1076427

来源顺序查看器

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

来源顺序查看器

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

Chromium 议题: 1094406

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

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

显示 iframe 详细信息

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

iframe 详细信息展示

Chromium 议题: 1192084

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

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

问题标签页的 CORS 问题

Chromium 议题: 1141824

网络面板的更新

重命名 XHR 标签为 Fetch/XHR

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

Fetch/XHR 标签

Chromium 议题: 1201398

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

您现在可以点击新的 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 菜单项现已被弃用。该功能需要进一步的开发,现在它经常无法正常运作。

弃用 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 的功能。

Puppeteer Recorder

Chromium 议题: 1199787

下载 Chrome 预览版本

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

联系 Chrome DevTools 团队

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

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

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.