-
本文参考自:What's New In DevTools (Chrome 78)
-
新特性一:Audits 面板也开始支持调出其他小面板以便于调试
-
在 Chrome 78 之前,我们是不能在 Audits 面板中调出如 Request Blocking、Local Overrides 这类小面板的。现在有了这个新功能,我们可以对我们的网页应用做更多的测量和诊断。
-
例如,假设你对某个网页做了一次 Audits,该 Audits 报告中显示该网页的性能得分为 70,并告诉你最大的性能优化项是消除阻塞式的资源。如下图:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170b5b448ff~tplv-t2oaga2asx-image.image)![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170bcde7b59~tplv-t2oaga2asx-image.image) -
现在,借助这项新特性,你可以通过调出 Request Blocking 面板,将存在性能问题的资源屏蔽,然后再次执行一次 Audits,以此快速初步得出优化后的性能提升。如下图:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170b7d6b91a~tplv-t2oaga2asx-image.image) -
除了这个例子外还有许多应用场景,如可以通过 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…
- blocking the requests for the render-blocking scripts(如何阻断请求)
-
-
新特性二:支持对 Payment Handler 进行调试
-
Application 面板中的 Background Services 标签下现在新增了 Payment Handler 事件的记录,如下图:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170bd370989~tplv-t2oaga2asx-image.image) -
注意:
-
1. 点击录制按钮(红色圆形按钮),会记录 3天内发生的 Payment Handler 事件——即便你关闭了开发者工具。
-
2. 如果 Payment Handler 事件发生于其他源(Origin)下,记得勾选 Show events from others domains选项。
-
录制后的效果如下图:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170bbd9793d~tplv-t2oaga2asx-image.image)
-
-
-
新特性三:Audits 面板所使用的 Lighthouse 已经更新至了 5.2 版本
-
Audits 面板实际运行的就是 Lighthouse 工具,在 Lighthouse 5.2 中,新增了 Third-Party Usage 诊断项,他可以给出你的网页应用请求了多少第三方代码,以及他们在页面加载过程中所占用的主线程时间。如下图:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170c7c4ada7~tplv-t2oaga2asx-image.image) -
注意:
- 1. 其实在 Chrome 77 中就已经采用了 Lighthouse 5.2,只是没有在 Chrome 77 的更新日志中做介绍,在此补上。
-
相关链接
- Optimize your third-party resources(如何优化第三方资源)
web.dev/fast#optimi…
- Optimize your third-party resources(如何优化第三方资源)
-
-
新特性四:Performance 面板的时间线上新增 Largest Contentful Paint 指标标记
-
如下图:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170f508fa9b~tplv-t2oaga2asx-image.image) -
我们在做性能分析时,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…
- analyzing load performance in the Performance panel(如何通过 Performance 面板做性能调试)
-
-
新特性五:支持直接在开发者工具主菜单中反馈开发者工具的问题
-
反馈路径:Main Menu > Help > Report a DevTools issue。如下图:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/19/16fbc170f58ae591~tplv-t2oaga2asx-image.image)可以反馈任何开发者工具所存在的问题,以及你的建议,也可以通过此来提出新特性请求。
-
-
关联文档
- Chrome 76 开发者工具新特性
mubu.com/doc/7FnUFrg… - Chrome 76 新特性
待更新.... - Chrome 更新日志目录
mubu.com/doc/AObcWUR…
- Chrome 76 开发者工具新特性