DevTools Network: анализ сетевой активности

curl — отличный инструмент для backend-разработчика. Но когда проблема на фронтенде (страница грузится медленно, запросы не уходят, API возвращает ошибки), нужен другой инструмент — DevTools Network. Вкладка Network в Chrome/Firefox/Edge показывает ВСЕ сетевые запросы, которые делает страница, с таймингами и заголовками.

Открываем и настраиваем

Вкладка Network открывается через F12 → Network (или Cmd+Opt+I на Mac). Советы перед началом:

Очистить предыдущие запросы — кнопка Clear (кружок с перечёркиванием).
Отключить кэш — чекбокс Disable cache. Иначе запросы из кэша не покажут сетевую активность.
Сохранять логи — чекбокс Preserve log. Без него логи очищаются при навигации.
Фильтровать по типу: XHR/Fetch (API-запросы), JS, CSS, Img, Doc, All.

Waterfall: временная диаграмма запросов

Главная информация на вкладке Network — waterfall (водопад). Каждый запрос показан как горизонтальная полоса, разбитая на цветные сегменты:

localhost
├─ GET /                 |--Queue--|--DNS--|--TCP--|--TLS--|--Req--|--TTFB--|--Download--|
├─ GET /style.css        |--Queue--|--Req--|--TTFB--|--Download--|
├─ GET /app.js            |--Req--|--TTFB--|--Download--|
├─ GET /logo.png          |-------Queue-------|--Req--|--TTFB--|--Download--|
├─ POST /api/user         |--Queue--|--Req--|--TTFB--|--Download--|

Каждый цвет — отдельный этап:

Queueing (серый). Запрос стоял в очереди (браузер ограничивает 6 соединений на домен в HTTP/1.1).
DNS lookup (тёмно-синий). DNS-разрешение.
Initial connection (оранжевый). TCP-рукопожатие.
SSL (фиолетовый). TLS-рукопожатие.
Request sent (голубой). Отправка запроса.
Waiting / TTFB (зелёный). Ожидание первого байта ответа от сервера.
Content Download (синий). Загрузка тела ответа.

Глядя на waterfall, ты мгновенно видишь узкое место: много фиолетового/оранжевого — проблема с соединением (нет Keep-Alive, много доменов), много зелёного — медленный сервер, много синего — большой ответ.

Смотрим заголовки

Кликнув на запрос, вкладка Headers показывает:

General — метод, статус-код, URL.
Response Headers — что сервер вернул: Content-Type, Cache-Control, Set-Cookie, все security-заголовки.
Request Headers — что клиент отправил: User-Agent, Cookie, Authorization, Accept.
Query String Parameters — распарсенные GET-параметры.

Это та же информация, что в curl -v, но в удобном структурированном виде.

Фильтры: находим нужные запросы

Таблица запросов можно фильтровать:

Фильтр: method:POST         — только POST
Фильтр: status-code:4*      — все 4xx ошибки
Фильтр: larger-than:1M      — ответы больше 1 МБ
Фильтр: domain:api.example  — только запросы к конкретному домену
Фильтр: -method:OPTIONS     — скрыть preflight-запросы

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

Ищем ошибки: красные запросы

Запросы, завершившиеся с HTTP-ошибками (4xx, 5xx), подсвечиваются красным. Кликнув, видишь статус-код и тело ответа (часто с описанием ошибки). Самые частые:

GET /api/user    404 Not Found    → неправильный URL или ID
POST /api/login  401 Unauthorized → просроченный токен, нужно залогиниться
POST /api/form   422 Validation Error → невалидные данные в теле
GET /api/data    500 Internal Server Error → баг на сервере, смотреть логи

Вкладка Preview показывает структурированный JSON-ответ (если Content-Type: application/json), а не сырой текст.

Копирование запросов как curl

Часто нужно повторить запрос из DevTools в curl. Правый клик → Copy → Copy as cURL:

curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGci...' \
  -H 'Accept: application/json' \
  --compressed

Это копирует точный запрос со всеми заголовками и cookies. Мощный приём для отладки: нашёл упавший запрос в DevTools → скопировал как curl → повторил в консоли → увидел verbose-вывод.

Performance: от Network к загрузке страницы

Вкладка Performance (рядом с Network) показывает уже не сетевые запросы, а то, что мы разбирали в модуле 8: построение DOM, CSSOM, Layout, Paint. Network показывает, ЧТО загружается и сколько времени. Performance показывает, ЧТО браузер делает с загруженным.

Проверь себя

Что означает зелёный сегмент в waterfall (TTFB)?
Как скопировать запрос из DevTools в виде curl-команды?
Какие запросы подсвечиваются красным в таблице Network?

<details> <summary>Ответы</summary>

Time To First Byte — время от отправки запроса до получения первого байта ответа. Включает обработку сервером. Большой TTFB = медленный сервер или база данных.
Правый клик по запросу → Copy → Copy as cURL. Вставится полная curl-команда со всеми заголовками.
Запросы с HTTP-ошибками: 4xx (клиентская ошибка, например 404) и 5xx (серверная ошибка, например 500).

</details>

Что унести с урока

Waterfall показывает тайминг каждого этапа запроса (Queueing, DNS, TCP, TLS, TTFB, Download).
Вкладка Headers показывает полную информацию: request/response заголовки, query-параметры.
Фильтры (method:POST, status-code:4*) быстро находят нужные запросы.
Copy as cURL — мост между DevTools и командной строкой.

В следующем уроке разберём как диагностировать реальный сайт — от первого взгляда на страницу до полного разбора сетевых проблем.

DevTools Network: анализ сетевой активности