Как вы используете вкладку Network в инструментах разработчика браузера?

Вкладка Network — мощный инструмент для отладки, анализа производительности и тестирования веб-приложений. Использую её для решения широкого круга задач.

Основные сценарии использования:

1. Отладка API-запросов и ответов:

   • Проверка корректности запроса: Метод (GET/POST), заголовки (Headers), тело запроса (Payload).
   • Анализ ответа: Статус-код, время ответа (Timing), тело ответа (Preview/Response).
   • Модификация и повторная отправка: Использование Edit and Resend для тестирования разных входных данных или заголовков.

2. Анализ производительности загрузки страницы:

   • Waterfall: Выявление ресурсов, блокирующих загрузку (длинные цепочки зависимостей).
   • Размеры ресурсов: Обнаружение неоптимизированных изображений или JS-бандлов.
   • Кэширование: Проверка заголовков Cache-Control и ETag.

3. Тестирование и автоматизация:

   • Копирование запроса как cURL: Для быстрого воспроизведения запроса в терминале или интеграции в скрипты.

     # Пример скопированной cURL-команды для использования в скрипте
     curl 'https://api.example.com/data' 
     -H 'Authorization: Bearer token123' 
     --compressed

   • Эмуляция сетевых условий: Throttling для тестирования на медленных соединениях (3G).
   • Блокировка запросов: Для проверки отказоустойчивости приложения.

4. Мониторинг и поиск проблем:

   • Фильтрация: По типу (XHR/JS/Img), домену, статусу.
   • Поиск: По ключевым словам в URL или ответах.
   • Сохранение логов: Экспорт всей сессии в HAR-файл (HTTP Archive) для последующего анализа или прикрепления к баг-репорту.

Пример проверки в тесте:

// Использование Puppeteer для проверки сетевого запроса
await page.goto('https://example.com');
const [request] = await Promise.all([
  page.waitForResponse(resp => resp.url().includes('/api/data') && resp.status() === 200),
  page.click('#load-data-btn')
]);
const responseData = await request.json();
console.assert(responseData.items.length > 0, 'API returned empty data');