Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?

html css

52391 просмотра

13 ответа

Есть ли метод (кроме проб и ошибок), который я могу использовать, чтобы найти неиспользуемые файлы изображений? Как насчет объявлений CSS для идентификаторов и классов, которые даже не существуют на сайте?

Кажется, что может быть способ написать скрипт, который сканирует сайт, профилирует его и видит, какие изображения и стили никогда не загружаются.

Автор: Jon Galloway Источник Размещён: 07.08.2019 07:41

Ответы (13)


67 плюса

Решение

[удален устаревший ответ]

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

Автор: Patrick McElhaney Размещён: 28.08.2008 08:26

74 плюса

Вам не нужно платить за какой-либо веб-сервис или искать дополнение, у вас уже есть это в 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:23

18 плюса

На уровне файлов:

используйте 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-файлов. Вот описание, приведенное на сайте инструмента:

Простой скрипт, который, учитывая таблицу стилей CSS и файл .txt со списком URL-адресов файлов HTML, или каталог файлов HTML, будет перебирать их все и перечислять операторы CSS в таблице стилей, которые никогда не вызываются в HTML.

По сути, это помогает вам сохранять ваши CSS-файлы актуальными и компактными. И это достаточно точно.

Автор: True Soft Размещён: 22.01.2010 09:48

5 плюса

Как отметил Тим Мёрто в блоге A List Apart, « Два инструмента для поддержания чистоты вашего CSS »:

csscss

csscss проанализирует все файлы CSS, которые вы передаете, и сообщит, какие наборы правил имеют дублированные объявления.

И наиболее актуален вопрос:
гелий-ксс

Helium - это инструмент для обнаружения неиспользуемого CSS на многих страницах веб-сайта.

Инструмент основан на JavaScript и запускается из браузера.

Helium принимает список URL-адресов для разных разделов сайта, затем загружает и анализирует каждую страницу, чтобы создать список всех таблиц стилей. Затем он посещает каждую страницу в списке URL-адресов и проверяет, используются ли на страницах селекторы, найденные в таблицах стилей. Наконец, он генерирует отчет, который детализирует каждую таблицу стилей и селекторы, которые не были найдены для использования ни на одной из указанных страниц.

Автор: mg1075 Размещён: 15.06.2013 04:08

3 плюса

Кажется, я вспоминаю либо Adobe Dreamweaver, либо Adobe Golive с функцией поиска как лишенных стиля стилей, так и изображений; не могу вспомнить, что сейчас. Возможно оба, но функции были хорошо скрыты.

Автор: Polsonby Размещён: 28.08.2008 07:59

3 плюса

TopStyle имеет набор инструментов для поиска и работы с классами-сиротами. Он также предоставит вам отчеты о том, где идентификаторы и классы используются в HTML, что позволит вам быстро открыть и перейти к соответствующей разметке. Вот реклама на сайте, касающаяся этой функции:

Отчеты о сайте. Сразу видно, где на вашем сайте используются стили. Узнайте, где вы применили классы стилей, которые не определены ни в одной из таблиц стилей, или посмотрите, какие классы стилей, которые вы определили, не используются.

Очень полезно для разбора незнакомых сайтов.

Тем не менее, он не находит неиспользуемые изображения.

Автор: Charles Roper Размещён: 29.08.2008 05:53

2 плюса

Chrome canary build имеет опцию на панели инструментов разработчика для « CSS Coverage» в качестве одной из экспериментальных функций разработчика. Эта опция появляется на вкладке временной шкалы и может быть использована для получения списка неиспользуемых CSS.

введите описание изображения здесь

Обратите внимание, что вам необходимо включить эту функцию в настройках на панели инструментов разработчика тоже. Эта функция, вероятно, должна появиться в официальном выпуске Chrome.

введите описание изображения здесь

Автор: Abhinav Galodha Размещён: 21.11.2016 04:55

1 плюс

Я нашел этот инструмент, который работает со всеми версиями Firefox! Чтобы понять, как это работает, требуется некоторое время, но, как только он начинается, это кажется довольно хорошим. Это сохранит новую версию CSS с выделенными CSS-селекторами, чтобы вы могли быстро вернуться, если вам нужно.

Использование CSS - Firefox Addon

Автор: meme Размещён: 28.07.2011 09:30

1 плюс

Этот маленький инструмент дает вам список правил 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("");

Автор: toddmo Размещён: 30.09.2015 08:16

0 плюса

Все инструменты, перечисленные здесь, отлично подходят для CSS. Я не знаю о Dreamweaver & Co. Но недавно я создал небольшую программу, чтобы помочь мне очистить проекты моего веб-сайта.

Найти-Неиспользованные-Files

Это не помогает с CSS и прочим, но вместо этого с потерянными изображениями и другими типами файлов.

Надеюсь, поможет!

Автор: Robert Hoffmann Размещён: 18.06.2015 05:19

0 плюса

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
Вопросы из категории :
32x32