Проверка сетевой активности

Используйте средство "Сеть" , чтобы убедиться, что ресурсы, необходимые для запуска веб-страницы, скачиваются должным образом и что запросы к API на стороне сервера отправляются правильно. Проверьте свойства отдельных HTTP-запросов и ответов, таких как заголовки HTTP, содержимое или размер.

Это пошаговое руководство по средству "Сеть " для проверки сетевой активности для страницы.

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

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

Когда следует использовать средство "Сеть"

Как правило, используйте средство "Сеть" , когда необходимо убедиться, что ресурсы скачиваются правильно, а запросы к API на стороне сервера отправляются должным образом. Наиболее распространенные варианты использования средства "Сеть ":

• Убедитесь, что ресурсы на самом деле скачиваются.

• Проверка параметров запроса и ответов вызовов API на стороне сервера.

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

Откройте средство "Сеть"

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

1. Откройте демонстрацию Проверки сетевой активности на новой вкладке или окне:

   

2. Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Откроются средства разработчика.

3. В devTools на панели действий выберите вкладку Сеть . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты ("):

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

   

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

Общие сведения о пользовательском интерфейсе средства "Сеть"

Средство "Сеть" состоит из трех main частей:

• Верхняя панель инструментов содержит параметры для настройки средства и фильтрации сетевых запросов.
• Под верхней панелью инструментов диаграмма Обзор предоставляет общий обзор сетевого трафика с течением времени и позволяет фильтровать сетевые запросы.
• Под диаграммой Обзор в разделе Журнал сети отображаются действия сети и можно проверять отдельные запросы.

Ведение журнала сетевой активности

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

1. Обновите веб-страницу. Средство "Сеть" регистрирует все сетевые действия в журнале сети:

   

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

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

   • Состояние. Код состояния HTTP для ответа.

   • Тип. Тип ресурса.

   • Инициатор. Причина запроса ресурса. Щелкнув ссылку в столбце Инициатор, вы перейдете к исходному коду, вызвавшего запрос.

   • Время. Длительность запроса.

   • Водопад. Графическое представление различных этапов запроса. Чтобы отобразить разбивку, наведите указатель мыши на каскад.

   Обратите внимание, что на диаграмме Обзор также показана сетевая активность. В этом руководстве вы не будете использовать граф Обзор , поэтому его можно скрыть. См. раздел Скрытие области "Обзор".

   После открытия средств разработки он записывает сетевые действия в журнал сети.

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

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

4. Снова просмотрите нижнюю часть журнала сети . Отобразится новый ресурс с именем getstarted.json :

   

Показать дополнительные сведения

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

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

   

2. Чтобы просмотреть полный URL-адрес ресурса, наведите указатель мыши на его ячейку в столбце Имя .

Имитация медленного сетевого подключения

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

1. Выберите раскрывающийся список Регулирование на верхней панели инструментов. По умолчанию задано значение Без регулирования .

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

   

3. Нажмите кнопку Перезагрузить () (или щелкните правой кнопкой мыши Обновить), а затем выберите Пустой кэш и жесткое обновление:

   

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

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

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

Создание снимков экрана

На снимках экрана показано, как веб-страница выглядит с течением времени во время загрузки.

1. Нажмите кнопку () и установите флажок Записать снимки экрана :

   

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

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

   

3. Щелкните первый эскиз. DevTools показывает, какие сетевые действия происходили в тот момент времени:

   

4. Еще раз щелкните () и установите флажок Записать снимки экрана , чтобы закрыть панель Снимки экрана .

5. Обновите страницу еще раз.

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

Выберите ресурс, чтобы узнать больше о нем.

1. Нажмите network-tutorial/. Отображается панель Заголовки . Используйте эту панель для проверки заголовков HTTP:

   

2. Выберите панель Предварительный просмотр . Показана базовая отрисовка HTML:

   

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

3. Выберите панель Ответ . Отображается исходный код HTML:

   

   Совет. При сведении файла нажмите кнопку Формат () в нижней части панели Ответ , чтобы повторно отформатировать содержимое файла для удобства чтения.

   Например, если ответ содержит минимальные данные JSON, нажмите кнопку Формат , чтобы изменить форматирование синтаксиса JSON, чтобы каждое свойство объекта находилось в отдельной строке. Вы также можете использовать средство просмотра JSON для просмотра отформатированных и выделенных ответов JSON на вкладке браузера. См . раздел Просмотр форматированного JSON.

4. Выберите панель Время . Отображается разбивка сетевой активности для ресурса:

   

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

   

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

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

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

1. Выберите Поиск (). Область Поиск откроется слева от журнала сети:

   

2. Введите no-cache и нажмите клавишу ВВОД. На панели Поиск перечислены все экземпляры no-cache , которые он находит в заголовках ресурсов или содержимом:

   

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

   

4. Закройте панель Поиск и панель Заголовки .

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

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

Панель инструментов Фильтры должна быть включена по умолчанию. Если панель инструментов Фильтры не включена, щелкните Фильтр (), чтобы отобразить ее:

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

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

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

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

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

4. Введите larger-than:1000 в текстовое поле Фильтр . DevTools отфильтровывает любой ресурс с ответами размером менее 1000 байт.

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

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

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

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

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

   

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

3. Чтобы удалить фильтры и снова отобразить все ресурсы, выберите Все.

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

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

Как выглядит и ведет себя страница, когда некоторые ресурсы страницы недоступны? Он полностью завершается сбоем или по-прежнему является несколько функциональным? Блокировать запросы, чтобы узнать:

1. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.

2. Введите block, выберите Показать блокировку сетевых запросов и нажмите клавишу ВВОД:

   

3. Нажмите кнопку Добавить шаблон (), затем введите main.cssи нажмите кнопку Добавить:

   

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

   В строке main.css журнала сети красный текст означает, что ресурс заблокирован:

   

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

Заключение

Поздравляем, вы завершили работу с руководством! Теперь вы знаете, как использовать средство "Сеть" в Средствах разработки Microsoft Edge.

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

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.