Как в браузере отследить сетевые запросы к backend?

Для анализа сетевой активности используются Инструменты разработчика (DevTools) браузера. Это основной метод для отладки API-вызовов, проверки заголовков, payload и ответов.

Пошаговая инструкция:

1. Откройте DevTools:

   • F12 или Ctrl+Shift+I / Cmd+Opt+I (Mac).
   • Клик правой кнопкой мыши -> "Исследовать элемент".

2. Перейдите на вкладку "Network" (Сеть).

3. Воспроизведите действие в приложении (нажмите кнопку, перезагрузите страницу). Все HTTP/HTTPS, WebSocket и другие сетевые запросы появятся в списке.

4. Используйте фильтры для навигации:

   • Тип запроса: XHR/Fetch (для API-вызовов), JS, CSS, Img, WS (WebSocket), Media.
   • Поле фильтрации: Поиск по URL, заголовкам.
   • Статусы: Показ только ошибок (4xx, 5xx).

5. Анализ конкретного запроса: Кликните на запрос, чтобы открыть детальную панель.

   • Headers: Метод, URL, статус, request/response заголовки (Authorization, Content-Type).
   • Payload/Request: Тело запроса (вкладки Query String Parameters, Form Data, Request Payload для JSON).
   • Preview/Response: Форматированное отображение ответа от сервера (JSON, HTML).
   • Timing: Детальная временная шкала выполнения запроса (DNS, TCP, TTFB, Загрузка).

Пример для отладки Fetch/AJAX-запроса:

// Пример перехвата всех fetch-запросов для логирования в консоль
const originalFetch = window.fetch;
window.fetch = async function(...args) {
  const [url, options] = args;
  console.group('Fetch Request:');
  console.log('URL:', url);
  console.log('Options:', options);
  const startTime = performance.now();

  const response = await originalFetch.apply(this, args);
  const endTime = performance.now();

  console.log('Status:', response.status);
  console.log('Time:', (endTime - startTime).toFixed(2), 'ms');
  const clonedResponse = response.clone(); // Клонируем для чтения
  console.log('Response Body:', await clonedResponse.json());
  console.groupEnd();
  return response;
};

Совет: Для чистого анализа очищайте лог (кнопка 🚫) перед воспроизведением сценария. Используйте сохранение лога (Preserve log), чтобы запросы не очищались при навигации.