首页 / 知识

关于html：如何在网站中查找未使用的图像和CSS样式？

2023-04-13 13:13:00

How can I find unused images and CSS styles in a website?

有没有可以用来查找未使用的图像文件的方法(反复试验除外)？站点中甚至不存在的ID和类的CSS声明如何？

似乎可以编写一种脚本来扫描站点，对其进行概要分析并查看从未加载过的图像和样式，这似乎是一种方法。

您无需支付任何网络服务或搜索插件，您已经在Google Chrome浏览器中的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

enter image description here

[删除过时的答案]

.....................

在文件级别：

使用wget积极地抓取站点，然后处理http服务器日志以获取访问的文件列表，并将其与站点中的文件进行比较

1
2
3
4

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

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.

正如Tim Murtaugh在A List Apart博客文章"保持CSS清洁的两种工具"中指出的那样：

csscss

csscss will parse any CSS files you give it and let you know which
rulesets have duplicated declarations.

与问题最相关：
氦气

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.

TopStyle有一套用于查找和处理孤立类的工具。它还将为您提供有关在HTML中使用ID和类的位置的报告，从而使您可以快速打开并跳至相关的标记。这是网站上有关此功能的简介：

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.

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

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

我似乎想起了Adobe Dreamweaver或Adobe Golive都具有查找孤立样式和图像的功能。现在不记得哪个了。可能两者兼而有之，但这些功能是隐藏的。

Chrome Canary构建在开发人员工具栏中具有" CSS Coverage"的选项，作为实验性开发人员功能之一。此选项出现在时间轴选项卡中，可用于获取未使用的CSS的列表。

enter image description here

请注意，您还需要在开发人员工具栏的设置中启用此功能。此功能可能应该使其成为正式的chrome版本。

enter image description here

这个小工具为您提供了一些html使用的CSS规则的列表。

这是在代码笔上

单击运行代码snippet，然后单击Full page进入。然后按照摘要中的说明进行操作。您可以在整个页面上运行它，以查看它可以与html / css一起使用。

但是，仅将我的代码笔作为工具添加书签会更容易。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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

我发现此工具可用于所有版本的Firefox！要花一点时间来学习它是如何工作的，但是一旦启动，它看起来就相当不错了。它将使用标记为CSS选择器的新版本保存CSS，因此您可以根据需要快速还原。

CSS用法-Firefox插件

氦CSS是一个很好的工具。但应注意，您应该在网站的开发版本或本地版本上运行此工具。如果您在生产版本上运行此程序，您的访问者将能够看到Helium测试环境。

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

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

此处列出的所有工具都非常适合CSS。我不了解Dreamweaver＆Co。但是我不久前做了一个小程序，以帮助我清理网站项目

查找未使用的文件

它对CSS和其他内容无济于事，而对孤立的图像和其他类型的文件却无济于事。

希望能帮助到你！

要回答有关查找未使用的图像文件的工具的问题，您可以使用Xenu Link Sleuth扩展您的站点以查找站点使用的所有图像。然后Xenu提示您进行ftp访问，以便它可以对目录进行爬网以查找孤立的文件。我尚未在生产服务器上使用过它，但听起来值得研究。

编辑：您只需要注意不要删除javascript使用的图像。

查找图像网站站点