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

有没有方法(试验和错误除外)我可以用来查找未使用的图像文件？如果网站中甚至不存在ID和类的CSS声明怎么样？

似乎可能有一种方法可以编写一个脚本来扫描网站,对其进行分析,并查看从未加载的图像和样式.

1> Șerban Ghiță..：

---

您无需支付任何网络服务或搜索插件,您已经在F12的谷歌浏览器中使用此服务 (Inspector)->Audits->Remove unused CSS rules

截图:

更新:2017年6月30日

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

---

太好了,谢谢.请注意响应式网站,因为您必须重新加载不同大小才能知道这些样式中的一个或多个未被使用.它仅检测正在查看的视口的样式.

---

很好用现有的工具,但这只扫描加载的页面,而不是整个网站？

---

这很棒,感谢小费!

---

对于在单个文件中压缩所有css的站点,这可能不是一个可行的选项.如果您审核某个特定页面,它将显示许多未使用的CSS,但这些样式将用于其他页面.因此,在我看来,审核单页并不是一个好选择.

2> Patrick McEl..：

---

有一个Firefox扩展,可以在页面上找到未使用的CSS选择器.它有一个蜘蛛整个网站的选项.版本3.01应该适用于较新版本的Firefox.

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

这是另一种选择.

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

---

两者都没有在2018年工作。

---

是的,这只适用于较旧版本的FireFox,但是:[CSS Usage - Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/css-usage/)是相同的,也适用于最新版本.

3> BCS..：

---

在文件级别:

使用wget积极地蜘蛛网站,然后处理http服务器日志以获取访问的文件列表,将其与站点中的文件区分开来

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

---

+1额外的命令行geekiness!

---

mirror wget选项是自动修剪未引用和未使用文件的好方法,即`wget -m `.首先应该从未使用的选择器中删除样式表 - 这看起来像是自动完成任务的一个很好的候选者:https://developers.google.com/speed/pagespeed/psol

4> True Soft..：

---

CSS Redundancy Checker是一个在本地运行的工具,您可以传递样式表以及URL列表或HTML文件目录.以下是该工具网站上的说明:

一个简单的脚本,给定一个CSS样式表和一个列出HTML文件的URL的.txt文件,或HTML文件的目录,将迭代它们并在样式表中列出从未在HTML中调用的CSS语句.

基本上,它可以帮助您保持CSS文件的相关性和紧凑性.而且它相当准确.

5> mg1075..：

---

正如Tim Murtaugh在A List Apart博客文章中所说," 保持CSS清洁的两个工具 ":

csscss

csscss将解析您提供的任何CSS文件,并让您知道哪些规则集具有重复的声明.

与问题最相关:
helium-css

Helium是一种在网站上的许多页面上发现未使用的CSS的工具.

该工具是基于javascript的,并从浏览器运行.

Helium接受站点不同部分的URL列表,然后加载并解析每个页面以构建所有样式表的列表.然后,它访问URL列表中的每个页面,并检查样式表中找到的选择器是否在页面上使用.最后,它生成一个报告,详细说明每个样式表和未在任何给定页面上使用的选择器.