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

加快开发者工具启动速度

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

该团队进行了一些优化,以降低序列化、解析和 反序列化。

我们即将发布一篇工程博文,详细介绍实现方法。敬请期待!

Chromium 问题:1029427

全新 CSS 角度可视化工具

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

CSS 角度

当您网页上的某个 HTML 元素应用了 CSS 角度(例如, background: linear-gradient(angle, color-stop1, color-stop2)transform: rotate(angle)),时钟 图标。点击时钟图标切换时钟 叠加层。点击时钟的任意位置或拖动指针更改角度!

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

Chromium 问题:11261781138633

模拟不受支持的映像类型

开发者工具在“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 问题: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 错误 (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 问题:11225071051466

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

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

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 问题:10588361071432

在控制台中评估 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 问题:11440901139945

自定义和弦键盘快捷键

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

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

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

“和弦”键盘快捷键

Chromium 问题:174309

下载预览渠道

请考虑将 Chrome Canary开发者版Beta 版用作您的默认开发浏览器。通过这些预览渠道,您可以访问最新的开发者工具功能,测试先进的网络平台 API,并在用户之前发现您网站上的问题!

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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