Проверьте сетевую активность

Kayce Basques

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

Для просмотра функций воспользуйтесь справочником по сети .

Читайте дальше или посмотрите видеоверсию этого руководства:

Когда использовать панель «Сеть»

В целом, панель «Сеть» используется, когда необходимо убедиться, что ресурсы загружаются или выгружаются должным образом. Наиболее распространенные сценарии использования панели «Сеть» :

• Необходимо убедиться, что ресурсы вообще загружаются или скачиваются.
• Проверка свойств отдельного ресурса, таких как его HTTP-заголовки, содержимое, размер и так далее.

Если вы ищете способы улучшить скорость загрузки страницы, не начинайте с панели «Сеть» . Существует множество проблем со скоростью загрузки, не связанных с сетевой активностью. Начните с панели «Маяк», поскольку она предоставляет целенаправленные рекомендации по улучшению вашей страницы. См. «Оптимизация скорости веб-сайта» .

Откройте панель «Сеть».

Чтобы получить максимальную пользу от этого руководства, откройте демо-версию и опробуйте функции на странице демоверсии.

1. Откройте демонстрационную версию для начала работы .

   

   Возможно, вам будет удобнее переместить демонстрационную версию в отдельное окно.

   

2. Откройте инструменты разработчика , нажав Control+Shift+J или Command+Option+J (Mac). Откроется панель «Консоль» .

   

   Возможно, вам будет удобнее закрепить DevTools в нижней части окна .

   

3. Щелкните вкладку «Сеть» . Откроется панель «Сеть» .

   

В данный момент панель «Сеть» пуста. Это потому, что DevTools регистрирует сетевую активность только во время работы, а с момента открытия DevTools никакой сетевой активности не было.

Журнал сетевой активности

Чтобы просмотреть сетевую активность, вызванную страницей:

1. Перезагрузите страницу. Панель «Сеть» регистрирует всю сетевую активность в журнале сети .

   

   Каждая строка журнала сети представляет собой ресурс. По умолчанию ресурсы перечислены в хронологическом порядке. Верхний ресурс обычно представляет собой основной HTML-документ. Нижний ресурс — это то, что было запрошено последним.

   Каждый столбец содержит информацию о ресурсе. По умолчанию используются следующие столбцы:

   • Статус : Код ответа HTTP.
   • Тип : Тип ресурса.
   • Инициатор : причина запроса ресурса. Щелчок по ссылке в столбце «Инициатор» переводит вас к исходному коду, вызвавшему запрос.
   • Размер : Объем ресурсов, передаваемых по сети.
   • Время : Сколько времени заняло выполнение запроса.

2. Пока у вас открыты инструменты разработчика, они будут записывать сетевую активность в журнал сети . Чтобы это продемонстрировать, сначала посмотрите на нижнюю часть журнала сети и обратите внимание на последнюю активность.

3. Теперь нажмите кнопку «Получить данные» в демонстрационной версии.

4. Ещё раз взгляните на нижнюю часть журнала сетевых запросов . Там появился новый ресурс под названием getstarted.json . Нажатие кнопки «Получить данные» привело к тому, что страница запросила этот файл.

   

Показать дополнительную информацию

Столбцы журнала сети можно настраивать. Вы можете скрыть столбцы, которые не используете. Также есть много столбцов, скрытых по умолчанию, которые могут оказаться полезными.

1. Щелкните правой кнопкой мыши заголовок таблицы сетевых журналов и выберите «Домен» . Теперь отобразится домен каждого ресурса.

   

Имитация более медленного сетевого соединения

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

1. Нажмите на выпадающее меню «Ограничение скорости », в котором по умолчанию установлено значение «Ограничение скорости отсутствует» .

   

2. Выберите 3G .

   

3. Нажмите и удерживайте кнопку «Обновить» , затем выберите «Очистить кэш и выполнить принудительную перезагрузку» .

   

   При повторных посещениях браузер обычно использует часть файлов из своего кэша , что ускоряет загрузку страницы. Функция «Очистить кэш и выполнить принудительную перезагрузку» заставляет браузер обращаться к сети за всеми ресурсами. Это полезно, когда вы хотите посмотреть, как пользователь, впервые посещающий сайт, воспринимает загрузку страницы.

Сделать скриншоты

Скриншоты фиксируют внешний вид страницы в разные моменты времени во время загрузки и показывают, какие ресурсы загружаются на каждом этапе.

Чтобы сделать снимок экрана, выполните следующие действия:

1. Нажмите «Настройки сети» .

2. Включите флажок «Скриншоты » .

3. Перезагрузите страницу, используя алгоритм «Очистить кэш и выполнить принудительную перезагрузку» . См. раздел «Имитация более медленного соединения», если вам нужно напомнить, как это сделать. На вкладке «Скриншоты» отображаются миниатюры того, как страница выглядела в разные моменты процесса загрузки.

   

