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

Jecelyn Yeen

加快了 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 问题：1126178、1138633

模拟不受支持的图片类型

开发者工具在“渲染”标签页中添加了两个新的模拟，可让您停用 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 问题：945786、1146985

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

性能记录现在提供了一个显示网页指标信息的选项。

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

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

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

Web Vitals 车道

Chromium 问题：不适用

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

现在，当网络请求因跨域资源共享 (CORS) 而失败时，开发者工具会显示 CORS 错误。

在网络面板中，观察失败的 CORS 网络请求。“状态”列显示“CORS 错误”。将鼠标悬停在错误上，提示现在会显示错误代码。之前，对于 CORS 错误，DevTools 仅显示常规 "(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 的详细信息。

Web Worker 信息

Chromium 问题：1122507、1051466

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

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

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

Opener 框架详情

Chromium 问题：1107766

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

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

转到 Application > Service Workers，点击软件的 Network requests。底部面板中会打开 Network 面板，其中会显示与所有服务工件相关的请求（网络请求会按 "is:service-worker-intercepted" 过滤）。

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

Chromium 问题：不适用

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

复制属性值

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

复制属性值

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

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

Chromium 问题：1132084

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

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

复制堆栈轨迹

Chromium 问题：1139615

Wasm 调试更新

鼠标悬停时预览 Wasm 变量值

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

在 Sources 面板中，打开 Wasm 文件、放置断点并刷新页面。将鼠标悬停在某个变量上即可查看其值。

鼠标悬停时预览 Wasm 变量

Chromium 问题：1058836、1071432

在控制台中评估 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 问题：1144090、1139945

自定义和弦键盘快捷键

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

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

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

和弦键盘快捷键

Chromium 问题：174309

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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