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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

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

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

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

   

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

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

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

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

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

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

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

   

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

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

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

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

   

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

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

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

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

   

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

2. Выберите Медленный 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 , которые он находит в заголовках ресурсов или содержимом.

   

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

   

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

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

   

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

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

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

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

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

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

   

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

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

   

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

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

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

   

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

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

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

   

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

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

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

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

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