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

 

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

 

它有什么作用?

 

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

 

 

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

 

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

 

全文请点击这里

猜你喜欢

转载自gbin1.iteye.com/blog/2384445