开发者工具的新变化 (Chrome 88)

加快了 DevTools 启动速度

现在,在 JavaScript 编译方面,DevTools 的启动速度提高了约 37%(从 6.9 秒缩短到 5 秒)!🎉

该团队进行了一些优化,以减少启动期间序列化、解析和反序列化的性能开销。

我们将在不久之后发布一篇工程博文,详细介绍该实现。敬请期待!

Chromium 问题:1029427

新的 CSS 角度可视化工具

现在,开发者工具可以更好地支持 CSS 角度调试!

CSS 角度

当网页上的 HTML 元素(例如 background: linear-gradient(angle, color-stop1, color-stop2)transform: rotate(angle))应用了 CSS 角度时,样式窗格中的角度旁边会显示一个时钟图标。点击时钟图标可切换时钟叠加层。点击时钟中的任意位置或拖动指针即可更改角度!

您还可以使用鼠标和键盘快捷键更改角度值,如需了解详情,请参阅我们的文档

Chromium 问题:11261781138633

模拟不受支持的图片类型

开发者工具在“渲染”标签页中添加了两个新的模拟,可让您停用 AVIF 和 WebP 图片格式。借助这些新的模拟,开发者可以更轻松地测试不同的图片加载场景,而无需切换浏览器。

假设我们使用以下 HTML 代码为较新浏览器提供 AVIF 和 WebP 格式的图片,并为旧版浏览器提供 PNG 后备图片。

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

打开渲染标签页,选择“停用 AVIF 图片格式”,然后刷新页面。将鼠标悬停在 img src 上。当前的图片 src (currentSrc) 现在是后备 WebP 图片。

模拟图片类型

Chromium 问题:1130556

在“存储空间”窗格中模拟存储空间配额大小

您现在可以在“存储空间”窗格中替换存储空间配额大小。借助此功能,您可以模拟不同的设备,并在可用磁盘空间不足的情况下测试应用的行为。

依次前往应用 > 存储,选中模拟自定义存储空间配额复选框,然后输入任何有效数字以模拟存储空间配额。

模拟存储空间配额大小

Chromium 问题:9457861146985

“性能”面板录制内容中新增了 Web Vitals 数据条

性能记录现在提供了一个选项,用于显示 Web Vitals 信息。

记录加载性能后,在“性能”面板中选中网页指标复选框,即可查看新的网页指标数据流。

该车道目前会显示 Web Vitals 信息,例如 First Contentful Paint (FCP)、Largest Contentful Paint (LCP) 和 Layout Shift (LS)。

如需详细了解如何使用网页指标优化用户体验,请访问 web.dev/vitals

Web Vitals 车道

Chromium 问题:不适用

在“网络”面板中报告 CORS 错误

现在,如果网络请求因跨域资源共享 (CORS) 而失败,DevTools 会显示 CORS 错误。

Network 面板中,观察失败的 CORS 网络请求。“状态”列显示“CORS 错误”。将鼠标悬停在错误上,提示现在会显示错误代码。以前,开发者工具仅针对 CORS 错误显示通用的 “(failed)” 状态。

这为我们进一步改进,以更详细地说明 CORS 问题奠定了基础!

CORS 错误

Chromium 问题:1141824

帧详情视图更新

“帧详情”视图中的跨源隔离信息

跨源隔离状态现在显示在安全与隔离部分下。

新的 API 可用性部分会显示 SharedArrayBuffer (SAB) 的可用性,以及它们能否使用 postMessage() 共享。

如果 SAB 和 postMessage() 目前可用,但上下文不是跨源隔离的,系统会显示废弃警告。如需详细了解跨源隔离以及为何 SharedArrayBuffers 等功能需要进行跨源隔离,请参阅这篇文章

跨源信息

Chromium 问题:1139899

帧详情视图中新增了 Web Worker 信息

DevTools 现在会在创建 Web 工作器的框架下方显示专用 Web 工作器。

Application 面板中,展开包含 Web Worker 的帧,然后选择 Workers 树下的某个 worker 以查看 Web Worker 的详细信息。

