Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
Есть ли метод (кроме проб и ошибок), который я могу использовать, чтобы найти неиспользуемые файлы изображений? Как насчет CSS-объявлений для идентификаторов и классов, которые даже не существуют на сайте?
Кажется, что может быть способ написать скрипт, который сканирует сайт, профилирует его и видит, какие изображения и стили никогда не загружаются.
14 ответов
Существует расширение Firefox, которое находит неиспользуемые селекторы CSS на странице. У этого есть возможность пауковать весь сайт. Версия 3.01 должна работать с более новыми версиями Firefox.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
И вот еще один вариант.
Вам не нужно платить ни за какой веб-сервис или искать дополнение, у вас уже есть это в Google Chrome под F12 (Inspector)->Audits->Remove unused CSS rules
Скриншот:
Обновление: 30 июня 2017
Теперь Chrome 59 обеспечивает покрытие кода CSS и JS. См. https://developers.google.com/web/updates/2017/04/devtools-release-notes
На уровне файлов:
используйте 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 со списком URL-адресов файлов HTML, или каталог файлов HTML, будет перебирать их все и перечислять операторы CSS в таблице стилей, которые никогда не вызываются в HTML.
По сути, это помогает вам сохранять ваши CSS-файлы актуальными и компактными. И это достаточно точно.
Попробуйте WARI - инспектор ресурсов веб-приложений.
Он находит неиспользуемые изображения, неиспользуемые и дублирующие CSS/JS.
Ссылка: http://wari.konem.net/
Как отметил Тим Мёрто в блоге A List Apart, " Два инструмента для поддержания чистоты вашего CSS ":
csscss проанализирует все предоставленные вами CSS-файлы и сообщит, какие наборы правил имеют дублированные объявления.
И наиболее актуален вопрос:
гелий-CSS
Helium - это инструмент для обнаружения неиспользуемого CSS на многих страницах веб-сайта.
Инструмент основан на JavaScript и запускается из браузера.
Helium принимает список URL-адресов для различных разделов сайта, а затем загружает и анализирует каждую страницу, чтобы создать список всех таблиц стилей. Затем он посещает каждую страницу в списке URL-адресов и проверяет, используются ли на страницах селекторы, найденные в таблицах стилей. Наконец, он генерирует отчет, который детализирует каждую таблицу стилей и селекторы, которые не были найдены для использования ни на одной из указанных страниц.
Кажется, я вспоминаю либо Adobe Dreamweaver, либо Adobe Golive с функцией поиска как лишенных стиля стилей, так и изображений; не могу вспомнить, что сейчас. Возможно оба, но функции были хорошо скрыты.
TopStyle имеет набор инструментов для поиска и работы с классами-сиротами. Он также предоставит вам отчеты о том, где идентификаторы и классы используются в HTML, что позволит вам быстро открыть и перейти к соответствующей разметке. Вот реклама на сайте, касающаяся этой функции:
Отчеты сайта: сразу посмотрите, какие стили используются на вашем сайте. Узнайте, где вы применили классы стилей, которые не определены ни в одной из таблиц стилей, или посмотрите, какие классы стилей, которые вы определили, не используются.
Очень полезно для разбора незнакомых сайтов.
Тем не менее, он не находит неиспользуемые изображения.
В Chrome canary build в панели инструментов разработчика есть опция "Покрытие CSS" в качестве одной из экспериментальных функций разработчика. Эта опция появляется на вкладке временной шкалы и может быть использована для получения списка неиспользуемых CSS.
Обратите внимание, что вам необходимо включить эту функцию в настройках на панели инструментов разработчика тоже. Эта функция, вероятно, должна появиться в официальном выпуске Chrome.
Я нашел этот инструмент, который работает со всеми версиями Firefox! Чтобы понять, как это работает, требуется некоторое время, но, как только он начинается, это кажется довольно хорошим. Это сохранит новую версию CSS с отмеченными селекторами CSS, чтобы вы могли быстро вернуться, если вам нужно.
Этот небольшой инструмент дает вам список правил CSS, используемых некоторыми HTML.
Вот это на Code Pen
Нажмите " Запустить фрагмент кода", затем нажмите " Полная страница", чтобы перейти к нему. Затем следуйте инструкциям во фрагменте. Вы можете запустить его на полную страницу, чтобы увидеть, как он работает с вашим 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 и прочим, но вместо этого с потерянными изображениями и другими типами файлов.
Надеюсь, поможет!
Helium CSS - отличный инструмент для этого. Однако следует отметить, что вы должны запускать этот инструмент в разрабатываемой или локальной версии вашего сайта. Если вы запустите его в рабочей версии, ваши посетители смогут увидеть тестовую среду Helium.
Чтобы ответить на ваш вопрос об инструменте для поиска неиспользуемых файлов изображений, вы можете использовать Xenu Link Sleuth, чтобы найти ваш сайт и найти все изображения, которые использует ваш сайт. Затем Xenu запросит у вас доступ по ftp, чтобы он мог сканировать ваши каталоги, чтобы найти потерянные файлы. Я еще не использовал его на производственном сервере, но это звучит достойно изучения.
РЕДАКТИРОВАТЬ: Вы просто должны быть осторожны, чтобы не удалять изображения, которые используются JavaScript.