如何在网站中找到未使用的图像和CSS样式？[副本]

Question

有没有一种方法（除了试错法）可以用来查找未使用的图像文件？对于站点中甚至不存在的ID和类的CSS声明如何？

似乎有一种方法可以编写一个脚本来扫描网站，分析它，并查看哪些图像和样式从未加载。

Answer 1

你不需要支付任何网络服务或搜索插件，你已经在谷歌浏览器F12下有了这个（检查器）->审核->删除未使用的CSS规则

截图：

更新日期：2017年6月30日

现在Chrome 59提供CSS和JS代码覆盖率。请参阅https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 2

在文件级别：

使用wget对站点进行主动搜索，然后处理http服务器日志以获取访问的文件列表，并将其与站点中的文件进行比较

差异\<（sed some_rules httpd_log|sort-u）\<（ls/var/www/whatever |排序-u）\|grep什么的

Answer 3

我似乎记得Adobe Dreamweaver或Adobe Golive都有一个功能，可以找到孤立的样式和图像；现在不记得是哪一个了。可能两者都有，但特征被很好地隐藏了起来。

Answer 4

Chrome canary版本在开发人员工具栏中有一个“CSS覆盖范围“作为实验开发人员的功能之一。此选项出现在时间轴选项卡中，可用于获取未使用CSS的列表。

请注意，您还需要在开发人员工具栏的设置中启用此功能。此功能可能会成为正式的chrome版本。

Answer 5

这个小工具为您提供了一些html使用的css规则列表。

它在这里代码笔

单击运行代码段，然后单击整页然后按照片段中的说明进行操作。您可以整页运行它，以查看它与html/cs的协同工作。

但将我的代码笔作为工具添加书签更容易。

/*CSS清洁剂说明1.将HTML粘贴到HTML窗口2.将CSS粘贴到CSS窗口5.网页结果现在以HTML使用的CSS列表结束！*/函数cssRecursive（e）{var cssList=css（e）；对于（var i=0；i<e.children.length；++i）{var childElement=e.childrens[i]；cssList=联合（cssList，cssRecursive（childElement））；}返回cssList；}函数css（a）{var sheets=document.styleSheets，o=[]；a.matches=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesElector||a.oMatches选择器；for（表中的var i）{var rules=sheets[i].rules||sheets[i].cssRules；for（规则中的var r）{if（a.matches（规则[r].selectorText））{o.push（规则[r].cssText）；}}}返回o；}函数并集（x，y）{返回唯一（x.concat（y））；};函数唯一（x）{返回x.filter（函数（元素，索引）{return x.indexOf（元素）==索引；});};document.write（“<br/><hr/><code style='background-color:白色；color:黑色；'>”）；var allCss=cssRecursive（document.body）；对于（var i=0；i<所有Css.length；++i）{var cssRule=所有Css[i]；document.write（cssRule+“<br/>”）；}document.write（“</code>”）；