Вопрос:

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

html css

52391 просмотра

13 ответа

40709 Репутация автора

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

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

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

Ответы (13)


3 плюса

16910 Репутация автора

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

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

67 плюса

38087 Репутация автора

Решение

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

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

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

18 плюса

34062 Репутация автора

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

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

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something
Автор: BCS Размещён: 28.08.2008 08:30

3 плюса

12112 Репутация автора

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

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

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

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

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

9 плюса

7445 Репутация автора

CSS Redundancy Checker - это инструмент, который вы запускаете локально, передавая таблицу стилей и список URL-адресов или каталог HTML-файлов. Вот описание, приведенное на сайте инструмента:

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

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

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

1 плюс

9434 Репутация автора

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

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

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

74 плюса

1474 Репутация автора

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

-1 плюса

2356 Репутация автора

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

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

Автор: Justin Nafe Размещён: 04.12.2012 08:27

5 плюса

15386 Репутация автора

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

csscss

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

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

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

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

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

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

0 плюса

2198 Репутация автора

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

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

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

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

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

1 плюс

10474 Репутация автора

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

17 Репутация автора

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

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

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

Автор: James Aldern Размещён: 08.10.2015 02:45

2 плюса

6010 Репутация автора

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

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

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

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

Автор: Abhinav Galodha Размещён: 21.11.2016 04:55
Вопросы из категории :
32x32