Html 如何在网站中找到未使用的图像和 CSS 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I find unused images and CSS styles in a website?
提问by Jon Galloway
Is there a method (other than trial and error) I can use to find unused image files? How about CSS declarations for ID's and Classes that don't even exist in the site?
有没有一种方法（试错法除外）可以用来查找未使用的图像文件？站点中甚至不存在的 ID 和类的 CSS 声明怎么样？
It seems like there might be a way to write a script that scans the site, profile it, and see which images and styles are never loaded.
似乎有一种方法可以编写一个脚本来扫描站点，对其进行分析，并查看哪些图像和样式从未加载过。
采纳答案by Patrick McElhaney
[removed obsolete answer]
[删除过时的答案]
..................
………………
回答by ?erban Ghi??
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
你不必支付任何网络服务或搜索插件，你已经在谷歌浏览器中 F12 下有了这个 (Inspector)->Audits->Remove unused CSS rules
Screenshot:
截屏：
Update: 30 Jun, 2017
更新：2017 年 6 月 30 日
Now Chrome 59 provides CSS and JS code coverage. See https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
现在 Chrome 59 提供了CSS 和 JS 代码覆盖。请参阅https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
回答by BCS
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
使用 wget 主动抓取站点，然后处理 http 服务器日志以获取访问的文件列表，将其与站点中的文件进行比较
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
回答by True Soft
CSS Redundancy Checkeris a tool you run locally, which you pass a stylesheet and either a list of URLs or a directory of HTML files. Here's the description given on the tool's site:
CSS Redundancy Checker是一个你在本地运行的工具，你传递一个样式表和一个 URL 列表或一个 HTML 文件目录。这是该工具网站上给出的描述：
A simple script that, given a CSS stylesheet and either a .txt file listing URLs of HTML files, or a directory of HTML files, will iterate over them all and list the CSS statements in the stylesheet which are never called in the HTML.
Basically, it helps you keep your CSS files relevant and compact. And it's reasonably accurate.
一个简单的脚本，给定一个 CSS 样式表和一个列出 HTML 文件 URL 的 .txt 文件，或一个 HTML 文件目录，将遍历它们并列出样式表中从未在 HTML 中调用的 CSS 语句。
基本上，它可以帮助您保持 CSS 文件的相关性和紧凑性。而且它相当准确。
回答by mg1075
As noted by Tim Murtaugh on the A List Apart blog post, "Two Tools to Keep Your CSS Clean":
正如 Tim Murtaugh 在 A List Apart 博客文章“保持 CSS 整洁的两种工具”中所述：
csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations.
csscss 将解析您提供的任何 CSS 文件，并让您知道哪些规则集具有重复的声明。
And most relevant to the question:
helium-css
与这个问题最相关：
helium-css
Helium is a tool for discovering unused CSS across many pages on a web site.
The tool is javascript-based and runs from the browser.
Helium accepts a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. Finally, it generates a report that details each stylesheet and the selectors that were not found to be used on any of the given pages.
Helium 是一种用于在网站上的许多页面中发现未使用的 CSS 的工具。
该工具基于 javascript 并从浏览器运行。
Helium 接受站点不同部分的 URL 列表，然后加载并解析每个页面以构建所有样式表的列表。然后它访问 URL 列表中的每个页面，并检查页面上是否使用了样式表中找到的选择器。最后，它生成一个报告，详细说明每个样式表和未发现在任何给定页面上使用的选择器。
回答by Charles Roper
TopStylehas a suite of tools for locating and dealing with orphan classes. It will also give you reports on where IDs and classes are used in the HTML, allowing you to quickly open and skip to the relevant markup. Here's the blurb from the website regarding this feature:
TopStyle 有一套用于定位和处理孤立类的工具。它还会为您提供有关 ID 和类在 HTML 中的使用位置的报告，让您可以快速打开并跳至相关标记。这是网站上关于此功能的简介：
Site Reports: See at a glance where styles are used in your site. Find out where you've applied style classes that aren't defined in any style sheets, or see what style classes you've defined that aren't being used.
站点报告：一目了然地查看站点中使用的样式。找出您在何处应用了没有在任何样式表中定义的样式类，或者查看您定义的哪些样式类没有被使用。
Very useful for dissecting unfamiliar websites.
对于剖析不熟悉的网站非常有用。
It doesn't find unused images, though.
但是，它找不到未使用的图像。
回答by Polsonby
I seem to recall either Adobe Dreamweaver or Adobe Golive having a feature to find both orphaned styles and images; can't remember which now. Possibly both, but the features were well-hidden.
我似乎记得 Adobe Dreamweaver 或 Adobe Golive 都具有查找孤立样式和图像的功能；现在不记得是哪个了。可能两者都有，但这些特征隐藏得很好。
回答by Abhinav Galodha
Chrome canary build has an option in the developer toolbar for "CSS Coverage"as one of the experimental developer features. This options comes up in the timeline tab and can be used for getting a list of the unused CSS.
Chrome canary build 在开发人员工具栏中有一个选项“ CSS Coverage”作为实验性开发人员功能之一。此选项出现在时间轴选项卡中，可用于获取未使用的 CSS 列表。
Please note that you would need to enable this feature in the settings in the developer toolbar too. This feature should probably make it to official chrome release.
请注意，您还需要在开发人员工具栏中的设置中启用此功能。此功能可能会使其成为正式的 chrome 版本。
回答by toddmo
This little tool gives you a list of the css rules in use by some html.
这个小工具为您提供了一些 html 使用的 css 规则列表。
Here it is on Code Pen
这是在代码笔上
Click on Run code snippet, then click on Full pageto 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.
点击Run code snippet，然后点击Full page进入。然后按照代码段中的说明进行操作。您可以在整个页面上运行它以查看它是否与您的 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>");回答by meme
I found this tool that works with all versions of Firefox! It takes a little while to learn how it works, but once it starts it seems pretty good. It will save a new version of the CSS with remarked out CSS selectors so you can quickly revert if you need to.
我发现这个工具适用于所有版本的 Firefox！学习它是如何工作的需要一点时间，但是一旦开始，它看起来就很不错了。它将保存带有注释的 CSS 选择器的新版本的 CSS，以便您可以在需要时快速恢复。
