Як я можу знайти невикористані зображення та стилі 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, які ви їм надаєте, і повідомить, у яких наборах правил дублюються декларації.

І найбільш актуальне для питання:
гелій-css

Гелій - це інструмент для виявлення невикористаного CSS на багатьох сторінках веб-сайту.

Інструмент на основі JavaScript і працює з браузера.

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

Здається, я згадую або Adobe Dreamweaver, або Adobe Golive, який мав можливість знаходити осиротілі стилі та зображення; не можу пригадати, який зараз. Можливо і те, і інше, але риси були добре приховані.

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

Звіти про сайт: Погляньте, де стилі використовуються на вашому сайті. Дізнайтеся, де ви застосували класи стилів, які не визначені в будь-яких таблицях стилів, або подивіться, які визначені вами класи стилів не використовуються.

Дуже корисно для розсічення незнайомих веб-сайтів.

Однак він не знаходить невикористаних зображень.

Збірка канарки Chrome має на панелі інструментів для розробників опцію " CSS Coverage" як одну з функцій експериментального розробника. Цей параметр відображається на вкладці часової шкали і може використовуватися для отримання списку невикористаного CSS.

Зверніть увагу, що вам потрібно буде включити цю функцію і в налаштуваннях на панелі інструментів розробника. Ця функція, мабуть, має стати офіційним випуском хрому.

Я знайшов цей інструмент, який працює з усіма версіями Firefox! Щоб дізнатись, як це працює, потрібно трохи часу, але як тільки він починається, це здається досить непоганим. Це дозволить зберегти нову версію CSS із зауваженими селекторами CSS, щоб ви могли швидко відновити, якщо потрібно.

Використання CSS - Firefox Addon

Цей маленький інструмент дає вам список правил 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. Але я зробив невелику програму ще раз, щоб допомогти мені почистити проекти веб-сайтів

Знайти-невикористані файли

Це не допомагає з CSS та іншим, але натомість із сиротами-зображеннями та іншими типами файлів.

Сподіваюся, це допомагає!

Гелій CSS - чудовий інструмент для цього. Слід зазначити, що цей інструмент слід запускати на розробці або локальній версії вашого веб-сайту. Якщо запустити це у виробничій версії, ваші відвідувачі зможуть побачити тестове середовище гелію.

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

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

Щоб відповісти на запитання про інструмент пошуку невикористаних файлів зображень, ви можете скористатися Xenu Link Sleuth, щоб павук вашого веб-сайту, щоб знайти всі зображення, якими користується ваш сайт. Потім Xenu запропонує вам отримати доступ до ftp, щоб він міг сканувати ваші каталоги, щоб знайти осиротілі файли. Я ще не використовував його на виробничому сервері, але це здається гідним для вивчення.

РЕДАКТУВАННЯ: Ви просто повинні бути обережними, щоб не видаляти зображення, які використовуються javascript.