Что такое вкладка Network?

Вкладка Network в DevTools

Вкладка Network в браузерных Developer Tools — это один из самых мощных инструментов для QA инженера. Здесь отображаются все HTTP запросы и ответы.

Что такое вкладка Network

Network tab показывает все сетевые запросы, которые делает приложение:

• HTTP запросы (GET, POST, PUT, DELETE и т.д.)
• Ответы серверов
• Headers и payload
• Время загрузки
• Размер файлов
• Типы контента (JSON, HTML, CSS, JavaScript)

Как открыть Network tab

Chrome / Brave: F12 → Network

Firefox: F12 → Network

Safari: Разработка → Show Web Inspector → Network

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

Как использовать Network tab для тестирования

1. Проверка HTTP статус-кодов

Визуально видно что прошло (200, 201) и что упало (400, 500).

Пример:

POST /api/users → 201 Created ✓
POST /api/orders → 400 Bad Request (неправильные данные)
GET /api/products/999 → 404 Not Found
GET /api/sensitive → 401 Unauthorized

2. Анализ Payload (Request Body)

Проверяем какие данные отправляет клиент.

Нажимаем на запрос → вкладка Request:

Request Headers:
Content-Type: application/json
Authorization: Bearer token123

Request Body:
{
  "name": "John",
  "email": "john@example.com",
  "age": 30
}

3. Проверка Response (Ответ сервера)

Нажимаем на запрос → вкладка Response:

{
  "id": 123,
  "name": "John",
  "email": "john@example.com",
  "created_at": "2026-03-26T10:00:00Z"
}

Проверяем:

• Все ли поля есть в ответе
• Правильные ли типы данных (string, number, boolean)
• Правильные ли значения

4. Анализ Headers

Жму на запрос → вкладка Headers:

Request Headers:

• User-Agent (браузер и ОС)
• Authorization (token)
• Content-Type (тип данных)
• Accept (что ожидаем в ответе)

Response Headers:

• Content-Type (что вернул сервер)
• Cache-Control (как кешировать)
• Set-Cookie (установка cookies)
• Access-Control-Allow-Origin (CORS)
• Server (какой сервер)

5. Проверка CORS ошибок

Ошибка: "Access to XMLHttpRequest has been blocked by CORS policy"

В Network tab смотрим:

• Был ли preflight запрос (OPTIONS)
• Какие headers в ответе
• Access-Control-Allow-Origin правильный ли

6. Анализ производительности

Визуально видим какой запрос долгий.

Колонка Time показывает:

• Queueing: ожидание в очереди
• DNS: резолюция имени домена
• Connecting: подключение к серверу
• TLS: SSL handshake
• Sending: отправка запроса
• Waiting: ожидание ответа (TTFB)
• Receiving: получение ответа

Если долго Waiting → проблема на сервере Если долго DNS → проблема с DNS Если долго TLS → проблема с SSL

7. Фильтрация запросов

В поле Filter можно искать:

Фильтр по типу: xhr (AJAX запросы)
Фильтр по типу: fetch (Fetch API)
Фильтр по типу: document (HTML страницы)
Фильтр по типу: img (изображения)
Фильтр по типу: script (JavaScript файлы)

Фильтр по URL: /api (только API запросы)
Фильтр по статусу: 404 (только ошибки)
Фильтр по домену: api.example.com

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

Сценарий 1: Проверка при логине

1. Открываю Network tab
2. Ввожу email и пароль
3. Нажимаю Login
4. Вижу POST /api/auth/login
5. Проверяю статус (должен 200)
6. Смотрю Response (должен быть token)
7. Проверяю Set-Cookie (session cookie установлена ли)
8. После перезагрузки видим что token/cookie используется

Сценарий 2: Поиск утечек данных

1. Ищу все запросы к /api
2. Проверяю что в Request Headers нет чувствительных данных в URL
3. Проверяю что пароли отправляются только POST (не GET)
4. Проверяю что token отправляется только в HTTPS (не HTTP)

Сценарий 3: Отладка медленной загрузки

1. Сортирую по Time (медленные запросы вверху)
2. Вижу что GET /api/products?limit=1000 занимает 10 секунд
3. Это баг на сервере (БД запрос слишком медленный)
4. Сообщаю разработчику с доказательством

Сценарий 4: Проверка кешування

1. Первая загрузка: Size показывает 50KB для image.jpg
2. При обновлении (F5): Size показывает "(disk cache)"
3. Это правильно — image кешируется
4. Но если каждый раз загружается полностью — баг в Cache-Control

Полезные фишки

1. Disable cache

В Network tab чекбокс "Disable cache (while DevTools is open)". Это реально имитирует первый визит пользователя.

2. Network throttling

Имитирация медленного интернета (3G, 4G, Slow 4G). Инструмент Throttling.

3. Preserve log

Оставить логи даже при переходе на другую страницу.

4. Copy as cURL

Правый клик на запрос → Copy → Copy as cURL. Можно воспроизвести запрос в командной строке.

5. Export as HAR

Экспортировать все запросы в HAR файл. Удобно для анализа и шеринга с командой.

Типичные проблемы которые находятся в Network tab

• Неправильные HTTP статус коды
• CORS ошибки
• Отсутствующие или неправильные headers
• Неправильный Content-Type
• Утечки данных (пароли в URL)
• Медленные запросы
• Лишние запросы (можно кешировать)
• Неправильные redirect'ы (301, 302, 307)
• Неправильный User-Agent

Вывод

Network tab — это must-have инструмент для QA инженера. С ним можно:

• Проверять API взаимодействие
• Находить проблемы коммуникации
• Отлаживать производительность
• Проверять безопасность
• Анализировать CORS
• Документировать баги с доказательствами