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

Анализ выполняется во вкладке Network инструментов разработчика (DevTools).

Порядок действий:

1. Откройте DevTools (F12 или Ctrl+Shift+I / Cmd+Opt+I).
2. Перейдите на вкладку Network.
3. Обновите страницу (F5) или выполните целевое действие в приложении.
4. Все HTTP-запросы (XHR/Fetch, документы, стили, скрипты, изображения) отобразятся в виде списка.
5. Используйте фильтры (XHR, JS, Img) или поле поиска для навигации.
6. Кликните на любой запрос для детального просмотра:
   • Headers: Метод, URL, статус-код, request/response headers.
   • Preview/Response: Тело ответа в удобном формате (JSON, HTML).
   • Timing: Детальная временная диаграмма выполнения запроса.

Пример для мониторинга API-вызова:

// Выполните этот fetch в консоли DevTools
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

После выполнения запрос появится в списке. Вы можете проверить, правильно ли передались заголовки (например, Authorization), payload и корректность ответа сервера.

Совет: Используйте опцию Preserve log для сохранения запросов между переходами по страницам и Throttling для эмуляции медленных сетей.