Как посмотреть файлы .css, загруженные на странице в Google Chrome?

Question

Как посмотреть файлы .css, загруженные на странице в Google Chrome?Я вижу .js (сценарии), но не .css

Answer 1

Вкладка Resources по состоянию на январь 2011 года , используйте вкладку Network и фильтр для CSS запросов.

Оригинальный ответ (2010)

Вы можете использовать «Проверка элемента» (щелчок правой кнопкой мыши) на любом элементе, затем выбрать вкладку «Ресурсы», нажать «Включить отслеживание ресурсов для этого сеанса». Затем на вкладке «Все» («Все», «Документы», «Изображения», «Сценарии») и т. Д. Можно нажать «Таблицы стилей».

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

Answer 2

Внимание: этот ответ устарел! Для последних версий Chrome, проверьте ответ Dr1Ku ниже.

На вкладке Инструменты разработчика Chrome (CTRL + SHIFT + I) перейдите на Ресурсы (может потребоваться включить отслеживание ресурсов на этой странице) и нажмите на вкладку Стили . Это покажет все CSS-файлы, загруженные этой страницей.

Answer 3

Если вы заинтересованы, есть способ найти их в JS:

(Пожалуйста, используйте современный браузер)

var sts = document.styleSheets;
var result = [];
for (var i = 0; i < sts.length; i++) {
    var st = sts.item(i);
    if (st && st.href) {
       result.push(st.href.match(/\w*\.css/));
    }
}
console.dir(result);

Answer 4

Я заказываю, чтобы увидеть, какие файлы были загружены, щелкните правой кнопкой мыши на пустом разделе на странице и выберите Просмотр страницы источника . Отсюда он покажет HTML-страницу в том виде, в каком она была отображена в Chrome. Если вы заглянете в раздел заголовка, то увидите список всех внешних файлов, которые также были вызваны, и они должны быть гиперссылками, просто нажмите на любой из них, и Chrome покажет, что этот конкретный файл на новой вкладке. *

Удачи.

Answer 5

Апрель 2019

Чтобы увидеть файлы CSS, загруженные на страницу:

1. Перейти на вкладку Сеть
2. Перезагрузить страницу
3. Фильтр по CSS

Я знаю, что это старый вопрос, но большинство ответов устарели.

Answer 6

Щелкните правой кнопкой мыши в любом месте страницы и выберите Inspect element. Оттуда вы захотите перейти на вкладку Resources и сообщить Chrome, должна ли она всегда включать эту панель или только один раз для сеанса (выберите тот, который вы предпочитаете). Оказавшись внутри, вы увидите все файлы слева. Вы можете просмотреть содержимое, щелкнув на крошечной вкладке Content рядом с Headers справа.