Как узнать, какие CSS-файлы используются для текущей страницы

Question

У меня много CSS-файлов на странице.Но многие из этих файлов не используются стилями.Можно ли определить, какие файлы используются страницей, а какие нет.

Answer 1

Используйте http://getfirebug.com/ для отладки страницы.

При просмотре CSS он будет ссылаться на используемую таблицу стилей.

Например:

Из скриншота видно, что при использовании Firebug синим текстом на странице отображается таблица стилей style.css.

Работайте вниз по дереву в Firebug и просто наводите курсор на свои элементы и смотрите, какие таблицы стилей используются.

Answer 2

Новое в Chrome 59 - инструмент покрытия, который показывает покрытие кода CSS и JS.Он покажет вам, какой процент CSS-файлов используется на странице.Когда вы нажмете на этот файл, он покажет вам, какие стили используются, а какие нет.Больше информации здесь: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 3

Вы можете сделать одну вещь:

1. открыть сайт в Firefox

2. Используйте firebug, чтобы указать элемент управления, на котором вы хотите увидеть примененные классы.

3. В исходном коде html в firebug вы можете найти примененные классы CSS для конкретного элемента управления.

4. Найдите эти классы в ваших файлах CSS.

5. Повторите этот процесс для всех элементов управления веб-страницы.

Теперь вы можете удалить те файлы CSS, которые не используются на этой веб-странице.

Спасибо.

Answer 4

Вы можете отлаживать с помощью firebug (http://getfirebug.com/). Он покажет, что используется для чего и позволяет узнать.

Answer 5

Способ поиска или доступа к файлам CSS, используемый для текущей страницы, может различаться в зависимости от используемого браузера и / или операционной системы.

Здесь я собираюсь поделиться с вами Открытие панели «Консоль» (Developer Tool) Chrome, Firefox, Internet Explorer, Safari, Opera в Windows и Mac OS.

Когда вы откроете консоль текущего браузера, щелкните элемент, который вы хотите проверить, и справа вы увидите имя вкладки Стили , как показано ниже:

Как видите, изображение имеет имя CSS-файла (в данном примере с именем "desktop_ltr.css" )

Answer 6

Есть много способов узнать, какой CSS используется страницей. вот некоторые из них:

1) если вы используете firefox, тогда firebug полезен для использования. http://getfirebug.com/ просто щелкните правой кнопкой мыши на странице и используйте опцию Inspect Element

2) если вы используете IE, то инструменты разработчика доступны в IE

3) Если вы используете Google Chrome, то вы можете напрямую использовать опцию проверки элемента, щелкнув правой кнопкой мыши на странице.

Answer 7

Используйте аддон для веб-разработчиков с Firefox. http://chrispederick.com/work/web-developer/

После установки этого дополнения перейдите на страницу Firefox Tool-> Веб-разработчик -> CSS-> Просмотр CSS.