124

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

似乎有一种方法可以编写一个脚本来扫描站点，对其进行分析，并查看哪些图像和样式永远不会加载。

4

5 回答 5

77

You don't have to pay any web service or search for an addon, you already have this in Google Chrome under F12 (Inspector)->Audits->Remove unused CSS rules

Screenshot:Screenshot

Update: 30 Jun, 2017

Now Chrome 59 provides CSS and JS code coverage. See https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

enter image description here

于 2012-03-05T19:23:21.593 回答
19

At a file level:

use wget to aggressively spider the site and then process the http server logs to get the list of files accessed, diff this with the files in the site

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something
于 2008-08-28T20:30:46.697 回答
3

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

于 2008-08-28T19:59:11.153 回答
2

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

在此处输入图像描述

请注意，您还需要在开发人员工具栏中的设置中启用此功能。此功能可能会发布到官方 chrome 版本。

在此处输入图像描述

于 2016-11-21T16:55:23.057 回答
1

这个小工具为您提供了一些 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>");

于 2015-09-30T20:16:14.017 回答