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

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

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

Там вБыло расширение Firefox, которое находкиобнаружил неиспользуемые селекторы CSS на странице. Этоимеетбыла возможность сканировать весь сайт. Версия 3.01должен может работать с более новыми версиями Firefox.

http://www.brothercake.com/dustmeselectors/

А вот еще вариант:

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

Вам не нужно платить какие-либо веб-сервисы или искать надстройку, у вас уже есть это в 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 Redundancy Checker - это инструмент, который вы запускаете локально, в который вы передаете таблицу стилей и либо список URL-адресов, либо каталог файлов HTML. Вот описание, приведенное на сайте инструмента:

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

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

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

csscss

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

И самое актуальное к вопросу:
helium-css

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

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

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

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

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

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

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

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

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

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

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

Использование CSS - Дополнение для Firefox

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

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

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

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

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

Helium CSS - отличный инструмент для этого. Однако следует отметить, что вам следует запустить этот инструмент в разрабатываемой или локальной версии вашего веб-сайта. Если вы запустите это в производственной версии, ваши посетители смогут увидеть тестовую среду Helium.

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

Чтобы ответить на ваш вопрос об инструменте для поиска неиспользуемых файлов изображений, вы можете использовать Xenu Link Sleuth для проверки вашего сайта, чтобы найти все изображения, которые использует ваш сайт. Затем Xenu запрашивает у вас доступ по ftp, чтобы он мог сканировать ваши каталоги в поисках потерянных файлов. Я еще не использовал его на производственном сервере, но звучит достойно.

РЕДАКТИРОВАТЬ: вам просто нужно быть осторожным, чтобы не удалить изображения, которые используются javascript.