题
我可以使用什么方法(除了试验和错误)来查找未使用的图像文件?站点中不存在的 ID 和类的 CSS 声明怎么样?
似乎有一种方法可以编写一个脚本来扫描站点,分析它,并查看哪些图像和样式从未加载。
解决方案
有一个 Firefox 扩展可以查找页面上未使用的 CSS 选择器。它有一个选项来抓取整个网站。3.01 版应该可以与较新版本的 Firefox 配合使用。
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
这是另一种选择。
其他提示
您无需支付任何网络服务费用或搜索插件,您已经在 Google Chrome 中按 F12 获得了该插件 (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 冗余检查器 是一个在本地运行的工具,您可以传递一个样式表和一个 URL 列表或一个 HTML 文件目录。以下是该工具网站上给出的描述:
一个简单的脚本,给定一个CSS样式表和一个.txt文件列出了HTML文件的URL或HTML文件的目录,将遍历所有内容,并列出样式表中的CSS语句,而HTML中从未调用过的CSS语句。
基本上,它可以帮助您保持 CSS 文件的相关性和紧凑性。而且这是合理的准确性。
正如 Tim Murtaugh 在 A List Apart 博客文章中指出的那样,“保持 CSS 整洁的两个工具":
CSSCS将解析您提供的任何CSS文件,并让您知道哪些规则集具有重复的声明。
与问题最相关的是:
氦气CSS
氦气是在网站上许多页面上发现未使用的CSS的工具。
该工具基于 JavaScript,并从浏览器运行。
氦气接受网站不同部分的URL列表,然后加载并解析每个页面以构建所有样式表的列表。然后,它访问URL列表中的每个页面,并检查页面上的样式表中的选择器是否使用。最后,它生成了一份报告,详细介绍了每个样式表和未发现在任何给定页面上使用的选择器。
我似乎记得 Adobe Dreamweaver 或 Adobe Golive 都有查找孤立样式和图像的功能;现在不记得是哪个了。可能两者都有,但这些特征隐藏得很好。
顶级风格 有一套用于定位和处理孤儿类的工具。它还将为您提供有关 HTML 中 ID 和类使用位置的报告,使您可以快速打开并跳至相关标记。以下是网站上有关此功能的简介:
现场报告:请参阅您网站中使用样式的一眼。找出您应用的样式类,这些样式类未用任何样式表定义,或者查看您定义的未使用的样式类。
对于剖析不熟悉的网站非常有用。
但它找不到未使用的图像。
我发现这个工具适用于所有版本的 Firefox!需要一些时间来了解它是如何工作的,但一旦开始,它看起来就相当不错了。它将保存新版本的 CSS 以及注释掉的 CSS 选择器,以便您可以在需要时快速恢复。
这个小工具为您提供了一些 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 测试环境。
要回答有关查找未使用图像文件的工具的问题,您可以使用 Xenu Link 侦探 抓取您的网站以查找您网站使用的所有图像。然后,Xenu 会提示您进行 ftp 访问,以便它可以爬行您的目录以查找孤立文件。我还没有在生产服务器上使用过它,但听起来值得研究一下。
编辑:您只需小心不要删除 javascript 使用的图像即可。