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

小开

我似乎记得 Adobe Dreamweaver 或 Adobe Golive 都有一个功能，可以同时找到孤立的样式和图像，但现在想不起来是哪个了。可能两者都有，但这些特征都被隐藏得很好。

小开

在文件级别:

使用 wget 积极地遍历站点，然后处理 http 服务器日志以获得访问的文件列表，并与站点中的文件进行区分

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

小开

你不必支付任何网络服务或搜索一个插件，你已经有这在谷歌浏览器下的 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

小开

This little tool gives you a list of the css rules in use by some html.

这是代码笔台

Click on Run code snippet, then click on Full page to get in to it. Then follow the instructions in the snippet. You can run it full page to see it work with your html / css.

But it's easier just to bookmark my code pen as a tool.

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

小开

Chrome 金丝雀版本在开发者工具栏中有一个“ CSS 覆盖范围”作为实验性开发者特性之一”的选项。这个选项出现在时间线选项卡中，可用于获取未使用的 CSS 列表。

请注意，您还需要在开发人员工具栏的设置中启用此功能。这个功能可能会使它正式发布的铬。