阅读 205

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,并告诉你最大的性能优化项是消除阻塞式的资源。如下图:
    • 现在,借助这项新特性,你可以通过调出 Request Blocking 面板,将存在性能问题的资源屏蔽,然后再次执行一次 Audits,以此快速初步得出优化后的性能提升。如下图:
    • 除了这个例子外还有许多应用场景,如可以通过 Local Overrides 面板给 script 标签添加 async 属性进行性能对比,读者可以自行尝试。
    • 相关链接:
  • 新特性二:支持对 Payment Handler 进行调试
    • Application 面板中的 Background Services 标签下现在新增了 Payment Handler 事件的记录,如下图:
    • 注意:
      • 1. 点击录制按钮(红色圆形按钮),会记录 3天内发生的 Payment Handler 事件——即便你关闭了开发者工具。
      • 2. 如果 Payment Handler 事件发生于其他源(Origin)下,记得勾选 Show events from others domains选项。
      • 录制后的效果如下图:
  • 新特性三:Audits 面板所使用的 Lighthouse 已经更新至了 5.2 版本
    • Audits 面板实际运行的就是 Lighthouse 工具,在 Lighthouse 5.2 中,新增了 Third-Party Usage 诊断项,他可以给出你的网页应用请求了多少第三方代码,以及他们在页面加载过程中所占用的主线程时间。如下图:
    • 注意:
      • 1. 其实在 Chrome 77 中就已经采用了 Lighthouse 5.2,只是没有在 Chrome 77 的更新日志中做介绍,在此补上。
    • 相关链接
  • 新特性四:Performance 面板的时间线上新增 Largest Contentful Paint 指标标记
    • 如下图:
    • 我们在做性能分析时,Larget Contentful Paint (LCP)是一项非常重要的指标,它的含义是在可视的 Viewport 中最大的内容性元素绘制的开始时间及所用时长
    • 我们可以点击时间线上的 LCP 标识,然后将光标悬浮在下面 Summary 标签中的 Related Node 上,以此查看最大的内容性元素到底是哪个;如果接着再点击该元素,还可以直接定位到 Element 面板中的 DOM 树上。
    • 相关链接
  • 新特性五:支持直接在开发者工具主菜单中反馈开发者工具的问题
    • 反馈路径:Main Menu > Help > Report a DevTools issue。如下图:

      可以反馈任何开发者工具所存在的问题,以及你的建议,也可以通过此来提出新特性请求。
  • 关联文档
  • 其他说明
    • 本文同时发布与于
    • 作者:西楼听雨(微信名 t.t.)
      我就是21世纪最伟大的发明​​
    • 打赏:你的一枚硬币,造就的却可能是下一代比尔·盖茨
    • 联系 & 交流 & 聘用


关注下面的标签,发现更多相似文章
评论