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

Кейси Баски

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

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

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

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

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

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

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

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

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

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

    Демо-сайт.

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

    Демо в одном окне и это руководство в другом.

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

    Панель консоли в Devtools.

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

    DevTools прикреплены к нижней части окна.

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

    Панель Devtools Network закреплена в нижней части окна.

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

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

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

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

    Сетевой журнал с 5 запросами.

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

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

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

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

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

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

    Новый ресурс в сетевом журнале.

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

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

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

    Включение столбца Домен.

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

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

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

    Раскрывающийся список регулирования на панели «Сеть».

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

    Выбор 3G на панели «Сеть».

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

    Очистить кэш и выполнить жесткую перезагрузку.

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

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

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

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

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

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

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

    Скриншоты загрузки страницы на панели «Сеть».

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

    Сетевая активность, которая происходила во время первого скриншота.

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

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

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

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

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

    Вкладка «Заголовки» на панели «Сеть».

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

    Вкладка «Предварительный просмотр» на панели «Сеть».

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

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

    Вкладка «Ответ» на панели «Сеть».

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

    Вкладка «Инициатор» на панели «Сеть».

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

    Вкладка «Время» на панели «Сеть».

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

    Кнопка «Закрыть» для вкладки «Подробности».

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

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

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

    Вкладка «Поиск» слева от журнала сети.

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

    Результаты поиска по Cache-Control.

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

    Результат поиска выделен на вкладке «Заголовки».

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

    Кнопки «Закрыть».

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

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

Панель инструментов «Фильтры».

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

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

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

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

  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 . Все остальные типы файлов отфильтровываются.

    Панель «Сеть» показывает только файлы CSS.

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

    Панель «Сеть» показывает только файлы CSS и JS.

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

Другие рабочие процессы фильтрации см. в разделе Фильтрация запросов .

Блокировать запросы

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

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

    Меню команд на панели «Сеть».

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

    Опция «Показать блокировку запросов».

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

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

    Блокировка main.css на панели «Сеть»

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

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

    main.css заблокирован.

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

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