Chrome 88 开发者工具新特性

新特性一：开发者工具启动速度大幅提升

其实开发者工具本身也是用网页实现的，这次版本对其启动速度进行了优化，主要的提升是在 JS 的编译耗时部分，大约提升了 37%。关于具体的优化细节，Chrome 团队还将会有一篇博客做专门的介绍，可以保持关注。

新特性二：新增 CSS 角度单位可视化调试工具

效果如下

新特性三：开始支持模拟图片格式不支持的环境

在图片优化方面，Google 在早前开发了 WebP 格式，并在 Chrome 中率先实现了支持，继那之后，近期又出现了更加优秀的 AVIF 格式， 考虑到不同浏览器的实现情况不一致，为了方便开发者调试在各种环境下的图片加载情况，在这次的版本中新增了模拟这两种图片格式不支持的选项。下图是一个示例：
在上图中，AVIF 格式被禁用了，所以当我们把光标置于 img 的 src 上时，会看到实际加载的是 WebP 格式的图片源。

新特性四：Storage 面板新增模拟储存配额大小的选项

有些 Web 程序可能会针对不同的配额大小表现不同的行为，为了方便调试这种情况，这次新增了一个模拟选项，见下图：

新特性五：Performance 面板专门为 Web Vitals 体系新增了一条时间线

• Web Vitals 是 Google 推出的一套 Web 性能关键指标体系，它包含了 FCP、LCP、LCS 等在内的一系列关键性性能指标。如果对这些指标的含义，或者对这个体系还不了解，可以查看这个链接： web.dev/vitals

• 这次特意新增时间线，足以看出这个体系的重要性。

新特性六：Network 面板的 Status 列开始标记出 CORS 相关的错误

新特性七：Frame 面板相关的更新

1. 支持查看 Frame 的 "Cross-Origin Isolated" 状态信息

一个页面是否处于 Cross-Origin Isolated (跨源隔离）状态，具体由 COOP（Cross-Origin Opener Policy） 和 COEP (Cross-Origin Embedder Policy) 两个政策共同决定。 上图中显示 Cross-Origin Isolated 为 No，表示改页面并没有实施跨源隔离，而在不久后，未实现跨源隔离的页面将无法在使用 window.postMessage() 进行跨页面通信时使用 SharedArrayBuffer 来传递消息，除此之外还会影响其他 API 的使用，所以上图中第二个箭头所指部分还有一个警告提醒你这一点。

2. 支持查看 Frame 的 Web Worker 信息

3. 支持查看 Frame 的 Opener
这个视图查看的其实就是选中的 Frame 的 window.opener
新特性八：单独查看 Service Worker 发出的网络请求
在 Service Workers 视图中新增了一个 “Network requests” 链接，点击会打开 Network 面板，并通过“is:service-worker-intercepted”这个筛选条件筛选出所有 Service Worker 相关的网络请求
新特性九：Network 新增了两种复制选项
1. Copy Value
这次的版本，在 Network 面板中多处地方的右键菜单中新增了“Copy Value”菜单项：在请求、响应头上执行这个菜单，可以直接复制选中的 Header 的值部分；如果请求体、响应体中是 JSON 数据，执行此菜单，复制的则是选中节点的值。
2. Copy stacktrace
在一条网络请求记录上右键，执行 Copy stacktrace 可以复制发起这条请求的调用栈信息
新特性十：支持光标悬浮查看 Wasm 变量值
如图
新特性十一：一致性的信息大小计算和表示方法

• 在以往的版本中，涉及到信息大小时，会出现所表示的单位和实际计算过程中采用的单位不一致的地方，如Network 面板中展示用的是 kB (=1000 bytes)，但实际执行计算采用的是 KiB (=1024 bytes) 单位，显然这会给人造成误解和混淆。以后将统一为 KiB。

往期文档

• Chrome 87 开发者工具新特性
  mubu.com/doc/pKlATdr…

• Chrome 87 新特性
  暂未写作完成，待补充文章链接

• Chrome 更新日志目录
  mubu.com/doc/AObcWUR…