Как будешь снимать сетевую активность в DevTools

1️⃣ Как кратко ответить

Открыть DevTools в браузере, перейти на вкладку "Network", обновить страницу или выполнить нужное действие, чтобы начать запись сетевой активности. Все запросы и ответы будут отображаться в реальном времени. Можно фильтровать, анализировать заголовки, статус-коды и время загрузки.

2️⃣ Подробное объяснение темы

Снятие сетевой активности в DevTools — это процесс мониторинга и анализа сетевых запросов и ответов, которые происходят между браузером и сервером. Это важно для тестирования производительности веб-приложений, отладки проблем с загрузкой ресурсов и проверки корректности работы API.

Шаги для снятия сетевой активности:

1. Открытие DevTools:

   • В большинстве браузеров DevTools открывается нажатием клавиши F12 или комбинацией Ctrl + Shift + I (Windows) или Cmd + Option + I (Mac).
   • Также можно открыть через меню браузера: "Дополнительные инструменты" -> "Инструменты разработчика".

2. Переход на вкладку "Network":

   • В DevTools выберите вкладку "Network". Это позволит вам видеть все сетевые запросы, которые происходят при загрузке страницы или при взаимодействии с ней.

3. Запись сетевой активности:

   • Обновите страницу (F5 или Ctrl + R) или выполните действие, которое вы хотите проанализировать. DevTools начнет записывать все сетевые запросы.
   • Убедитесь, что кнопка записи (красная точка в левом верхнем углу вкладки "Network") активна.

4. Анализ сетевых запросов:

   • Каждый запрос отображается в виде строки с информацией о типе ресурса, методе HTTP, статус-коде, размере и времени загрузки.
   • Можно кликнуть на любой запрос, чтобы увидеть подробности: заголовки, параметры, тело запроса и ответа.

5. Фильтрация и поиск:

   • Используйте фильтры для отображения только интересующих вас типов запросов (например, XHR для AJAX-запросов).
   • Введите текст в поле поиска, чтобы найти конкретные запросы.

6. Сохранение и экспорт данных:

   • Для дальнейшего анализа можно сохранить сетевую активность в HAR-файл. Для этого кликните правой кнопкой мыши на списке запросов и выберите "Save all as HAR with content".

Пример использования:

Предположим, вы тестируете веб-приложение и хотите убедиться, что все ресурсы загружаются корректно и быстро. Открыв DevTools и перейдя на вкладку "Network", вы обновляете страницу. Видите, что один из запросов к API возвращает ошибку 404. Кликнув на этот запрос, вы можете увидеть, что URL содержит ошибку в пути. Исправив это, вы можете повторно проверить, что запрос теперь возвращает корректный ответ.

Снятие сетевой активности в DevTools позволяет QA-инженерам эффективно выявлять и устранять проблемы с загрузкой ресурсов, оптимизировать производительность и проверять корректность работы API.