DevTools браузера: вкладка Network
↑ 1.7 Инструменты исследования: DevTools, логи, трассировки · → Следующая
Зачем это аналитику и PM
Кнопка на экране и метод в документации легко расходятся. Вкладка сети показывает, какой запрос страница отправила на самом деле: метод, адрес, код и тело.
План темы
- как открыть
- фильтры XHR/Fetch
- смотреть заголовки, тело и ответ
- тайминги
Объяснение
Вкладка сети в инструментах разработчика — список вызовов, которые сделал этот браузер, пока страница была открыта. Это не журнал сервера и не вызовы между сервисами за его спиной.
Как лента кассы. Каждый проход — отдельная строка: что заказали, чем ответили, сколько ждали. Если ленту включили после оплаты, покупки на ней нет.
Как открыть и отфильтровать
Панель в Chromium и Firefox часто открывают клавишей F12 или пунктом меню браузера. На macOS сочетание другое. Точную клавишу сверьте у себя. Вкладку со списком запросов обычно подписывают Network. Если подпись иная, ищите список адресов и кодов.
Запись должна идти до нажатия кнопки на странице. Обновите страницу уже с открытой панелью, если список пуст. Фильтр запросов данных (XHR и fetch) отсекает картинки и шрифты. Название плашки отличается у браузеров: где-то Fetch/XHR, где-то XHR. Сверьте подпись на экране.
У строки смотрят метод, адрес, код. Дальше три места: заголовки, тело запроса, тело ответа. Имена этих зон в Chrome и Firefox не совпадают. Ориентир — действие: служебные строки, то что ушло, то что вернулось.
Тайминг разлагает ожидание: очередь, имя хоста, соединение, шифрование, пауза до первого байта, скачивание. Английские подписи фаз в Chromium привычные, но не вечные. Для бага обычно важно, где сидит почти всё время: до первого байта или в скачивании большого тела.
Примеры
Что выписать из одной строки, без секретов:
POST /orders
код 201
тело ушло: title = example
ответ: есть id
дольше всего: ожидание первого байтаАдрес стенда смотрят целиком, но в задачу не кладут ключ из заголовка допуска.
Нюансы и подводные камни
- Панель открыли после клика. Запроса уже нет. Повторите действие.
- Перезагрузка очищает список, если сохранение журнала выключено. Подпись пункта сверьте.
- Запрос к другому хосту, чем в задаче. Смотрите имя сервера, не только путь.
- Строка OPTIONS перед POST — предварительная проверка браузера, не ваш метод сохранения.
- Код и тело здесь — то, что увидело окно. Сервер мог отказать уже соседнему сервису и всё равно отдать странице
200.
Практика
Откройте вкладку сети, включите запись, обновите страницу, которая ходит за данными, и оставьте фильтр запросов данных.
Ожидаемый результат: у одной строки записаны метод, путь, код и есть ли тело запроса. Ключ и cookie в запись не попали. Если почти всё время сидит в ожидании первого байта, так и написано.
Вопросы с ответами
Почему список пустой?
Запись была выключена или панель открыли после клика. Включите запись и повторите действие. Проверьте, что не спрятали строки фильтром картинок наоборот: нужен фильтр данных, а не только документы.
Где тело, если виден только код?
Откройте выбранную строку и зону запроса, не список. У GET тела часто нет. У POST оно лежит отдельно от заголовков.
Долгий запрос — это всегда вина сети?
Нет. Если пауза до первого байта, ждёт сервер или очередь. Если долго качается тело, большой ответ. Фазы смотрите в тайминге, подписи сверьте.
Это заменяет логи сервера?
Нет. Здесь только вызовы из этого браузера. Путь через внутренние сервисы ищут по идентификатору в журналах.