Chrome 88 开发者工具新特性

时间:2021-1-8 作者:admin

本文参考自: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 格式, 考虑到不同浏览器的实现情况不一致,为了方便开发者调试在各种环境下的图片加载情况,在这次的版本中新增了模拟这两种图片格式不支持的选项。下图是一个示例:

新特性四: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” 状态信息

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

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

3. 支持查看 Frame 的 Opener
这个视图查看的其实就是选中的 Frame 的 window.opener

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

往期文档

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。