首页 编程前端开发正文

利用Chrome浏览器的开发人员工具Coverage 快速搜索出网页未用的CSS与JS码

📅12-07 10:18 星期一 📄594 字

利用Chrome浏览器的开发人员工具Coverage 快速搜索出网页未用的CSS与JS码

当在设计网页时,为了测试一些网页特效,就在会网页中,加入CSS与Javascript原始码,有时东加一点西加一点,每当页面设计完时,CSS码都五、六千行跑不掉,虽然五、六千行,文字档并不会太大,但在网页载入时,还是会有些影响,因此在网页上线时,就会开始为网页进行优化,将一些没有用的废码给清除掉,这时就得依靠自己的超强记忆,才能将未使用的CSS与JS码给清除,相信这对许多朋友来说,有一定的难度。

因此这时候可以通过Chrome内置的开发人工具,将网页中未使用的CSS与JS给纠出来,并且将它标示出来,如此一来就有助于将废码给清除啦!至于要怎用,现在就一块来看看吧!

Step1

首先,先开启「开发人工具」,接着再按Ctrl+Shift+P,再输入「Coverage」。

利用Chrome浏览器的开发人员工具Coverage 快速搜索出网页未用的CSS与JS码

Step2

接着在下方就会看到一个重整图标,再用鼠标点一下。

利用Chrome浏览器的开发人员工具Coverage 快速搜索出网页未用的CSS与JS码

Step3

这时网页就会重新整理,同时下方就会看到,目前网页中的CSS与JS的使用状况,而灰色的百分比,表示该CSS的使用量有多少,再点选该CSS当呈反灰状态后,上方就会将该CSS未使用的码,左边用红线标示出来,这时就可自行判断该码是否有用,而通过此方法,只会针对网页中既有的类别名称进行扫描扫描,若是关联性与动态载入,就会标示为未用,因此在删除原始码,得特别留意。
利用Chrome浏览器的开发人员工具Coverage 快速搜索出网页未用的CSS与JS码

Step4

除了CSS以外,Javascript也可以喔!因此下回当网页设计完毕, 不妨可试试此方法喔!利用Chrome浏览器的开发人员工具Coverage 快速搜索出网页未用的CSS与JS码