Как в браузере посмотреть отправляемые запросы на Backend

Мониторинг сетевых запросов в браузере

В современной веб-разработке и тестировании критически важно уметь анализировать HTTP-запросы, отправляемые из браузера на backend. Это позволяет отлаживать взаимодействие клиента и сервера, валидировать передаваемые данные, измерять производительность и диагностировать проблемы. Все современные браузеры предоставляют для этого мощные инструменты разработчика.

Инструменты разработчика (DevTools)

Основной способ просмотра запросов — встроенные инструменты разработчика, которые открываются сочетанием клавиш F12 или Ctrl+Shift+I (Cmd+Opt+I на Mac).

1. Вкладка Network (Сеть)

Самая важная вкладка для анализа запросов. После открытия:

• Записывает все сетевые активности при обновлении страницы или выполнении действий
• Показывает метод запроса (GET, POST, PUT, DELETE и т.д.)
• Отображает статус ответа, время выполнения, размер данных

// Пример: как выглядит типичный XHR-запрос в логах
// Метод: POST
// URL: https://api.example.com/v1/users
// Статус: 200 OK
// Время: 150ms

2. Фильтрация и поиск

Во вкладке Network доступны фильтры:

• XHR/Fetch — только AJAX-запросы
• JS, CSS, Img — ресурсы по типу
• WS — WebSocket соединения
• Media — мультимедийные файлы
• Поле поиска для фильтрации по URL или другим параметрам

3. Детальный просмотр запроса

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

Headers — заголовки запроса и ответа:

• Request Headers (User-Agent, Content-Type, Authorization)
• Response Headers (Status Code, Cookies, CORS-политики)

Payload — тело запроса (для POST/PUT):

• Form Data — данные формы
• Request Payload — JSON или другие форматы
• Query String Parameters — параметры URL для GET-запросов

Preview/Response — тело ответа от сервера:

• Форматированный JSON
• HTML или текст
• Изображения или другие бинарные данные

Timing — тайминг запроса:

• DNS lookup, TCP handshake
• SSL/TLS negotiation
• Time to First Byte (TTFB)
• Content download

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

Для тестирования API:

1. Валидация запросов — проверка корректности отправляемых данных
2. Анализ ответов — проверка структуры и данных от backend
3. Отладка ошибок — анализ 4xx/5xx статусов
4. Проверка заголовков — CORS, аутентификация, кэширование

Для производительности:

1. Выявление медленных запросов
2. Анализ размера передаваемых данных
3. Оптимизация количества запросов

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

• Сохранение логов — галочка "Preserve log" сохраняет историю при навигации
• Throttling — эмуляция медленных сетей (3G, 4G)
• Copy as cURL — копирование запроса в формате cURL для повторения в терминале
• Block request — блокировка конкретных запросов для тестирования деградации
• Replay XHR — повторная отправка запроса (через контекстное меню)

Альтернативные методы

Консоль JavaScript:

// Перехват всех fetch-запросов
const originalFetch = window.fetch;
window.fetch = function(...args) {
    console.log('Fetch request:', args);
    return originalFetch.apply(this, args);
};

// Перехват XMLHttpRequest
const originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
    console.log(`XHR: ${method} ${url}`);
    return originalXHROpen.apply(this, arguments);
};

Расширения браузера:

• Postman Interceptor — интеграция с Postman
• HTTP Toolkit — перехват и модификация трафика
• Fiddler Everywhere — продвинутый анализ трафика

Советы для QA-инженеров

1. Всегда проверяйте Network при тестировании — даже если UI работает корректно, могут быть скрытые проблемы с API
2. Обращайте внимание на статусы — 200 не всегда означает успех (может быть бизнес-ошибка в теле ответа)
3. Сравнивайте с документацией — сверяйте фактические запросы с API-спецификацией
4. Тестируйте ошибки — смотрите как приложение обрабатывает 400, 500 статусы
5. Мониторьте производительность — фиксируйте аномально долгие запросы

Пример типичного workflow при тестировании:

1. Открываю DevTools (F12) → вкладка Network
2. Включаю "Preserve log" для сохранения истории
3. Выполняю тестовый сценарий в приложении
4. Анализирую:
   • Какие endpoints вызываются
   • Корректность payload (JSON структура, данные)
   • Статус ответов
   • Время выполнения
5. При обнаружении проблемы:
   • Копирую как cURL
   • Воспроизвожу отдельно
   • Документирую для разработчиков

Этот навык является фундаментальным для любого QA-инженера, работающего с веб-приложениями, так как позволяет заглянуть "под капот" приложения и понять реальное взаимодействие между фронтендом и бэкендом.