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

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

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

используйте wget для агрессивного сканирования сайта, а затем обработайте журналы http-сервера, чтобы получить список файлов, к которым был осуществлен доступ, сравните это с файлами на сайте

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

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

Этот небольшой инструмент дает вам список правил CSS, используемых некоторыми HTML.

Вот он на Кодовое перо

Щелкните 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>");

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

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