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

html css

52391 观看

13回复

40709 作者的声誉

有没有方法(试验和错误除外)我可以用来查找未使用的图像文件?如果网站中甚至不存在ID和类的CSS声明怎么样?

似乎可能有一种方法可以编写一个脚本来扫描网站,对其进行分析,并查看从未加载的图像和样式。

作者: Jon Galloway 的来源 发布者: 2008 年 8 月 28 日

回应 (13)


3

16910 作者的声誉

我似乎记得Adobe Dreamweaver或Adobe Golive有一个功能,可以找到孤立的样式和图像; 现在不记得了。可能两者,但功能都很好隐藏。

作者: Polsonby 发布者: 28.08.2008 07:59

67

38087 作者的声誉

决定

[删除过时的答案]

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

作者: Patrick McElhaney 发布者: 28.08.2008 08:26

18

34062 作者的声誉

在文件级别:

使用wget积极地蜘蛛网站,然后处理http服务器日志以获取访问的文件列表,将其与站点中的文件区分开来

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something
作者: BCS 发布者: 28.08.2008 08:30

3

12112 作者的声誉

TopStyle有一套用于查找和处理孤立类的工具。它还将为您提供有关HTML中使用ID和类的报告,允许您快速打开并跳转到相关标记。以下是该网站关于此功能的简介:

站点报告:快速查看站点中使用样式的位置。找出您应用未在任何样式表中定义的样式类的位置,或查看您定义的未使用的样式类。

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

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

作者: Charles Roper 发布者: 29.08.2008 05:53

9

7445 作者的声誉

CSS Redundancy Checker是一个在本地运行的工具,您可以传递样式表以及URL列表或HTML文件目录。以下是该工具网站上的说明:

一个简单的脚本,给定一个CSS样式表和一个列出HTML文件的URL的.txt文件,或HTML文件的目录,将迭代它们并列出样式表中从未在HTML中调用的CSS语句。

基本上,它可以帮助您保持CSS文件的相关性和紧凑性。而且它相当准确。

作者: True Soft 发布者: 22.01.2010 09:48

1

9434 作者的声誉

我发现这个工具适用于所有版本的Firefox!它需要一点时间来了解它是如何工作的,但一旦它开始它似乎相当不错。它将使用已标记的CSS选择器保存新版本的CSS,以便您可以在需要时快速恢复。

CSS用法 - Firefox Addon

作者: meme 发布者: 28.07.2011 09:30

74

1474 作者的声誉

您无需支付任何网络服务或搜索插件,您已经在F12的Google Chrome中使用此服务 (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

在此输入图像描述

作者: Șerban Ghiță 发布者: 05.03.2012 07:23

-1

2356 作者的声誉

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

编辑:你必须小心不要删除javascript使用的图像。

作者: Justin Nafe 发布者: 04.12.2012 08:27

5

15386 作者的声誉

正如Tim Murtaugh在A List Apart博客文章中所说,“ 保持CSS清洁的两个工具 ”:

csscss

csscss将解析您提供的任何CSS文件,并让您知道哪些规则集具有重复的声明。

与问题最相关:
helium-css

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

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

Helium接受站点不同部分的URL列表,然后加载并解析每个页面以构建所有样式表的列表。然后,它访问URL列表中的每个页面,并检查样式表中找到的选择器是否在页面上使用。最后,它生成一个报告,详细说明每个样式表和未在任何给定页面上使用的选择器。

作者: mg1075 发布者: 15.06.2013 04:08

0

2198 作者的声誉

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

发现未使用的档案

它对CSS和东西没有帮助,而是与孤立图像和其他类型的文件有关。

希望能帮助到你!

作者: Robert Hoffmann 发布者: 18.06.2015 05:19

1

10474 作者的声誉

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

这是在Code Pen上

单击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("");

作者: toddmo 发布者: 30.09.2015 08:16

0

17 作者的声誉

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

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

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

作者: James Aldern 发布者: 08.10.2015 02:45

2

6010 作者的声誉

Chrome canary build在开发人员工具栏中有一个选项,可以将“ CSS Coverage”作为实验性开发人员功能之一。此选项出现在时间轴选项卡中,可用于获取未使用的CSS列表。

在此输入图像描述

请注意,您还需要在开发人员工具栏的设置中启用此功能。此功能应该可以用于官方chrome发布。

在此输入图像描述

作者: Abhinav Galodha 发布者: 21.11.2016 04:55
32x32