Это руководство научит вас, как использовать Chrome DevTools для просмотра ресурсов веб-страницы. Ресурсы — это файлы, которые нужны странице для корректного отображения. Примерами ресурсов являются файлы CSS, JavaScript и HTML, а также изображения.
В этом руководстве предполагается, что вы знакомы с основами веб-разработки и Chrome DevTools .
Открытые ресурсы
Если вы знаете имя ресурса, который хотите проверить, меню команд предоставляет быстрый способ открыть этот ресурс.
Нажмите 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 — это каталог.
- (index) — основной HTML-документ.
- iu3 — это другой контекст просмотра. Этот контекст, вероятно, был создан элементом
<iframe>, встроенным в основной документ HTML. - sw.js — это контекст выполнения Service Worker.
Щелкните ресурс, чтобы просмотреть его в редакторе .
Рисунок 7. Просмотр файла в редакторе
Поиск по имени файла
По умолчанию панель Page группирует ресурсы по каталогам. Чтобы отключить эту группировку и просматривать ресурсы каждого домена в виде плоского списка:
- Откройте панель страниц . См. Обзор по каталогу .
Нажмите «Дополнительные параметры».
и отключите группировку по папкам . 
Рисунок 8. Параметр « Группировать по папке»
Ресурсы организованы по типу файла. В каждом типе файла ресурсы организованы в алфавитном порядке.
Рисунок 9. Панель страниц после отключения группировки по папкам
Просмотр по типу файла
Чтобы сгруппировать ресурсы по типу файла:
Нажмите вкладку Application . Откроется панель Application . По умолчанию панель Manifest обычно открывается первой.
Рисунок 10. Панель приложений
Прокрутите страницу вниз до панели «Рамки» .
Рисунок 11. Панель «Рамки»
Разверните разделы, которые вас интересуют.
Щелкните ресурс, чтобы просмотреть его.
Рисунок 11. Просмотр ресурса на панели приложений
Просмотр файлов по типу на панели «Сеть»
См. Фильтр по типу ресурса .
Рисунок 12. Фильтрация CSS в сетевом журнале