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

Kayce Basques

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

См. «Справочник по сети» , если вместо этого вы хотите просмотреть функции.

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

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

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

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

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

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

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

1. Откройте демо-версию «Начало работы» .

   

   Возможно, вы захотите переместить демо-версию в отдельное окно.

   

2. Откройте DevTools , нажав Control+Shift+J или Command+Option+J (Mac). Откроется панель Консоль .

   

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

   

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

   

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

Записывать сетевую активность

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

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

   

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

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

   • Статус : код ответа HTTP.
   • Тип : тип ресурса.
   • Инициатор : Что послужило причиной запроса ресурса. Щелкнув ссылку в столбце «Инициатор», вы перейдете к исходному коду, вызвавшему запрос.
   • Размер : количество ресурсов, передаваемых по сети.
   • Время : сколько времени занял запрос.
   Примечание. График над сетевым журналом называется «Обзор». Вы не будете использовать его в этом уроке, поэтому можете скрыть его, если хотите. См. Скрытие дорожки обзора .

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

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

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

   

Показать больше информации

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

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

   

Совет: Вы можете увидеть полный URL-адрес ресурса, наведя указатель мыши на его ячейку в столбце «Имя» .

Имитировать более медленное сетевое соединение

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

1. Щелкните раскрывающийся список «Регулирование », в котором по умолчанию установлено значение «Без регулирования» .

   

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

   

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

   

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

   Примечание. Рабочий процесс «Очистить кэш и жесткая перезагрузка» доступен только при открытом DevTools.

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

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

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

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

2. Установите флажок « Снимки экрана» .

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

   

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

   

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

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

Проверка сведений о ресурсе

Щелкните ресурс, чтобы узнать о нем дополнительную информацию. Попробуйте сейчас:

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

   

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

   

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

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

   

   Совет: Когда файл минимизирован, нажатие кнопки «Форматировать data_object» в нижней части вкладки «Ответ» переформатирует содержимое файла для удобства чтения.

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

   

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

   

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

   

Поиск сетевых заголовков и ответов

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

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

1. Нажмите « Поиск» . Вкладка «Поиск» открывается слева от журнала сети .

   

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

   

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

   

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

   

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

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

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

1. Нажмите «Фильтр» filter_alt , чтобы отобразить его.

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

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

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

   

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

   

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

   

4. Введите domain:raw.githubusercontent.com в текстовое поле «Фильтр» . DevTools отфильтровывает любой ресурс с 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, связанных с проверкой сетевой активности, ознакомьтесь с Справочником по сети .