В какой вкладке DevTools можно увидеть сетевые запросы?

«В какой вкладке DevTools можно увидеть сетевые запросы?» — вопрос из категории Инструменты тестирования, который задают на 10% собеседований QA Тестировщик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Сетевые запросы отображаются на вкладке Network (Сеть).

Что можно увидеть на этой вкладке:

  • Все HTTP/HTTPS-запросы, которые выполняет страница (документы, скрипты, стили, изображения, API-вызовы).
  • Детальную информацию по каждому запросу: статус, метод, тип ресурса, размер, время загрузки.

Как анализировать запрос:

  1. Откройте DevTools (F12 или Ctrl+Shift+I / Cmd+Opt+I).
  2. Перейдите на вкладку Network.
  3. Обновите страницу или выполните действие, которое вызывает нужный запрос.
  4. Кликните на конкретный запрос, чтобы открыть детали:
    • Headers: Заголовки запроса и ответа, параметры, куки.
    • Preview / Response: Тело ответа в удобном формате (JSON, HTML и т.д.).
    • Timing: Детальная временная шкала выполнения запроса.

Полезные фильтры:

  • XHR/Fetch – для просмотра API-запросов.
  • JS / CSS / Img – для фильтрации по типу ресурса.
  • Поиск по имени или части URL.

Эта вкладка — основной инструмент для отладки взаимодействия фронтенда с бэкендом, проверки корректности отправляемых данных и получаемых ответов.