4. Щёлкните по первому изображению. Инструменты разработчика покажут, какая сетевая активность происходила в этот момент времени.

   

5. Установите флажок «Скриншоты» , чтобы закрыть вкладку «Скриншоты».

6. Перезагрузите страницу.

Проверьте подробные сведения о ресурсе.

Нажмите на ресурс, чтобы узнать о нём подробнее. Попробуйте прямо сейчас:

1. Щелкните getstarted.html . Откроется вкладка «Заголовки» . Используйте эту вкладку для просмотра HTTP-заголовков.

   

2. Чтобы просмотреть базовую HTML-версию, нажмите вкладку «Предварительный просмотр» .

   

   Эта вкладка полезна, когда API возвращает код ошибки в формате HTML, и проще прочитать сгенерированный HTML-код, чем исходный HTML-код, или при проверке изображений.

3. Чтобы просмотреть исходный HTML-код, нажмите вкладку «Ответ» .

   

4. Нажмите вкладку «Инициатор» , чтобы просмотреть древовидную структуру, отображающую цепочку инициаторов запросов.

   

5. Чтобы просмотреть подробную информацию о сетевой активности для этого ресурса, перейдите на вкладку «Время» .

   

6. Нажмите «Закрыть» , чтобы снова просмотреть журнал сети .

   

Поиск по заголовкам и ответам сети

Вкладку «Поиск» можно использовать для поиска определенной строки или регулярного выражения в заголовках HTTP-запросов и ответах всех ресурсов.

Например, предположим, вы хотите проверить, используют ли ваши ресурсы разумные политики кэширования .

1. Нажмите кнопку «Поиск » на панели действий или нажмите Command + F (macOS) или Control + F (Windows / Linux).

   Вкладка «Поиск» открывается слева от журнала сетевых запросов .

   

2. Введите Cache-Control и нажмите Enter. На вкладке «Поиск» отобразятся все найденные в заголовках ресурсов или содержимом вхождения Cache-Control .

   

3. Щелкните по результату, чтобы просмотреть его. Если запрос был найден в заголовке, откроется вкладка «Заголовки». Если запрос был найден в содержимом, откроется вкладка «Ответ» .

   

4. Закройте вкладки «Поиск» и « Заголовки» .

   

Фильтрация ресурсов

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

Панель фильтров должна быть включена по умолчанию. Если это не так:

1. Нажмите Filter_alt , чтобы отобразить его.

Фильтрация по строке, регулярному выражению или свойству

Поле ввода «Фильтр» поддерживает множество различных типов фильтрации.

1. Введите png в поле «Фильтр» . Отобразятся только файлы, содержащие текст png . В этом случае фильтру соответствуют только изображения в формате PNG.

   

2. Введите /.*\.[cj]s+$/ . Инструменты разработчика отфильтровывают все ресурсы, имена файлов которых не заканчиваются на j или c за которыми следует один или несколько символов s .

   

3. Введите команду -main.css . Инструменты разработчика отфильтруют main.css . Если какой-либо другой файл соответствует шаблону, он также будет отфильтрован.

   

4. Введите domain:raw.githubusercontent.com в текстовое поле «Фильтр» . Инструменты разработчика отфильтруют все ресурсы, URL-адрес которых не соответствует этому домену.

   

   Полный список свойств, подлежащих фильтрации, см. в разделе «Фильтрация запросов по свойствам» .

5. Очистите поле ввода фильтра от любого текста.

Фильтрация по типу ресурса

Чтобы сфокусироваться на определенном типе файлов, например, на таблицах стилей:

1. Нажмите CSS . Все остальные типы файлов будут отфильтрованы.

   

2. Чтобы просмотреть скрипты, удерживайте клавишу Control или Command (Mac), а затем щелкните JS .

   

3. Нажмите «Все» , чтобы снять фильтры и снова увидеть все ресурсы.

См. раздел «Запросы на фильтрацию» для получения информации о других рабочих процессах фильтрации.

Блокировка запросов

Как выглядит и ведёт себя страница, когда некоторые из её ресурсов недоступны? Она полностью перестаёт работать или всё ещё частично функционирует? Заблокируйте запросы, чтобы это выяснить:

1. Нажмите Control+Shift+P или Command+Shift+P (Mac), чтобы открыть меню команд .

   

2. Введите block , выберите «Показать блокировку запросов» и нажмите Enter.

   

3. Нажмите кнопку «Добавить шаблон» .

4. Введите main.css .

   

5. Нажмите «Добавить» .

6. Перезагрузите страницу. Как и ожидалось, стили страницы немного нарушены, потому что её основной файл стилей заблокирован. Обратите внимание на строку main.css в журнале сети. Красный текст означает, что ресурс заблокирован.

   

7. Снимите флажок «Включить блокировку запросов» .

Чтобы узнать больше о возможностях DevTools, связанных с анализом сетевой активности, ознакомьтесь со справочником по сети .