Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
52391 просмотра
13 ответа
Есть ли метод (кроме проб и ошибок), который я могу использовать, чтобы найти неиспользуемые файлы изображений? Как насчет объявлений CSS для идентификаторов и классов, которые даже не существуют на сайте?
Кажется, что может быть способ написать скрипт, который сканирует сайт, профилирует его и видит, какие изображения и стили никогда не загружаются.
Автор: Jon Galloway Источник Размещён: 07.08.2019 07:41Ответы (13)
67 плюса
[удален устаревший ответ]
..................
Автор: Patrick McElhaney Размещён: 28.08.2008 08:2674 плюса
Вам не нужно платить за какой-либо веб-сервис или искать дополнение, у вас уже есть это в 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#coverage.
Автор: Șerban Ghiță Размещён: 05.03.2012 07:2318 плюса
На уровне файлов:
используйте wget для агрессивного паука на сайте, а затем обработайте логи http-сервера, чтобы получить список файлов, к которым обращались, и сопоставьте их с файлами на сайте
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
Автор: BCS
Размещён: 28.08.2008 08:30
9 плюса
CSS Redundancy Checker - это инструмент, который вы запускаете локально, передавая таблицу стилей и список URL-адресов или каталог HTML-файлов. Вот описание, приведенное на сайте инструмента:
Автор: True Soft Размещён: 22.01.2010 09:48Простой скрипт, который, учитывая таблицу стилей CSS и файл .txt со списком URL-адресов файлов HTML, или каталог файлов HTML, будет перебирать их все и перечислять операторы CSS в таблице стилей, которые никогда не вызываются в HTML.
По сути, это помогает вам сохранять ваши CSS-файлы актуальными и компактными. И это достаточно точно.
5 плюса
Как отметил Тим Мёрто в блоге A List Apart, « Два инструмента для поддержания чистоты вашего CSS »:
csscss проанализирует все файлы CSS, которые вы передаете, и сообщит, какие наборы правил имеют дублированные объявления.
И наиболее актуален вопрос:
гелий-ксс
Автор: mg1075 Размещён: 15.06.2013 04:08Helium - это инструмент для обнаружения неиспользуемого CSS на многих страницах веб-сайта.
Инструмент основан на JavaScript и запускается из браузера.
Helium принимает список URL-адресов для разных разделов сайта, затем загружает и анализирует каждую страницу, чтобы создать список всех таблиц стилей. Затем он посещает каждую страницу в списке URL-адресов и проверяет, используются ли на страницах селекторы, найденные в таблицах стилей. Наконец, он генерирует отчет, который детализирует каждую таблицу стилей и селекторы, которые не были найдены для использования ни на одной из указанных страниц.
3 плюса
Кажется, я вспоминаю либо Adobe Dreamweaver, либо Adobe Golive с функцией поиска как лишенных стиля стилей, так и изображений; не могу вспомнить, что сейчас. Возможно оба, но функции были хорошо скрыты.
Автор: Polsonby Размещён: 28.08.2008 07:593 плюса
TopStyle имеет набор инструментов для поиска и работы с классами-сиротами. Он также предоставит вам отчеты о том, где идентификаторы и классы используются в HTML, что позволит вам быстро открыть и перейти к соответствующей разметке. Вот реклама на сайте, касающаяся этой функции:
Отчеты о сайте. Сразу видно, где на вашем сайте используются стили. Узнайте, где вы применили классы стилей, которые не определены ни в одной из таблиц стилей, или посмотрите, какие классы стилей, которые вы определили, не используются.
Очень полезно для разбора незнакомых сайтов.
Тем не менее, он не находит неиспользуемые изображения.
Автор: Charles Roper Размещён: 29.08.2008 05:532 плюса
Chrome canary build имеет опцию на панели инструментов разработчика для « CSS Coverage» в качестве одной из экспериментальных функций разработчика. Эта опция появляется на вкладке временной шкалы и может быть использована для получения списка неиспользуемых CSS.
Обратите внимание, что вам необходимо включить эту функцию в настройках на панели инструментов разработчика тоже. Эта функция, вероятно, должна появиться в официальном выпуске Chrome.
Автор: Abhinav Galodha Размещён: 21.11.2016 04:551 плюс
Я нашел этот инструмент, который работает со всеми версиями Firefox! Чтобы понять, как это работает, требуется некоторое время, но, как только он начинается, это кажется довольно хорошим. Это сохранит новую версию CSS с выделенными CSS-селекторами, чтобы вы могли быстро вернуться, если вам нужно.
Использование CSS - Firefox Addon
Автор: meme Размещён: 28.07.2011 09:301 плюс
Этот маленький инструмент дает вам список правил CSS, используемых некоторыми HTML.
Вот это на 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("
");
0 плюса
Все инструменты, перечисленные здесь, отлично подходят для CSS. Я не знаю о Dreamweaver & Co. Но недавно я создал небольшую программу, чтобы помочь мне очистить проекты моего веб-сайта.
Это не помогает с CSS и прочим, но вместо этого с потерянными изображениями и другими типами файлов.
Надеюсь, поможет!
Автор: Robert Hoffmann Размещён: 18.06.2015 05:190 плюса
Helium CSS - отличный инструмент для этого. Однако следует отметить, что вы должны запускать этот инструмент в разрабатываемой или локальной версии вашего сайта. Если вы запустите это в рабочей версии, ваши посетители смогут увидеть тестовую среду Helium.
https://github.com/geuis/helium-css
http://www.unknownerror.org/opensource/geuis/helium-css
Автор: James Aldern Размещён: 08.10.2015 02:45-1 плюса
Чтобы ответить на ваш вопрос об инструменте для поиска неиспользуемых файлов изображений, вы можете использовать Xenu Link Sleuth, чтобы найти ваш сайт и найти все изображения, которые использует ваш сайт. Затем Xenu запросит у вас доступ по ftp, чтобы он мог сканировать ваши каталоги, чтобы найти потерянные файлы. Я еще не использовал его на производственном сервере, но это звучит достойно изучения.
РЕДАКТИРОВАТЬ: Вы просто должны быть осторожны, чтобы не удалять изображения, которые используются JavaScript.
Автор: Justin Nafe Размещён: 04.12.2012 08:27Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- html Как вы можете настроить номера в упорядоченном списке?
- html Прокрутка переполненных DIV с помощью JavaScript
- html Как поместить пробел перед текстом опции в элементе выбора HTML?
- html Есть ли HTML напротив <noscript>?
- html Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Создание закругленных углов с помощью CSS
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?
- css Create a variable in .CSS file for use within that .CSS file
- css Как разместить одно изображение поверх другого в HTML?
- css Как я могу отобразить только часть изображения в HTML / CSS?
- css Удалите все классы, начинающиеся с определенной строки.