В этом руководстве вы узнаете, как использовать Chrome DevTools для просмотра ресурсов веб-страницы. Ресурсы — это файлы, которые необходимы странице для правильного отображения. Примеры ресурсов включают файлы CSS, JavaScript и HTML, а также изображения.
В этом руководстве предполагается, что вы знакомы с основами веб-разработки и инструментами разработчика Chrome .
Открытые ресурсы
Если вы знаете имя ресурса, который хотите проверить, меню команд обеспечивает быстрый способ открытия ресурса.
Нажмите Control + P или Command + P (Mac). Откроется диалоговое окно Открыть файл .
Рисунок 1 . Диалоговое окно «Открыть файл»
Выберите файл из раскрывающегося списка или начните вводить имя файла и нажмите Enter , как только правильный файл будет выделен в поле автозаполнения.
Фигура 2 . Ввод имени файла в диалоговом окне «Открыть файл»
Открытие ресурсов на панели «Сеть»
См. раздел Проверка сведений о ресурсе .
Рисунок 3 . Проверка ресурса на панели «Сеть»
Отображение ресурсов на панели «Сеть» на других панелях.
В разделе «Обзор ресурсов» ниже показано, как просматривать ресурсы из различных частей пользовательского интерфейса DevTools. Если вы когда-нибудь захотите проверить ресурс на панели «Сеть» , щелкните ресурс правой кнопкой мыши и выберите «Показать на панели «Сеть» ».
Рисунок 4 . Параметр «Показать на панели сети»
Просмотр ресурсов
Просмотр ресурсов на панели «Сеть»
См. Журнал сетевой активности .
Рисунок 5 . Ресурсы страницы в сетевом журнале
Просмотр по каталогу
Чтобы просмотреть ресурсы страницы, организованные по каталогам:
- Перейдите на вкладку «Источники» , чтобы открыть панель «Источники» .
Перейдите на вкладку «Страница» , чтобы отобразить ресурсы страницы. Откроется панель «Страница» .
Рисунок 6 . Панель « Страница »
Вот разбивка неочевидных элементов на рисунке 6 :
- top — основной контекст просмотра документов.
- airhorner.com представляет собой домен. Все вложенные в него ресурсы происходят из этого домена. Например, полный URL-адрес файла comlink.global.js , вероятно, будет
https://airhorner.com/scripts/comlink.global.js. - scripts — это каталог.
- (индекс) — основной HTML-документ.
- iu3 — еще один контекст просмотра. Этот контекст, вероятно, был создан элементом
<iframe>, встроенным в основной HTML-документ. - sw.js — это контекст выполнения сервисного работника.
Щелкните ресурс, чтобы просмотреть его в редакторе .
Рисунок 7 . Просмотр файла в редакторе
Просмотр по имени файла
По умолчанию панель страниц группирует ресурсы по каталогу. Чтобы отключить эту группировку и просмотреть ресурсы каждого домена в виде плоского списка:
- Откройте панель «Страница» . См. раздел Просмотр по каталогу .
Нажмите «Дополнительные параметры».
и отключите группировку по папкам . 
Рисунок 8 . Параметр «Группировать по папке»
Ресурсы организованы по типам файлов. Внутри каждого типа файла ресурсы организованы в алфавитном порядке.
Рисунок 9 . Панель страниц после отключения группировки по папкам
Просмотр по типу файла
Чтобы сгруппировать ресурсы по типу файла:
Откройте вкладку «Приложение» . Откроется панель приложения . По умолчанию панель «Манифест» обычно открывается первой.
Рисунок 10 . Панель приложений
Прокрутите вниз до панели «Кадры» .
Рисунок 11 . Панель «Кадры»
Расширьте разделы, которые вас интересуют.
Щелкните ресурс, чтобы просмотреть его.
Рисунок 11 . Просмотр ресурса на панели приложения
Просмотр файлов по типу на панели «Сеть»
См. Фильтрация по типу ресурса .
Рисунок 12 . Фильтрация CSS в сетевом журнале