Расскажи про свой опыт работы со вкладкой Network

Мой опыт работы со вкладкой Network

Практический опыт

В своей практике QA инженера вкладка Network DevTools — это один из самых используемых инструментов. Вот как я применял.

Основные применения

1. Анализ API запросов При тестировании backend всегда открываю Network tab.

• Проверяю что отправляется в Request body
• Анализирую Response структуру
• Проверяю статус коды (200, 201, 400, 404)
• Ищу ошибки в server response

2. Отладка проблем с авторизацией

• Проверяю что Authorization header отправляется
• Вижу содержимое token
• Анализирую Set-Cookie headers
• Проверяю что session persists при перезагрузке

3. Проверка производительности

• Вижу какие запросы долгие
• Анализирую время TTFB (Time To First Byte)
• Нахожу лишние запросы (можно кешировать)
• Вижу размер файлов (может быть оптимизировать)

4. CORS debugging Это был реальный case:

• Frontend на localhost:3000
• Backend на localhost:8080
• API запрос блокируется CORS
• В Network tab вижу preflight запрос (OPTIONS)
• Смотрю Access-Control-Allow-Origin header
• Сообщаю разработчику что нужно добавить правильный CORS

5. Поиск утечек данных

• Проверяю что пароли НЕ отправляются GET запросом
• Проверяю что token отправляется только HTTPS
• Ищу чувствительные данные в logs
• Проверяю что session data не видна в URL

Реальный пример из работы

Ситуация: При оформлении заказа иногда не создается в БД. Разработчик говорит "код работает, я не вижу ошибок".

Мой анализ:

1. Открываю Network tab
2. Нажимаю "Complete Order"
3. Вижу POST /api/orders → 201 Created
4. Смотрю Response — там есть order_id
5. Но потом видну GET /api/orders/{order_id} → 404
6. Это значит что заказ создается, но потом не находится
7. Проблема была в миграции БД (таблица не синхронизирована)

Без Network tab это было бы難難 найти.

Инструменты которые использую вместе с Network

Network + Console

• Видю ошибку в console
• Смотрю что запрос вызвал ошибку в Network
• Анализирую Response

Network + Storage

• Проверяю что cookie/localStorage обновляется
• Смотрю что хранится после API запроса

Copy as cURL Частый use case:

• Копирую запрос из Network как cURL
• Запускаю в terminal
• Проверяю что endpoint работает вне браузера
• Это доказывает что проблема не в браузере

Типичные проблемы которые находил

1. Missing Authorization header → 401 Unauthorized
2. Wrong Content-Type → Server не понимает JSON
3. Network timeout → Запрос занимает 30+ секунд
4. CORS ошибка → Браузер блокирует cross-origin
5. Wrong request body → Сервер возвращает validation error
6. Лишние запросы → Каждый раз загружаются одни и те же данные

Вывод

Network tab — незаменимый инструмент для QA. Благодаря ему я нашел множество багов которые иначе бы пропустил. Это мост между frontend и backend тестированием.