网络工作器信息

Chromium 问题:11225071051466

显示已打开窗口的打开者框架详情

现在,您可以查看哪个帧导致了另一个窗口的打开的详细信息。

选择 Frames 树下的某个已打开的窗口,即可查看窗口详细信息。点击 Opener Frame 链接,以在“Elements”面板中显示打开器。

Opener 框架详情

Chromium 问题:1107766

从“Service Workers”窗格打开“Network”面板

使用新的网络请求链接查看所有 Service Worker (SW) 请求路由信息。这为开发者在调试 SW 时提供了额外的上下文。

依次前往应用 > 服务工件,然后点击 SW 的网络请求。底部面板中会打开 Network 面板,其中会显示与所有服务工件相关的请求(网络请求会按 "is:service-worker-intercepted" 进行过滤)。

在服务工件中打开“网络”面板

Chromium 问题:不适用

“网络”面板中的新复制选项

复制媒体资源的属性值

借助上下文菜单中的新建“复制值”选项,您可以复制网络请求的属性值。

复制属性值

网络面板中,点击某个网络请求以打开标头窗格。右键点击以下部分下的任一属性:请求载荷 (JSON) 表单数据查询字符串参数请求标头响应标头

然后,您可以选择复制值,将属性值复制到剪贴板。

Chromium 问题:1132084

复制网络发起者的堆栈轨迹

右键点击某个网络请求,然后选择复制堆栈轨迹将堆栈轨迹复制到剪贴板。

复制堆栈轨迹

Chromium 问题:1139615

Wasm 调试更新

在鼠标悬停时预览 Wasm 变量值

在断点处暂停时,当您在 WebAssembly (Wasm) 反汇编中将鼠标悬停在某个变量上时,DevTools 现在会显示该变量的当前值。

Sources(来源)面板中,打开 Wasm 文件,设置断点并刷新页面。将光标悬停在变量上即可查看值。

在鼠标悬停时预览 Wasm 变量

Chromium 问题:10588361071432

在控制台中评估 Wasm 变量

现在,您可以在控制台中评估在断点处暂停的 Wasm 变量。

在此示例中,我们在 local.get $input 行中添加断点。调试时,在控制台中输入 $input 将返回变量的当前值,在本例中为 4

在控制台中评估 Wasm 变量

Chromium 问题:1127914

文件/内存大小的一致度量单位

现在,DevTools 始终使用 kB 来显示文件/内存大小。以前,DevTools 混用了 kB(1000 字节)和 KiB(1024 字节)。例如,“网络”面板之前使用的是“kB”标签,但实际上是使用 KiB 进行计算,这会造成不必要的混淆。

Chromium 问题:1035309

在“元素”面板中突出显示伪元素

开发者工具提高了伪元素的颜色对比度,以便您更轻松地发现它们。

突出显示伪元素

Chromium 问题:1143833

实验功能

CSS Flexbox 调试工具

Flexbox 调试工具即将推出!

首先,DevTools 现在会在“元素”面板中为应用了 display: flex 的元素显示 flex 标记。

此外,以下 flexbox 属性中添加了新的对齐图标:

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

此外,这些图标还具有情境感知功能。图标方向将根据以下条件进行调整:

  • flex-direction
  • direction
  • writing-mode

这些图标旨在帮助您更好地直观呈现网页的 Flexbox 布局。

CSS Flex 调试

以下是 Flexbox 工具功能的设计文档。我们即将添加更多功能。

欢迎试用,并告诉我们您的想法!

Chromium 问题:11440901139945

自定义和弦键盘快捷键

自上一个版本以来,DevTools 添加了对自定义键盘快捷键的实验性支持。

您现在可以在快捷方式编辑器中创建和使用和弦(也称为多按键快捷方式)。

依次前往设置 > 快捷键,将鼠标悬停在某个命令上,然后点击修改按钮(铅笔图标)以自定义和弦快捷键。

和弦键盘快捷键

Chromium 问题:174309

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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