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

“性能”面板中记录的新 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 错误，DevTools 仅显示一般的 "(failed)" 状态。

这为我们接下来进行的更详细地提供 CORS 问题描述奠定了基础！

CORS 错误

Chromium 问题：1141824

帧详情视图更新

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

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

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

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

跨源信息

Chromium 问题：1139899

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

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

在 Application 面板中，展开包含 Web 工作器的帧，然后在 Workers 树下选择一个工作器以查看 Web Worker 的详情。

Web Worker 信息

Chromium 问题：1122507、1051466

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

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

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

Opener 帧详情

Chromium 问题：1107766

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

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

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

从 Service Worker 打开“网络”面板

Chromium 问题：不适用

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

复制属性值

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

复制属性值

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

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

Chromium 问题：1132084

复制网络发起程序的堆栈轨迹

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

复制堆栈轨迹

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 浏览器 111

Chrome 浏览器 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 入门指南

Chrome 浏览器 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59