Как найти запрос, который вызывает ошибку в браузере?

При отладке веб-приложений я использую несколько подходов для поиска проблемных запросов.

1. Инструменты разработчика (F12) — вкладка Network:

• Включаю Preserve log, чтобы история запросов не очищалась при навигации.
• Фильтрую по статусу 4xx (ошибки клиента) или 5xx (ошибки сервера).
• Смотрю на колонки Status, Method (GET/POST) и Type (XHR, Fetch).
• Кликаю на подозрительный запрос и анализирую вкладки Headers, Response и Preview. Часто в теле ответа содержится детальное описание ошибки.

2. Консоль (Console):

• Ошибки сетевых запросов часто дублируются здесь с пометками типа Failed to load resource или POST ... 500.
• Использую фильтр по ключевым словам: error, failed, 404, 500.

3. Автоматизация в тестах (например, на Playwright): Можно перехватывать все ответы и логировать неуспешные. Это полезно для автоматического сбора информации в CI/CD.

// Пример для Playwright
await page.on('response', async response => {
  if (response.status() >= 400) {
    console.log(`[ERROR] ${response.status()} ${response.url()}`);
    // Можно также сохранить тело ответа для дальнейшего анализа
    const body = await response.text();
    console.log(`Body: ${body.substring(0, 200)}...`);
  }
});

4. Дополнительные инструменты:

• Для анализа сложных SPA использую вкладку Performance или Web Vitals, чтобы увидеть, какие запросы тормозят загрузку.
• Если ошибка связана с авторизацией, проверяю заголовки запроса (Cookies, Authorization) во вкладке Headers.