Ответ
Вкладка Network в инструментах разработчика браузера (Chrome DevTools, Firefox Developer Tools) — это панель для мониторинга и анализа всех сетевых запросов, которые выполняет веб-страница.
Ключевые задачи в тестировании:
- Валидация API-запросов: Проверка корректности URL, HTTP-методов (GET, POST), статус-кодов ответов (200, 404, 500), заголовков (headers) и тела запроса/ответа (payload).
- Анализ производительности: Выявление «узких мест» — медленных запросов (колонка Time), лишних или дублирующихся вызовов, больших размеров ответов.
- Отладка ошибок: Просмотр неудачных запросов (подсвечены красным), анализ ответов с ошибками для понимания причины сбоя.
- Контроль загрузки ресурсов: Мониторинг загрузки статических файлов (CSS, JS, изображения), проверка кэширования.
- Тестирование условий: Эмуляция медленного сетевого соединения (режим Throttling) для проверки поведения приложения.
Практическое использование в Chrome DevTools:
- Откройте вкладку Network и обновите страницу.
- Используйте фильтр XHR/Fetch, чтобы видеть только AJAX-запросы к API.
- Кликните на любой запрос, чтобы детально изучить:
- Headers: Все отправленные и полученные заголовки.
- Preview/Response: Форматированное тело ответа (JSON, HTML).
- Timing: Детальная разбивка времени выполнения запроса (DNS, TCP, TTFB и т.д.).