如何在网站中find未使用的图片和CSS样式?

有没有一种工具或方法(除了试验和错误)我可以用来find未使用的图像文件? 怎么样的ID和类的CSS声明甚至不存在于网站?

似乎有可能只是蜘蛛网站,configuration文件,并看看哪些图像和样式永远不会加载。

有一个Firefox扩展可以在页面上find未使用的CSSselect器。 它有一个选项来蜘蛛整个网站。 版本3.01应该与更新版本的Firefox一起工作。

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

这是另一种select。

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

您不必支付任何networking服务或search插件,您已经在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 Redundancy Checker是您在本地运行的一个工具,您可以通过样式表以及URL列表或HTML文件目录。 以下是该工具网站上的描述:

一个简单的脚本,给定一个CSS样式表和一个.txt文件,列出HTML文件的URL或HTML文件的目录,将遍历它们并列出样式表中的CSS语句,这些语句在HTML中永远不会被调用。

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

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

它发现未使用的图像,未使用和重复的CSS / JS。

链接: wari.konem.net

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

csscss

csscss将parsing你给它的任何CSS文件,并让你知道哪些规则集有重复的声明。

最重要的问题是:
氦CSS

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

该工具是基于JavaScript的,并从浏览器运行。

Helium接受网站不同部分的URL列表,然后加载并parsing每个页面,以build立所有样式表的列表。 然后访问URL列表中的每个页面,并检查样式表中的select器是否在页面上使用。 最后,它会生成一个报告,详细说明每个样式表和在任何给定页面上都没有使用的select器。

我似乎回想起Adobe Dreamweaver或Adobe Golive具有find孤立样式和图像的function; 现在不记得了。 可能这两个,但function是隐藏的。

TopStyle有一套用于查找和处理孤儿类的工具。 它还会给你报告在HTML中使用的ID和类别,让你快速打开并跳到相关的标记。 以下是网站关于此function的简介:

网站报告:一目了然地查看您的网站中使用哪些样式。 找出你在哪里应用了任何样式表中没有定义的样式类,或者看看你定义了哪些没有被使用的样式类。

非常有用的解剖不熟悉的网站。

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

作为实验性开发人员function之一,Chrome Canary Build在开发人员工具栏中为“ CSS Coverage”提供了一个选项。 此选项出现在时间表选项卡中,可用于获取未使用的CSS的列表。

在这里输入图像描述

请注意,您需要在开发者工具栏的设置中启用此function。 这个function应该可能使它正式发布。

在这里输入图像描述

我发现这个工具适用于所有版本的Firefox! 了解它是如何工作需要一点时间,但一旦启动,似乎相当不错。 它会保存一个新版本的CSS与注释CSSselect器,所以你可以快速恢复,如果你需要。

CSS的用法 – 火狐插件

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

这里列出的所有工具都非常适合CSS。 我不知道Dreamweaver&Co.但是我做了一个小程序,帮我清理了我的网站项目

发现未使用的档案

它不能帮助CSS和东西,而是与孤立的图像和其他types的文件。

希望它有帮助!

氦气CSS是一个伟大的工具。 应该指出,你应该在你的网站的开发或本地版本上运行这个工具。 如果您在生产版本上运行此function,则访问者将能够看到氦气testing环境。

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

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

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

编辑:你只需要小心,不要删除由JavaScript使用的图像。