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

Jecelyn Yeen

加快了开发者工具启动速度

现在，开发者工具在 JavaScript 编译方面的启动速度提高了约 37%（从 6.9 秒降至 5 秒）！🎉

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

我们即将发布一篇工程博客文章，详细说明实现过程。敬请期待！

Chromium 问题：1029427

全新的 CSS 角度可视化工具

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

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

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

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>

打开 Rendering 标签页，选择“Disable AVIF image format”，然后刷新页面。将鼠标悬停在 img src 上。当前图片 src (currentSrc) 现在是后备 WebP 图片。

Chromium 问题：1130556

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

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

依次前往 Application > Storage，选中 Simulate custom storage quota 复选框，然后输入任意有效数字来模拟存储空间配额。

Chromium 问题：945786、1146985

“性能”面板记录中的新 Web Vitals 轨道

性能记录现在可以选择显示 Web 指标信息。

记录加载性能后，在“性能”面板中选中网页指标复选框，即可查看新的“网页指标”轨道。

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

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

Chromium 问题：不适用

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

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

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

这为我们下一步增强功能奠定了基础，以便更详细地描述 CORS 问题！

Chromium 问题：1141824

帧详情视图更新

“框架详细信息”视图中的跨源隔离信息

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

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

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

Chromium 问题：1139899

“帧详情”视图中的新 Web Worker 信息

开发者工具现在会在创建专用 Web 工作器的框架下显示这些工作器。

在应用面板中，展开包含 Web Worker 的帧，然后选择工作器树下的某个工作器，以查看该 Web Worker 的详细信息。

Chromium 问题：1122507、1051466

显示已打开窗口的打开器框架详细信息

您现在可以查看有关哪个框架导致打开另一个窗口的详细信息。

在 Frames 树下选择一个已打开的窗口，即可查看该窗口的详细信息。点击 Opener Frame 链接，即可在“元素”面板中显示 opener。

Chromium 问题：1107766

从“Service Worker”窗格中打开“网络”面板

通过新的网络请求链接查看所有 Service Worker (SW) 请求路由信息。这为开发者在调试软件时提供了更多背景信息。

依次前往应用 > 服务工作线程，然后点击某个服务工作线程的网络请求。底部面板中会打开网络面板，其中显示所有与 Service Worker 相关的请求（网络请求按 "is:service-worker-intercepted" 过滤）。

Chromium 问题：不适用

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

复制属性值

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

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

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

Chromium 问题：1132084

复制网络启动器的堆栈轨迹

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

Chromium 问题：1139615

Wasm 调试更新

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

在断点处暂停时，如果将鼠标悬停在 WebAssembly (Wasm) 反汇编中的变量上，开发者工具现在会显示该变量的当前值。

在 Sources（来源）面板中，打开一个 Wasm 文件，放置一个断点，然后刷新页面。将光标悬停在变量上即可查看相应值。

Chromium 问题：1058836、1071432

在控制台中评估 Wasm 变量

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

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

Chromium 问题：1127914

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

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

Chromium 问题：1035309

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

开发者工具增加了伪元素的色彩对比度，以帮助您更好地发现它们。

Chromium 问题：1143833

实验功能

CSS Flexbox 调试工具

Flexbox 调试工具即将推出！

首先，开发者工具现在会在“元素”面板中为应用了 display: flex 的元素显示 flex 徽章。

除此之外，还在以下 flexbox 属性中添加了新的对齐图标：

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

此外，这些图标还具有情境感知功能。系统会根据以下因素调整图标方向：

• flex-direction
• direction
• writing-mode

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

如需查看 Flexbox 工具功能的设计文档，请点击此处。我们很快就会添加更多功能。

欢迎试用，并告诉我们您的想法！

Chromium 问题：1144090、1139945

自定义组合键键盘快捷键

自上个版本以来，开发者工具新增了对自定义键盘快捷键的实验性支持。

您现在可以在快捷键编辑器中创建组合键（也称为多按键快捷键）。

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

Chromium 问题：174309

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容。