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

StackOverflow https://stackoverflow.com/questions/33242

  •  09-06-2019
  •  | 
  •  

题

我可以使用什么方法（除了试验和错误）来查找未使用的图像文件？站点中不存在的 ID 和类的 CSS 声明怎么样？

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

有帮助吗？

解决方案

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

其他提示

您无需支付任何网络服务费用或搜索插件，您已经在 Google Chrome 中按 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

enter image description here

在文件级别：

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

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

CSS 冗余检查器 是一个在本地运行的工具，您可以传递一个样式表和一个 URL 列表或一个 HTML 文件目录。以下是该工具网站上给出的描述：

一个简单的脚本，给定一个CSS样式表和一个.txt文件列出了HTML文件的URL或HTML文件的目录，将遍历所有内容，并列出样式表中的CSS语句，而HTML中从未调用过的CSS语句。

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

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

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

关联： 瓦里科内姆网

正如 Tim Murtaugh 在 A List Apart 博客文章中指出的那样，“保持 CSS 整洁的两个工具":

CSSCSS

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

与问题最相关的是：
氦气CSS

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

该工具基于 JavaScript，并从浏览器运行。

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

我似乎记得 Adob​​e Dreamweaver 或 Adob​​e Golive 都有查找孤立样式和图像的功能；现在不记得是哪个了。可能两者都有，但这些特征隐藏得很好。

顶级风格 有一套用于定位和处理孤儿类的工具。它还将为您提供有关 HTML 中 ID 和类使用位置的报告，使您可以快速打开并跳至相关标记。以下是网站上有关此功能的简介：

现场报告：请参阅您网站中使用样式的一眼。找出您应用的样式类，这些样式类未用任何样式表定义，或者查看您定义的未使用的样式类。

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

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

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

enter image description here

请注意，您还需要在开发人员工具栏的设置中启用此功能。这个功能应该会出现在官方 chrome 版本中。

enter image description here

我发现这个工具适用于所有版本的 Firefox！需要一些时间来了解它是如何工作的，但一旦开始，它看起来就相当不错了。它将保存新版本的 CSS 以及注释掉的 CSS 选择器，以便您可以在需要时快速恢复。

CSS 用法 - Firefox 插件

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

这是在 代码笔

点击 运行代码片段, ，然后单击 完整页面 去了解它。然后按照代码片段中的说明进行操作。您可以在整个页面上运行它以查看它与您的 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 等内容没有帮助，但对孤立图像和其他类型的文件有帮助。

希望能帮助到你！

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

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

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

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

编辑：您只需小心不要删除 javascript 使用的图像即可。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top