阅读 1766

Chrome 87 开发者工具新特性

  • **本文参考自：**What's New In DevTools (Chrome 87)

  • developers.google.com/web/updates…（需越墙）

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

  • 新特性一：重新开发了一套 Grid 布局调试工具

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

    • 关于这个新工具的详细文档，可查看这个链接

  • 新特性二：新增 WebAuth 调试面板

    • WebAuth 面板效果图如下

    • 在这个工具出现之前，对于 WebAuth 的调试，只能通过真实的 Authenticator 来调试 WebAuth API，现在我们可以通过这个工具虚拟一个验证器。关于这个工具的具体使用，可以查看这个链接

  • 新特性三：工具标签、面板开始支持区域移动

    • 见图

  • 新特性四：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 筛选条件

    • 如图

    • 更多的筛选条件，可以查看这个链接

  • 新特性八：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，可观看这个视频

  • 新特性九：新增一些试验性特性
    以下特性均需要开启 Settings > Experiments 下的相关选项

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

    • 2. 支持自定快捷键

      • 如图

  • 往期文档

  • 其他说明