如何在网站中找到未使用的图像和CSS样式?
时间:2020-03-05 18:44:38 来源:igfitidea点击:
是否可以使用方法(试错法除外)查找未使用的图像文件?站点中甚至不存在的ID和类的CSS声明如何?
似乎可以编写一种脚本来扫描站点,对其进行概要分析并查看从未加载过的图像和样式。
解决方案
回答
我似乎想起了Adobe Dreamweaver或者Adobe Golive都具有查找孤立样式和图像的功能。现在不记得哪个了。可能两者兼而有之,但这些功能是隐藏的。
回答
有一个Firefox扩展,可在页面上找到未使用的CSS选择器。它可以选择扩展整个站点。 3.01版应与Firefox的较新版本一起使用。
https://addons.mozilla.org/zh-CN/firefox/addon/dust-me-selectors/
这是另一个选择。
https://addons.mozilla.org/zh-CN/firefox/addon/css-usage/
回答
在文件级别:
使用wget积极地抓取站点,然后处理http服务器日志以获取访问的文件列表,并将其与站点中的文件进行比较
diff \ <(sed some_rules httpd_log | sort -u) \ <(ls /var/www/whatever | sort -u) \ | grep something
回答
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.
对剖析不熟悉的网站非常有用。
但是,它找不到未使用的图像。
回答
尝试使用WARI Web应用程序资源检查器。
它查找未使用的图像,未使用的和重复的CSS / JS。
链接:wari.konem.net
回答
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.