阅读 273

Chrome 78 开发者工具新特性

  • 本文参考自:What's New In DevTools (Chrome 78)

  • developers.google.com/web/updates…

  • 新特性一:Audits 面板也开始支持调出其他小面板以便于调试

    • 在 Chrome 78 之前,我们是不能在 Audits 面板中调出如 Request Blocking、Local Overrides 这类小面板的。现在有了这个新功能,我们可以对我们的网页应用做更多的测量和诊断。

    • 例如,假设你对某个网页做了一次 Audits,该 Audits 报告中显示该网页的性能得分为 70,并告诉你最大的性能优化项是消除阻塞式的资源。如下图:

      ![](https://user-gold-cdn.xitu.io/2020/1/19/16fbc170b5b448ff?w=1500&h=702&f=png&s=217611)
      ![](https://user-gold-cdn.xitu.io/2020/1/19/16fbc170bcde7b59?w=1500&h=728&f=png&s=252691)
    • 现在,借助这项新特性,你可以通过调出 Request Blocking 面板,将存在性能问题的资源屏蔽,然后再次执行一次 Audits,以此快速初步得出优化后的性能提升。如下图:

      ![](https://user-gold-cdn.xitu.io/2020/1/19/16fbc170b7d6b91a?w=1500&h=879&f=png&s=268042)
    • 除了这个例子外还有许多应用场景,如可以通过 Local Overrides 面板给 script 标签添加 async 属性进行性能对比,读者可以自行尝试。

    • 相关链接:

  • 新特性二:支持对 Payment Handler 进行调试

    • Application 面板中的 Background Services 标签下现在新增了 Payment Handler 事件的记录,如下图:

      ![](https://user-gold-cdn.xitu.io/2020/1/19/16fbc170bd370989?w=1500&h=818&f=png&s=269971)
    • 注意:

      • 1. 点击录制按钮(红色圆形按钮),会记录 3天内发生的 Payment Handler 事件——即便你关闭了开发者工具。

      • 2. 如果 Payment Handler 事件发生于其他源(Origin)下,记得勾选 Show events from others domains选项。

      • 录制后的效果如下图:

        ![](https://user-gold-cdn.xitu.io/2020/1/19/16fbc170bbd9793d?w=1500&h=686&f=png&s=429619)
  • 新特性三:Audits 面板所使用的 Lighthouse 已经更新至了 5.2 版本

    • Audits 面板实际运行的就是 Lighthouse 工具,在 Lighthouse 5.2 中,新增了 Third-Party Usage 诊断项,他可以给出你的网页应用请求了多少第三方代码,以及他们在页面加载过程中所占用的主线程时间。如下图:

      ![](https://user-gold-cdn.xitu.io/2020/1/19/16fbc170c7c4ada7?w=1504&h=1074&f=png&s=313247)
    • 注意:

      • 1. 其实在 Chrome 77 中就已经采用了 Lighthouse 5.2,只是没有在 Chrome 77 的更新日志中做介绍,在此补上。
    • 相关链接

  • 新特性四:Performance 面板的时间线上新增 Largest Contentful Paint 指标标记

    • 如下图:

      ![](https://user-gold-cdn.xitu.io/2020/1/19/16fbc170f508fa9b?w=1570&h=1216&f=png&s=538379)
    • 我们在做性能分析时,Larget Contentful Paint (LCP)是一项非常重要的指标,它的含义是在可视的 Viewport 中最大的内容性元素绘制的开始时间及所用时长

    • 我们可以点击时间线上的 LCP 标识,然后将光标悬浮在下面 Summary 标签中的 Related Node 上,以此查看最大的内容性元素到底是哪个;如果接着再点击该元素,还可以直接定位到 Element 面板中的 DOM 树上。

    • 相关链接

  • 新特性五:支持直接在开发者工具主菜单中反馈开发者工具的问题

    • 反馈路径:Main Menu > Help > Report a DevTools issue。如下图:

      ![](https://user-gold-cdn.xitu.io/2020/1/19/16fbc170f58ae591?w=1300&h=982&f=png&s=318323)

      可以反馈任何开发者工具所存在的问题,以及你的建议,也可以通过此来提出新特性请求。

  • 关联文档