Вкладка Network
Вкладка Network содержит список запросов, которые страница отправила серверу, и полученных ответов. По ней определяют, где находится дефект: в данных, которые вернул сервер, или в том, как страница их отобразила.
Как читать список
Каждая строка — один запрос. Значимые колонки: Name (адрес), Status (код ответа), Method, Type, Size и Time. Для ответа из кэша в колонке Size вместо размера указано from disk cache или from memory cache.
Строки, подсвеченные красным
Красным отмечены запросы, завершившиеся с ошибкой. Возможны два случая: сервер вернул код ошибки либо ответ не был получен вообще. Различие определяет, где искать дефект.
Красное с кодом статуса
Запрос дошёл до сервера и вернулся с кодом 4xx или 5xx. Ответ существует, его можно изучить: во вкладке Response обычно содержится сообщение с причиной отказа. Запрос, код статуса и тело ответа можно приложить к отчёту о дефекте.
Красное без кода статуса
- (failed) — ответ не получен: нет сетевого соединения, не разрешилось имя хоста, соединение отклонено или сервер не запущен. При наведении на строку отображается ошибка браузера, например ERR_CONNECTION_REFUSED.
- CORS error — запрос отправлен, но браузер не отдал ответ странице. Сервер работает; неверно настроены заголовки разрешений.
- (blocked:…) — запрос остановлен расширением, блокировщиком рекламы или политикой безопасности страницы. Такие случаи до оформления дефекта нужно воспроизвести в окне инкогнито.
- (canceled) — запрос прерван, обычно из-за перехода на другую страницу или потому, что его отменил код. В большинстве случаев это не дефект.
Что внутри одного запроса
- Headers — метод, полный URL, статус, заголовки запроса и ответа. В блоке Request Headers находятся заголовки, которые отправил браузер (например, Content-Type или Authorization); в Response Headers — то, что вернул сервер (например, Content-Type, Set-Cookie или X-Request-Id).
- Payload — переданные данные: тело запроса и параметры адреса.
- Response — ответ в исходном виде; Preview показывает те же данные в отформатированном виде, что удобнее для JSON.
- Timing — распределение времени по этапам запроса, используется при разборе медленных ответов.
Полезные переключатели
- Фильтр — Fetch/XHR скрывает изображения, шрифты и стили и оставляет только обращения к бэкенду.
- Preserve log — сохраняет список при перезагрузках и перенаправлениях. Без него запрос, вызвавший переход, из списка удаляется.
- Disable cache — пока DevTools открыты, все файлы запрашиваются с сервера. Используется, чтобы убедиться, что проверяется актуальная версия.
Как скопировать данные о запросе для баг-репорта
Правый клик по запросу → Copy → Copy as cURL даёт точный отправленный запрос, его можно повторить из терминала. Код статуса, тело запроса и тело ответа — три элемента, которые делают отчёт о дефекте воспроизводимым.
На собеседовании
Эта группа проверяет, умеете ли вы по списку запросов определить, на чьей стороне дефект, и собрать данные для отчёта. Попробуйте ответить сами, прежде чем открыть ответ.
juniorначальный уровень знаний
1. Зачем нужен переключатель Preserve log?
Он сохраняет список запросов при перезагрузках и переходах. Без него запрос, вызвавший переход, — например, отправка формы с редиректом — удаляется вместе с предыдущей страницей, а обычно именно он и нужен.
2. Что приложить к баг-репорту из вкладки Network?
Код статуса, тело запроса и тело ответа — три элемента, которые делают отчёт воспроизводимым. Сам запрос удобнее всего скопировать правым кликом → Copy → Copy as cURL: получится точный отправленный запрос, его можно повторить из терминала.
3. Что можно посмотреть внутри одного запроса?
Запрос раскрывается по клику, внутри — несколько вкладок:
- Headers — метод, полный URL, код статуса и заголовки: что отправил браузер и что вернул сервер.
- Payload — тело запроса и параметры адреса.
- Response — ответ в исходном виде, Preview — он же отформатированный, что удобнее для JSON.
- Timing — распределение времени по этапам запроса, нужно при разборе медленных ответов.
middleболее продвинутый уровень
4. Как по вкладке Network понять, на чьей стороне дефект?
Сравнить тело ответа с тем, что показывает страница. Если сервер вернул правильные данные, а на экране их нет или они искажены, дефект на фронтенде. Если данные уже неверны в самом ответе, искать нужно раньше: в запросе, который отправила страница, или на сервере.
5. Что означает красная строка без кода статуса?
Что ответ не получен вообще. Причина указана в самой строке:
- (failed) — нет соединения, не разрешилось имя хоста или сервер не запущен.
- CORS error — ответ пришёл, но браузер не отдал его странице: неверно настроены заголовки разрешений.
- (blocked:…) — запрос остановили расширение, блокировщик рекламы или политика безопасности страницы.
- (canceled) — запрос прервали, обычно из-за перехода на другую страницу. Чаще всего это не дефект.
6. Как убедиться, что вы тестируете актуальную версию, а не кэш?
Включить Disable cache при открытых DevTools или выполнить жёсткую перезагрузку. В колонке Size у ответа из кэша вместо размера стоит from disk cache или from memory cache — признак, что файл не запрашивался у сервера.
Вопросы по остальным темам собраны на странице Вопросы на собеседовании QA по DevTools.