Chrome DevTools: 可视化代码覆盖率

时间:2022-09-16 17:45:09

Chrome DevTools: 可视化代码覆盖率

你好,我是TianTianUp。

今天分享一些Chrome DevTools开发调试Tips。

可视化分析JavaScript包,你可能会想到 webpack-bundle-analyzer,诸如此类的可视化分析工具太多了,可以参考:

https://juejin.cn/post/6844904056985485320

如果想要分析一些线上JavaScript bundles,这个时候我们需要借助Chrome DevTools。

Chrome DevTools 是辅助开发者进行 Web 开发的重要调试工具,学会合理利它,还是能提高不是效率的,今天介绍一下如何利用它来可视化分析 JavaScript bundles。

设置用户界面语言

基于实际开发,我的Chrome DevTools已经开启中文版用户界面语言,大大减少了一些阅读成本。

忘记这里是Chrome 94版本开启的 langues功能,版本过低的话,可以升级到94版本,

Chrome 94版本新功能预览:

https://developer.chrome.com/en/blog/new-in-devtools-94/

Chrome DevTools: 可视化代码覆盖率

Lighthouse Treemap

Lighthouse Treemap 显示了 JavaScript bundles的可视化 。它与源映射兼容,非常适合理解页面使用的大型 JavaScript 模块。它还可以可视化未使用的字节。

接下来,讲一讲如何打开这个功能:

搜索Lighthouse

打开 DevTools,使用快捷键Cmd + Shift + P并搜索Lighthouse。

Chrome DevTools: 可视化代码覆盖率

打开 Lighthouse Panel

点击后,面板是这样子的:

Chrome DevTools: 可视化代码覆盖率

接下来我们需要勾选第一个选项,性能(Generate report),这里面还有其他的选择,比如是移动端设备,还是桌面端,然后点击生成报告。

查看树状图(View Treemap)

下滑生成报告后,找到View Treemap:

Chrome DevTools: 可视化代码覆盖率

点击查看,就能可视化看到结果:

Chrome DevTools: 可视化代码覆盖率

现在可以看到灯塔树形图。此时,您可以执行以下操作:

  1. 按单个捆绑包过滤。
  2. 可视化JavaScript 文件中未使用的字节。
  3. 选择单个文件深入了解它们。
  4. 在靠近页面底部的覆盖部分查看详细的覆盖统计数据。

这里看到了未使用的字节(Unused Bytes),能不能换一种更加直观的方式来显示呢,当然有办法。

看到代码覆盖率

打开实验面板

首先打开设置,然后找到实验面板,点击 Record coverage while performance tracing, 选择启用它。

Chrome DevTools: 可视化代码覆盖率

当然,你可以选择在 chrome://flags/ 查看是有也可以开启这个实验功能。

勾选覆盖率选项

打开Pe面板,然后勾选覆盖率选项:

Chrome DevTools: 可视化代码覆盖率

点击分析(reload page)

Chrome DevTools: 可视化代码覆盖率

点击分析按钮后,在性能记录期间可以自动捕获代码覆盖率,这样子在页面加载时,代码覆盖率和性能面板记录可以帮助您深入了解性能瓶颈。

开始检测覆盖率

有了覆盖率面板后,我们需要点击开始检测覆盖率面板:

Chrome DevTools: 可视化代码覆盖率

接着拿到这里结果后,我们可以根据文件类型分析,查看哪些部分未使用,可以更加直观分析,后续这里是否可以干掉无用代码。

总结

看完后,你会掌握三个Chrome DevTools小技巧,设置用户界面语言,可视化分析JavaScript bundles,查看代码覆盖率,后者可以帮助你深入了解性能瓶颈。

不过这些小Tips都可以在Chrome DevTools学到,附上官网:

https://developer.chrome.com/docs/

原文链接:https://mp.weixin.qq.com/s/dpXUD3wzdm9Ef0-aWmNCGg