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

有没有可以用来查找未使用的图像文件的方法（反复试验除外）？站点中甚至不存在的ID和类的CSS声明如何？

似乎可以编写一种脚本来扫描站点，对其进行概要分析并查看从未加载过的图像和样式，这似乎是一种方法。

有有一个Firefox扩展程序 发现在页面上找到未使用的CSS选择器。它有可以选择对整个站点进行爬网。版本3.01应该 可以使用较新版本的Firefox。

http://www.brothercake.com/dustmeselectors/

这是另一个选择：

https://addons.mozilla.org/zh-CN/firefox/addon/css-usage/

您无需支付任何网络服务或搜索插件，您已经在F12下的Google Chrome浏览器中拥有了该插件 (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

在文件级别：

使用wget积极地抓取站点，然后处理http服务器日志以获取访问的文件列表，并将其与站点中的文件进行比较

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

CSS Redundancy Checker是您在本地运行的工具，您可以传递样式表以及URL列表或HTML文件目录。这是该工具网站上的说明：

给定一个CSS样式表和一个列出HTML文件URL的.txt文件或HTML文件目录的简单脚本，将对所有脚本进行迭代，并列出样式表中从未在HTML中调用的CSS语句。

基本上，它可以帮助您保持CSS文件的相关性和紧凑性。这是相当准确的。

正如Tim Murtaugh在A List Apart博客文章“ 保持CSS清洁的两种工具 ”中指出的那样：

csscss

csscss将解析您提供的所有CSS文件，并让您知道哪些规则集具有重复的声明。

与此问题最相关的是：
氦-css

氦气是一种用于发现网站上许多页面上未使用的CSS的工具。

该工具基于javascript，可从浏览器运行。

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

我似乎想起了Adobe Dreamweaver或Adobe Golive都具有查找孤立样式和图像的功能。现在不记得哪个了。可能两者兼而有之，但这些功能是隐藏的。

TopStyle有一套用于查找和处理孤立类的工具。它还将为您提供有关HTML中使用ID和类的位置的报告，从而使您可以快速打开并跳到相关的标记。这是网站上有关此功能的简介：

网站报告：一目了然，您的网站中使用了哪些样式。找出您在何处应用了任何样式表中未定义的样式类，或查看未定义的样式类。

对解剖不熟悉的网站非常有用。

但是，它找不到未使用的图像。

Chrome Canary构建在开发人员工具栏中具有“ CSS Coverage”的选项，作为实验性开发人员功能之一。该选项出现在时间轴选项卡中，可用于获取未使用的CSS的列表。

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

我发现该工具可用于所有版本的Firefox！要花一点时间来学习它是如何工作的，但是一旦启动，它看起来就相当不错了。它将使用标记为CSS选择器的新版本保存CSS，因此您可以根据需要快速还原。

CSS用法-Firefox插件

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

这是在代码笔上

点击Run code snippet，然后点击Full page进入。然后按照摘要中的说明进行操作。您可以在整个页面上运行它，以查看它可以与html / css一起使用。

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

/* CSS CLEANER INSTRUCTIONS
   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!
*/

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  }
  return cssList;
}

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
        o.push(rules[r].cssText);
      }
    }
  }
  return o;
}

function union(x, y) {
  return unique(x.concat(y));
};

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;
  });
};

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");
}
document.write("</code>");

此处列出的所有工具都非常适合CSS。我不了解Dreamweaver＆Co。但不久前我做了一个小程序来帮助我清理网站项目

查找未使用的文件

它对CSS和东西无济于事，而对孤立的图像和其他类型的文件却无济于事。

希望能帮助到你！

氦CSS是一个很好的工具。但应注意，您应该在网站的开发版本或本地版本上运行此工具。如果您在生产版本上运行此程序，您的访问者将能够看到Helium测试环境。

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

要回答有关查找未使用的图像文件的工具的问题，可以使用Xenu Link Sleuth扩展您的站点以查找站点使用的所有图像。然后Xenu提示您进行ftp访问，以便它可以对目录进行爬网以查找孤立的文件。我尚未在生产服务器上使用过它，但听起来值得研究。

编辑：您只需要注意不要删除javascript使用的图像。