本文参考自:What's New In DevTools (Chrome 88)
developers.google.com/web/updates…
编注:新特性都是先在 Chrome 的 Canary、Beta 通道中发布的,要想第一时间体验新特性,请下载 Canary 或 Beta 通道版本的 Chrome。本文中的所有链接都是需要越墙的,请自备通过方式。
新特性一:开发者工具启动速度大幅提升
其实开发者工具本身也是用网页实现的,这次版本对其启动速度进行了优化,主要的提升是在 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 相关的错误
以往,对于 CORS 相关的错误,Status 列只会显示 “(failed)",不会有更精准的描述,这次的的版本,不仅会对 CORS 相关的错误作出精准描述——显示为“CORS error”,光标浮上去还会显示更详细的错误原因:
新特性七:Frame 面板相关的更新
1. 支持查看 Frame 的 "Cross-Origin Isolated" 状态信息
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…