Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?[закрыто]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Есть ли метод (отличный от метода проб и ошибок) Который я могу использовать для поиска неиспользуемых файлов изображений?Как насчет объявлений CSS для идентификаторов и классов, которые даже не существуют на сайте?
Похоже, что может быть способ написать скрипт, который сканирует сайт, профилирует его и видит, какие изображения и стили никогда не загружаются.
Решение
Существует расширение 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#coverage
На файловом уровне:
используйте wget для агрессивной паутины сайта, а затем обрабатывайте журналы http-сервера, чтобы получить список доступных файлов, сопоставьте это с файлами на сайте
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
Средство проверки избыточности CSS это инструмент, который вы запускаете локально, которому вы передаете таблицу стилей и либо список URL-адресов, либо каталог HTML-файлов.Вот описание, приведенное на сайте инструмента:
Простой скрипт, который, учитывая таблицу стилей CSS и либо файл .txt перечисление URL-адресов HTML-файлов или каталога HTML-файлов приведет к перебору по ним всем и перечислению операторов CSS в таблице стилей, которые никогда не вызываются в HTML.
По сути, это помогает вам сохранить ваши CSS-файлы актуальными и компактными.И это достаточно точно.
Попробуйте WARI - Инспектор ресурсов веб-приложений.
Он находит неиспользуемые изображения, неиспользуемые и дублирующие CSS / JS.
Ссылка: wari.konem.net
Как отметил Тим Мерто в блоге A List Apart, "Два инструмента для поддержания чистоты вашего CSS":
csscss проанализирует любые CSS-файлы, которые вы ему предоставите, и сообщит вам, какие наборы правил содержат дублированные объявления.
И наиболее относящийся к данному вопросу:
гелий-css
Helium - это инструмент для обнаружения неиспользуемого CSS на многих страницах веб-сайта .
Инструмент основан на javascript и запускается из браузера.
Helium принимает список URL-адресов для разных разделов сайта, затем загружает и анализирует каждую страницу, чтобы создать список всех таблиц стилей.Затем он посещает каждую страницу в списке URL и проверяет, используются ли на страницах селекторы , найденные в таблицах стилей.Наконец, он генерирует отчет, содержащий подробную информацию о каждой таблице стилей и селекторах, которые, как было установлено, не использовались ни на одной из указанных страниц.
Кажется, я припоминаю, что в Adobe Dreamweaver или Adobe Golive есть функция поиска как потерянных стилей, так и изображений;сейчас не могу вспомнить, что именно.Возможно, и то, и другое, но эти особенности были хорошо скрыты.
Верхний стиль имеет набор инструментов для поиска бесхозных классов и работы с ними.Он также предоставит вам отчеты о том, где идентификаторы и классы используются в HTML, что позволит вам быстро открыть соответствующую разметку и перейти к ней.Вот рекламный ролик с веб-сайта, касающийся этой функции:
Отчеты сайта:Сразу посмотрите, какие стили используются на вашем сайте.Узнайте, где вы применяли классы стилей которые не определены ни в каких таблицах стилей , или посмотрите, какие классы стилей вы определили, которые не используются.
Очень полезен для анализа незнакомых веб-сайтов.
Однако он не находит неиспользуемые изображения.
Chrome canary build имеет опцию на панели инструментов разработчика для "Покрытие CSS" в качестве одной из экспериментальных функций разработчика.Эти параметры отображаются на вкладке timeline и могут быть использованы для получения списка неиспользуемых CSS.
Пожалуйста, обратите внимание, что вам также необходимо будет включить эту функцию в настройках на панели инструментов разработчика.Вероятно, эта функция должна появиться в официальном релизе Chrome.
Я нашел этот инструмент, который работает со всеми версиями Firefox!Требуется некоторое время, чтобы понять, как это работает, но как только это запускается, кажется, что все довольно хорошо.Это сохранит новую версию CSS с отмеченными CSS-селекторами, чтобы вы могли быстро вернуться к ней, если вам нужно.
Этот небольшой инструмент предоставляет вам список правил css, используемых некоторыми html.
Вот он на Кодовое Перо
Нажмите на Запустить фрагмент кода, затем нажмите на Полная страница чтобы проникнуться этим.Затем следуйте инструкциям во фрагменте кода.Вы можете запустить его на всю страницу, чтобы увидеть, как он работает с вашим 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 запрашивает у вас доступ по ftp, чтобы он мог сканировать ваши каталоги в поисках потерянных файлов.Я еще не использовал его на производственном сервере, но, похоже, на него стоит обратить внимание.
Редактировать:Вам просто нужно быть осторожным, чтобы не удалять изображения, которые используются javascript.
