详解JS 和CSS 代码利用率统计利器Coverage以及高版本chrome中coverage的一个致命问题

在做前端性能测试时较大的文件需要更多时间来下载，并可能导致我们的网站加载缓慢，从而导致用户体验欠佳。因此删除JS和CSS中未被使用的代码就很有必要了！Coverage工具就可以非常方便的实现这一需求。

Coverage使用方法

Coverage 是chrome开发者工具中的一个功能，从字面意思上就可以知道它是可以用来检测代码在网站运行时有哪些js和css是已经在运行，而哪些js和css是还没有用到的。我们可以在Chrome的开发者工具的source面板中将其启动，选择下图中的三个点图标，然后在菜单中选择Coverage即可。

动Coverage后，点击下图中的刷新按钮，就可以对当前页面中所涉及的JS和CSS脚本进行代码覆盖率统计工作。

具体统计情况如下图所示，最右边显示的是我们加载的css和js文件数量，红色区域表示已运行的代码，而蓝色表示已加载但未运行的代码。

通过coverage可用来发现页面中尚未用到的js 和 css代码，我们可以为用户只提供必要的代码，删除没有用到的代码，这样就可以提升页面的性能，这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用的。

高版本chrome中coverage的问题

在这里给大家分享一个我遇到的一个难缠的问题

在chrome 116的source面板中，设置pretty print方式显示代码时，无法完全显示具体的代码利用率，即左侧的红蓝线条会出现展示缺失（具体原因暂时未知），如上图所示。

但是在chrome 90版本中这个问题是可以避免的，如下图所示，我们可以清晰的看到哪些代码执行了（蓝色），哪些代码没有执行（红色），所以想具体查看代码利用率的同学使用chrome 90版本即可。

chrome 90 版本下载链接如下：

https://download.csdn.net/download/liwenxiang629/88248901

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题！如果文章帮到了您，劳烦点赞、收藏、转发！您的鼓励是我不断更新文章最大的动力！