开发者工具的新变化 (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

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

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

转到 Application（应用）>存储空间，选中模拟自定义存储空间配额复选框，并 请输入任意有效数字以模拟存储空间配额。

模拟存储空间配额大小

Chromium 问题：945786、1146985

“性能”面板中记录的新 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 错误 (CORS).

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

这为我们接下来的增强功能奠定了基础，以便提供有关 CORS 问题！

CORS 错误

Chromium 问题：1141824

帧详情视图更新

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

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

新的 API 可用性部分会显示 SharedArrayBuffer (SAB) 和 确定它们能否使用 postMessage() 进行共享。

如果 SAB 和 postMessage() 目前可用，但 上下文未进行跨源隔离。详细了解跨域隔离及其原因 这是本文中的 SharedArrayBuffers 等功能所必需的。

跨源信息

Chromium 问题：1139899

Frame 详情视图中的新 Web Worker 信息

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

在 Application 面板中，展开包含 Web Worker 的框架，然后在 Workers 树，用于查看 Web Worker 的详情。

Web Worker 信息

Chromium 问题：1122507、1051466

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

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

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

Opener 帧详情

Chromium 问题：1107766

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

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

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

从 Service Worker 打开“网络”面板

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

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

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

Chromium 问题：1035309

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

开发者工具提高了伪元素的色彩对比度，以帮助您更好地识别它们。

突出显示伪元素

Chromium 问题：1143833

实验功能

CSS Flexbox 调试工具

即将推出 Flexbox 调试工具！

对于初学者，开发者工具现在会在 Elements 面板中为带有flex 已对它应用 display: 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、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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