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

Слушай, а вот эта вся ваша сетевая активность, блядь... Ну, как будто бы и сложно, а на самом деле — хуй собачий, если знать, куда смотреть. Все эти запросы, которые твоё приложение шлёт куда-попало, как будто оно там с кем-то переписывается, — их можно поймать за яйца и разобрать по косточкам. И делается это через Инструменты разработчика (DevTools). Это, блядь, наш главный микроскоп, чтобы смотреть, что там у тебя в браузере творится.

Как этим пользоваться, не обосравшись:

1. Открываешь эту панель:

   • Просто вмажь по клавише F12. Или Ctrl+Shift+I. На Маке, блядь, там свои заморочки — Cmd+Opt+I.
   • Можно по-хитрому: тыкнуть правой кнопкой по странице и выбрать «Исследовать элемент». Но это для лохов, которые любят кликать.

2. Перескакиваешь на вкладку «Network» (Сеть). Вот тут-то и начинается магия, блядь. Пока пусто, тишина.

3. Тыкаешь в своём приложении на какую-нибудь кнопку, которая, как ты подозреваешь, шлёт запросы куда не надо. Или просто обновляешь страницу. И — охуеть! — весь этот поток запросов, как грязное бельё, вываливается в лог. HTTP, HTTPS, WebSocket — вся эта хуйня.

4. Чтобы не сойти с ума, используй фильтры:

   • Тип запроса: Тебе нужны API-вызовы? Жми на XHR/Fetch. Картинки? Img. Вебсокеты? WS. Всё просто, ёпта.
   • Поле поиска: Вбиваешь кусок URL — и он тебе отфильтрует всё лишнее. Ищешь, где в заголовках Authorization спрятался? И тут поможет.
   • Статусы: Хочешь посмотреть только на свои косяки? Отфильтруй по 4xx и 5xx. Вот они, твои позорные ошибки, все как на ладони, блядь.

5. Кликаешь на любой запрос — и тебе вываливается целая панель деталей. Вот тут и копаем:

   • Headers: Смотри, куда ползёт запрос (URL), какой метод (GET, POST), какой статус вернулся (200 — хорошо, 404 — нихуя не нашёл, 500 — сервер обосрался). И все заголовки — Authorization, Content-Type — вся эта ебальная бюрократия.
   • Payload/Request: А вот это самое интересное! Что ты, сука, на самом деле отправил? Параметры в URL (Query String Parameters), данные формы (Form Data) или, чаще всего, JSON в теле запроса (Request Payload). Вот тут и ищи, где ты опечатался или забыл токен передать.
   • Preview/Response: А это что тебе сервер в ответ прислал. Если JSON — он его красиво отформатирует. Можешь сразу увидеть, пришла ли тебе нужная дата или какая-нибудь хуйня вроде {"error": "invalid_grant"}.
   • Timing: Ну а это для параноиков, которые хотят знать, сколько времени ушло на DNS-запрос, установку TCP-соединения и прочую ебучую магию. Если TTFB (Time To First Byte) — овердохуища, значит, сервер тупит, как валенок.

Пример кода для самых хитрых жоп:

Допустим, тебе мало вкладки Network, хочешь всё логировать своей рукой в консоль. Можно, блядь, перехватить все fetch-запросы. Делается так:

// Сохраняем оригинальный 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 (Сохранить журнал). Вот и вся наука, ёпта. Не так страшен чёрт, как его малюют.