阅读 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. 支持自定快捷键

      • 如图
  • 往期文档

  • 其他说明