Chrome DevTools: 可视化代码覆盖率

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

[[441997]]

你好,我是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/

Lighthouse Treemap

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

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

搜索Lighthouse

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

打开 Lighthouse Panel

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

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

查看树状图(View Treemap)

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

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

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

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

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

看到代码覆盖率

打开实验面板

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

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

勾选覆盖率选项

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

点击分析(reload page)

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

开始检测覆盖率

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

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

总结

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

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

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

 

责任编辑:姜华 来源: 天天Up
相关推荐

2011-11-01 10:10:48

ScriptCover

2021-12-30 11:56:27

ThreeShakinCoverage可视化

2023-10-27 08:49:00

JCovOpenJDK

2022-05-31 09:01:18

SwiftApp 项目

2012-04-11 11:21:57

ibmdw

2015-11-09 17:56:57

WebPHP函数覆盖

2019-09-25 09:20:41

谷歌代码开发者

2016-01-13 10:14:15

WebPHP函数覆盖

2011-04-25 09:49:20

代码测试

2012-09-21 10:30:56

Linux项目代码覆盖率

2022-10-21 15:29:32

5G网络

2021-10-15 13:47:19

覆盖率检测 istanbul 总代码的比例

2020-03-11 14:39:26

数据可视化地图可视化地理信息

2022-05-13 09:40:51

代码可行应用性能

2018-02-27 14:50:20

大数据公厕城市

2022-08-25 06:27:39

vivoJaCoCo代码覆盖率

2022-08-26 09:15:58

Python可视化plotly

2021-03-25 07:30:24

代码开发数据

2009-04-21 14:26:41

可视化监控IT管理摩卡

2017-10-14 13:54:26

数据可视化数据信息可视化
点赞
收藏

51CTO技术栈公众号