chrome87版本iframe页面空白_Chrome 87 开发者工具新特性

来源 | juejin.im/post/6880443448210489352
作者 | 西楼听雨

本文参考自：What's New In DevTools (Chrome 87)developers.google.com/web/updates/2020/10/devtools

编注：新特性都是先在 Chrome 的 Canary、Beta 通道中发布的，要想第一时间体验新特性，请下载 Canary 或 Beta 通道版本的 Chrome。本文中的所有链接都是需要越墙的，请自备通过方式。

新特性一：

重新开发了一套 Grid 布局调试工具

新的 Grid 布局调试工具效果图如下

关于这个新工具的详细文档，可查看https://developers.google.com/web/tools/chrome-devtools/css/grid

新特性二：

新增 WebAuth 调试面板

WebAuth 面板效果图如下

在这个工具出现之前，对于 WebAuth 的调试，只能通过真实的 Authenticator 来调试 WebAuth API，现在我们可以通过这个工具虚拟一个验证器。关于这个工具的具体使用，可以查看https://developers.google.com/web/tools/chrome-devtools/webauthn

新特性三：

工具标签、面板开始支持区域移动

见图

新特性四：

Elements 面板相关更新

1. Styles 区域右上角新增一个收缩按钮，点击可以调出一个侧边栏展示 Computed 样式，如图

2. Computed 样式面板开始支持按分类查看 CSS 属性

新特性五：

Lighthouse 更新到了 6.4 版本

新版本效果图如下

大致新增以下几个报告项：

1. Preload fonts：报告是否所有使用了 font-display: optional 的字体文件是否都有预加载成功

2. Valid sourcemaps：报告页面上非第三方 JS 的 sourcemap 文件是否正确

3. Large JavaScript library(实验性特性)：报告页面上的大型 JS 库(比如：moment.js)

关于这个版本的所有更新，可以查看他的更新日志

新特性六：

在 Performance 标签中的事件线(Timings)上将标记出 performance.mark() 事件

如图

新特性七：

Network 面板新增 resource-type、url 筛选条件

如图

更多的筛选条件，可以查看https://developers.google.com/web/tools/chrome-devtools/network/reference#filter-by-property

新特性八：

Application 面板中 Frames 子面板相关的更新

1. 支持展示 COEP 和 COOP 的报告端

HTPP 新增了一个叫做 Report-To 的头部，当你的网站中出现违背 COEP (Cross-Origin Embedder Policy)和 COOP(Cross-Origin Opener Policy)的情况时，浏览器会向这个头部指定的地址发送报告

关于如何开启 COEP 和 COOP 来使你的网站实现跨源隔离(cross-origin isolated)

2. 对于 COEP、COOP 值为 report-only 的情况，新增了标记展示

要防止信息泄漏以及如何开启 COOP 和 COEP，可观看这个视频

https://youtu.be/XLNJYhjA-0c

新特性九：

新增一些试验性特性

以下特性均需要开启 Settings > Experiments 下的相关选项

1. CSS Overview 面板中支持查看、修复色彩对比度问题

2. 支持自定快捷键

如图