前端利器：Chrome开发者工具的代码覆盖功能

 

代码覆盖率终于走过了实验阶段发布到了Chrome Canary，意味着它将很快达到普遍的可用性。这是一个令人兴奋的功能，在使用JavaScript和CSS时非常有用，所以我以为我会做一个快速演示，并探索它是如何有用的。

 

它有什么作用？

 

代码覆盖可以让你运行你的Web应用程序，然后针对每个JS / CSS文件，看看哪些代码在运行，哪些代码没有。

 

 

在这里，我运行了一个简单的静态网页，Chrome生成了页面上存在的CSS和JS文件的故障。右侧的栏显示每个文件的相对大小，红色表示未使用的代码，绿色显示运行的代码。

 

录制代码覆盖的工作方式类似于devtools时间轴 - 你打成记录，然后与你的站点正常交互。完成后，Chrome会进行一些计算并生成读数。在这里，我很好奇网站上有多少未使用的CSS，所以我导航到各个子页面，以确保我打到每个css“代码路径”。果然，这里有很大的改进空间，因为我的网站上的css的97％没有使用！

 

全文请点击这里