Network Tab

Мониторинг сетевых запросов: HTTP-запросы, заголовки, тайминг, throttling

Зачем нужно

  • Видеть все HTTP-запросы страницы
  • Отлаживать API-вызовы (статусы, тела запросов/ответов)
  • Находить медленные запросы
  • Тестировать поведение при медленном интернете

Где используется

  • Отладка fetch/XHR-запросов
  • Оптимизация загрузки страницы
  • Проверка API-ответов
  • Тестирование offline/slow-3G

Предпосылки

Интерфейс Network Tab

Основные колонки

Колонка Описание
Name Имя ресурса (URL)
Status HTTP-статус (200, 404, 500...)
Type Тип: document, script, stylesheet, xhr, fetch, img
Initiator Что вызвало запрос (скрипт, HTML, redirect)
Size Размер ответа (сжатый / реальный)
Time Время загрузки
Waterfall Визуальная timeline

Фильтрация

Фильтр Показывает
All Все запросы
Fetch/XHR API-вызовы (самое частое)
JS JavaScript-файлы
CSS Стили
Img Изображения
Media Видео/аудио
Font Шрифты
Doc HTML-документы
WS WebSocket

Текстовый фильтр: status-code:404, domain:api.example.com, method:POST

Детали запроса

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

Headers

General:
  Request URL:    https://api.example.com/users
  Request Method: GET
  Status Code:    200 OK

Response Headers:
  content-type:   application/json
  cache-control:  max-age=3600

Request Headers:
  authorization:  Bearer eyJhbGci...
  accept:         application/json

Preview

JSON-ответ в удобном древовидном виде.

Response

Сырой текст ответа.

Timing (тайминг)

Queueing:        0.5ms    — ожидание в очереди
Stalled:         2.1ms    — блокировка (лимит соединений)
DNS Lookup:      15ms     — разрешение домена
Initial Connection: 50ms  — TCP-подключение
SSL:             30ms     — TLS-рукопожатие
Request sent:    0.3ms    — отправка запроса
Waiting (TTFB):  120ms    — ожидание первого байта
Content Download: 5ms     — загрузка тела
Total:           223ms

TTFB (Time to First Byte) — главный показатель скорости сервера.

Payload

Тело POST/PUT-запроса (отправленные данные).

Waterfall (каскадная диаграмма)

Визуализирует порядок и длительность загрузки:

index.html      ████░░░░░░░░░░░░
style.css           ██████░░░░░░░░░
app.js              ██████████░░░░░
api/users                     ████████
logo.png            ███░░░░░░░░░░░
  • Зелёная линия: DOMContentLoaded
  • Красная линия: Load

Throttling (ограничение скорости)

Имитация медленного интернета:

Режим Download Upload Latency
Fast 3G 1.5 Mbps 750 Kbps 562ms
Slow 3G 500 Kbps 500 Kbps 2000ms
Offline 0 0 -

Полезно для:

  • Тестирования загрузки на мобильных
  • Проверки loading states
  • Тестирования offline-режима

Полезные функции

Disable Cache

Checkbox "Disable cache" — не использовать кэш (только с открытым DevTools).

Preserve Log

Checkbox "Preserve log" — сохранять запросы при навигации между страницами.

Copy as cURL

Right-click на запрос → Copy → Copy as cURL:

curl 'https://api.example.com/users' \
  -H 'authorization: Bearer eyJhbGci...' \
  -H 'accept: application/json'

Можно вставить в терминал для повторения запроса.

Copy as Fetch

fetch("https://api.example.com/users", {
  headers: {
    authorization: "Bearer eyJhbGci...",
    accept: "application/json"
  }
});

Block request URL

Right-click → Block request URL — имитировать ошибку загрузки ресурса.

Replay XHR

Right-click → Replay XHR — повторить запрос.

Анализ загрузки страницы

Нижняя панель статистики

42 requests | 1.5 MB transferred | 3.2 MB resources | Finish: 2.5s
DOMContentLoaded: 800ms | Load: 1.5s

На что обращать внимание

  • Большие файлы — сортировка по Size
  • Медленные запросы — сортировка по Time
  • Ошибки — фильтр по красным (4xx, 5xx)
  • Блокирующие ресурсы — render-blocking CSS/JS
  • Лишние запросы — неиспользуемые ресурсы

Частые ошибки

  • Не включить "Disable cache" — видите кэшированные ответы вместо актуальных
  • Не фильтровать по Fetch/XHR — искать API-запрос среди сотен ресурсов
  • Не проверять Timing — не понимать где тормозит (сервер? сеть? размер?)
  • Не знать про Copy as cURL — вручную воспроизводить запросы
  • Забыть Preserve Log — запросы пропадают при навигации

Практика

  1. Откройте любой сайт и изучите Network tab
  2. Отфильтруйте только Fetch/XHR-запросы
  3. Изучите заголовки и тело любого API-запроса
  4. Включите Slow 3G throttling и перезагрузите страницу
  5. Скопируйте запрос как cURL и выполните в терминале
  6. Найдите самый тяжёлый ресурс (сортировка по Size)
  7. Посмотрите Waterfall — что загружается параллельно, что последовательно

Связанные темы

Ресурсы