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 属性进行性能对比，读者能够自行尝试。
  • 相关连接：
    • blocking the requests for the render-blocking scripts（如何阻断请求）
      web.dev/render-bloc…
    • 本节中的 Demo 应devtools.glitch.me/wndt78/mult…
    • Request Blocking（Request Blocking 面板的使用）
      developers.google.com/web/updates…
    • Local Overrides（Local Overrides 面板的使用）
      developers.google.com/web/updates…
• 新特性二：支持对 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 的更新日志中作介绍，在此补上。
  • 相关连接
    • Optimize your third-party resources（如何优化第三方资源）
      web.dev/fast#optimi…
• 新特性四：Performance 面板的时间线上新增 Largest Contentful Paint 指标标记
  • 以下图：
    
  • 咱们在作性能分析时，Larget Contentful Paint （LCP）是一项很是重要的指标，它的含义是在可视的 Viewport 中最大的内容性元素绘制的开始时间及所用时长
  • 咱们能够点击时间线上的 LCP 标识，而后将光标悬浮在下面 Summary 标签中的 Related Node 上，以此查看最大的内容性元素究竟是哪一个；若是接着再点击该元素，还能够直接定位到 Element 面板中的 DOM 树上。
  • 相关连接
    • analyzing load performance in the Performance panel（如何经过 Performance 面板作性能调试）
      developers.google.com/web/tools/c…​​
    • Largest Contentful Paint（LCP 指标介绍）
      web.dev/largest-con…
• 新特性五：支持直接在开发者工具主菜单中反馈开发者工具的问题
  • 反馈路径：Main Menu > Help > Report a DevTools issue。以下图：
    
    
    能够反馈任何开发者工具所存在的问题，以及你的建议，也能够经过此来提出新特性请求。
• 关联文档
  • Chrome 76 开发者工具新特性
    mubu.com/doc/7FnUFrg…
  • Chrome 76 新特性
    待更新....
  • Chrome 更新日志目录
    mubu.com/doc/AObcWUR…
• 其余说明
  • 本文同时发布与于
    • 幕布平台：mubu.com/doc/vNGFvsM…
    • 掘金平台：juejin.im/post/5cfd47…
  • 做者：西楼听雨（微信名 t.t.）
    我就是21世纪最伟大的发明​​
  • 打赏：你的一枚硬币，造就的却多是下一代比尔·盖茨
    
  • 联系 & 交流 & 聘用