chrome开发者工具中Coverage使用方法

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

    Coverage使用方法

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

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

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

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