Question

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

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

Answer 1

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

截图： Screenshot

更新：2017年6月30日

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

Answer 2

有一个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/

Answer 3

在文件级别：

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

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

Answer 4

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

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

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

Answer 5

尝试WARI - Web应用程序资源检查器。

它找到未使用的图像，未使用和重复的CSS / JS。

链接：wari.konem.net

Answer 6

Tim Murtaugh在A List Apart博客文章中指出，“Two Tools to Keep Your CSS Clean”：

<强> csscss

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

与问题最相关：
的 helium-css

Helium是一种用于在Web上的许多页面上发现未使用的CSS的工具   站点。

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

然后，Helium会接受网站不同部分的网址列表   加载并解析每个页面以构建所有样式表的列表。它   然后访问URL列表中的每个页面并检查选择器   在样式表中找到的用于页面。最后，它产生了   一个报告，详细说明每个样式表和非选择器   发现在任何给定页面上使用。

Answer 7

我似乎记得Adobe Dreamweaver或Adobe Golive有一个功能可以找到孤立的样式和图像;现在不记得了。可能两者兼而有之，但这些功能都被隐藏得很好。

Answer 8

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

网站报告：一目了然样式用于您的网站。找出你在哪里应用了样式类没有任何风格的定义床单，或看看什么样的类你已经定义了没有被使用的。

非常适合剖析不熟悉的网站。

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

Answer 9

Chrome canary build在开发者工具栏中有一个选项，用于“ CSS Coverage”作为实验性开发人员功能之一。此选项出现在时间线选项卡中，可用于获取未使用的CSS列表。

请注意，您还需要在开发人员工具栏的设置中启用此功能。此功能应该可以用于官方chrome发布。

Answer 10

我发现这个工具适用于所有版本的Firefox！它需要一点时间来了解它是如何工作的，但一旦它开始它似乎相当不错。它将使用已标记的CSS选择器保存新版本的CSS，以便您可以在需要时快速恢复。

CSS Usage - Firefox Addon

Answer 11

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

此处位于Code Pen

单击运行代码段，然后单击整页以进入它。然后按照代码段中的说明操作。您可以运行整页以查看它与您的html / css一起使用。

但将代码笔作为工具加入书签会更容易。

＆＃13;

/* 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>");

＆＃13;

Answer 12

此处列出的所有工具都非常适合CSS。我不知道Dreamweaver＆amp;但是我一段时间做了一个小程序来帮我清理我的网站项目

Find-Unused-Files

它对CSS＆amp;东西，而是孤立的图像和其他类型的文件。

希望它有所帮助！

Answer 13

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

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

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

Answer 14

要回答有关找到未使用的图片文件的工具的问题，您可以使用Xenu Link Sleuth抓取您的网站以查找您网站使用的所有图片。然后Xenu会提示您进行ftp访问，以便它可以抓取您的目录以查找孤立的文件。我还没有在生产服务器上使用它，但这听起来值得研究。

编辑：你必须小心不要删除javascript使用的图像。

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

14 个答案: