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

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

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

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

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

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

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

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

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

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

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

    Демо

    Рисунок 1 . Демо

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

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

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

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

    Консоль

    Рисунок 3 . Консоль

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

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

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

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

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

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

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

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

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

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

    Сетевой журнал

    Рисунок 6 . Сетевой журнал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Включение регулирования

    Рисунок 9 . Включение регулирования

  2. Выберите Медленный 3G .

    Выбор медленного 3G

    Рисунок 10 . Выбор медленного 3G

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

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

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

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

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

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

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

    Скриншоты загрузки страницы

    Рисунок 12 . Скриншоты загрузки страницы

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

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

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

  4. Нажмите «Сделать скриншоты». Делать скриншоты еще раз, чтобы закрыть панель «Снимки экрана».

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

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

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

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

    Вкладка «Заголовки»

    Рисунок 14 . Вкладка «Заголовки»

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

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

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

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

  3. Откройте вкладку «Ответ» . Показан исходный код HTML.

    Вкладка «Ответ»

    Рисунок 16 . Вкладка «Ответ»

  4. Откройте вкладку «Время» . Показана разбивка сетевой активности по данному ресурсу.

    Вкладка «Время»

    Рисунок 17 . Вкладка «Время»

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

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

    Рисунок 18 . Кнопка «Закрыть»

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

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

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

    Панель поиска

    Рисунок 19 . Панель поиска

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

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

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

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

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

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

  4. Закройте панель «Поиск» и вкладку «Время».

    Кнопки закрытия

    Рисунок 22 . Кнопки закрытия

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

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

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

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

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

  1. Нажмите Фильтр Фильтр чтобы показать это.

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

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

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

    Строковый фильтр

    Рисунок 24 . Строковый фильтр

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

    Фильтр регулярных выражений

    Рисунок 25 . Фильтр регулярных выражений

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

    Отрицательный фильтр

    Рисунок 26 . Отрицательный фильтр

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

    Фильтр недвижимости

    Рисунок 27 . Фильтр недвижимости

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

  5. Очистите текстовое поле «Фильтр» от любого текста.

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

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

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

    Показаны только файлы CSS

    Рисунок 28 . Показаны только файлы CSS

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

    Показаны только файлы CSS и JS

    Рисунок 29 . Показаны только файлы CSS и JS

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

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

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

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

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

    Меню команд

    Рисунок 30 . Меню команд

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

    Показать блокировку запросов

    Рисунок 31 . Показать блокировку запросов

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

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

    Блокировка main.css

    Рисунок 32 . Блокировка main.css

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

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

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

    Рисунок 33 . main.css заблокирован

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

Следующие шаги

Поздравляем, вы завершили обучение. Нажмите «Выдать награду» , чтобы получить награду.

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