此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

开发者工具的启动速度更快

就 JavaScript 编译而言，开发者工具现在的启动速度加快了约 37%（从 6.9 秒缩短到了 5 秒）！🎉

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

即将发布一篇工程博文，详细说明此实现。敬请期待！

Chromium 问题：1029427

全新的 CSS 角度可视化工具

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

CSS 角度

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

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

Chromium 问题：1126178、1138633

模拟不受支持的映像类型

开发者工具在“Rendering”标签页中添加了两个新模拟，可让您停用 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

“性能”面板“录制内容”中新增了网页指标通道

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

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

该通道目前会显示网页指标信息，例如 First Contentful Paint (FCP)、Largest Contentful Paint (LCP) 和 Layout Shift (LS)。

请访问 web.dev/vitals，详细了解如何利用 Web Vitals 指标优化用户体验。

网页指标测试通道

Chromium 问题：不适用

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

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

在网络面板中，观察失败的 CORS 网络请求。状态列显示 CORS 错误。将鼠标悬停在错误上，提示工具现在会显示错误代码。以前，开发者工具只会为 CORS 错误显示常规“（失败）”状态。

这为我们接下来的改进奠定了基础，以更详细地说明 CORS 问题！

CORS 错误

Chromium 问题：1141824

帧详情视图更新

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

跨域隔离状态现在会显示在安全和隔离部分下。

新的 API 可用性部分显示了 SharedArrayBuffer (SAB) 的可用性，以及是否可以使用 postMessage() 进行共享。

如果 SAB 和 postMessage() 当前可用，但上下文未进行跨源隔离，系统会显示弃用警告。如需详细了解跨域隔离以及为什么必须对 SharedArrayBuffers 等功能使用跨域隔离，请参阅这篇文章。

跨域信息

Chromium 问题：1139899

框架详情视图中的新 Web Worker 信息

现在，开发者工具会在创建专用 Web Worker 的框架下显示它们。

在 Application 面板中，展开包含 Web Worker 的框架，然后在 Workers 树下选择一个 worker 以查看 Web Worker 的详细信息。

Web Worker 信息

Chromium 问题：1122507、1051466

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

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

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

Opener 框架详细信息

Chromium 问题：1107766

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

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

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

从 Service Worker 打开 Network 面板

Chromium 问题：不适用

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

复制属性值

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

复制属性值

在 Network 面板中，点击网络请求以打开 Headers 窗格。右键点击以下部分下的某个属性：Request payload (JSON) Form Data Query String Parameters Request Headers Response Headers

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

Chromium 问题：1132084

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

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

复制堆栈轨迹

Chromium 问题：1139615

Wasm 调试更新

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

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

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

在鼠标悬停时预览 Wasm 变量

Chromium 问题：1058836、1071432

在控制台中评估 Wasm 变量

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

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

在控制台中评估 Wasm 变量

Chromium 问题：1127914

使用一致的文件/内存大小测量单位

现在，开发者工具一直使用 kB 来显示文件/内存大小。以前，开发者工具中混合了 kB（1000 字节）和 KiB（1024 字节）。例如，Network 面板之前使用“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 布局。

CSS Flex 调试

您可以查看 Flexbox 工具功能的设计文档。我们很快就会添加更多功能。

试用一下此功能，然后告诉我们你的想法！

Chromium 问题：1144090、1139945

自定义和弦键盘快捷键

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

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

依次转到设置 > 快捷键，将光标悬停在某个命令上，然后点击编辑按钮（铅笔图标），即可自定义和弦快捷键。

和弦键盘快捷键

Chromium 问题：174309

下载预览渠道

您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。