На какой вкладке можем увидеть запрос в DevTools

Просмотр сетевых запросов в DevTools

В Google Chrome DevTools для просмотра сетевых запросов используется вкладка Network (Сеть). Это основной инструмент для анализа HTTP/HTTPS запросов и ответов, которые браузер отправляет и получает при загрузке страницы или взаимодействии с ней.

Где найти вкладку Network

• Способ 1: F12 или Ctrl+Shift+I (Cmd+Opt+I на Mac) → откроется панель DevTools → в верхнем меню выберите вкладку "Network".
• Способ 2: Клик правой кнопкой мыши на странице → "Просмотреть код" или "Inspect" → перейти на вкладку "Network".
• Способ 3: Ctrl+Shift+J (Cmd+Opt+J на Mac) → откроется консоль (Console) → затем кликните на соседнюю вкладку "Network".

Ключевые возможности вкладки Network для QA

На этой вкладке отображается подробная информация, критичная для тестирования:

1. Таблица запросов:

    *   **Name/URL:** Имя ресурса и его адрес.
    *   **Method:** HTTP-метод (`GET`, `POST`, `PUT`, `DELETE` и др.).
    *   **Status:** HTTP-статус код ответа (200, 404, 500, 403 и т.д.).
    *   **Type:** Тип ресурса (XHR/Fetch, Document, Stylesheet, Script, Image, Media, Font).
    *   **Initiator:** Что инициировало запрос (файл скрипта, парсер и др.).
    *   **Size & Time:** Размер ресурса и время загрузки (важно для тестов производительности).

1. Панель фильтрации и группировки:

    *   Фильтр по типу (`XHR`, `JS`, `CSS`).
    *   Поиск по имени или заголовкам.
    *   Кнопка записи (красный кружок) — включение/выключение логирования.
    *   Кнопка очистки (чанк с крестиком).
    *   Галочка `"Preserve log"` — сохранять логи при переходе между страницами.
    *   Регулятор `"Disable cache"` — отключает кеш браузера (очень полезно при тестировании).

1. Детальный просмотр запроса:

    Кликнув на конкретный запрос в таблице, вы увидите несколько подвкладок с исчерпывающими данными:
    *   **Headers:** Полные HTTP-заголовки запроса (Request Headers) и ответа (Response Headers). Здесь можно проверить `Cookies`, `User-Agent`, параметры авторизации, `Content-Type`.
    *   **Preview/Response:** Тело ответа сервера в удобочитаемом формате (JSON, HTML, изображение).
    *   **Initiator & Timing:** Подробная временная диаграмма выполнения запроса (фазы DNS, TCP, SSL, Waiting, Receiving).

Практический пример для тестирования API

Допустим, мы тестируем форму входа. После ввода логина/парфа мы должны увидеть XHR-запрос с методом POST. Как QA Engineer я проверяю:

1. Корректность отправки: Запрос ушел на правильный эндпоинт?
2. Безопасность: Пароль не виден в URL (он должен быть в теле POST-запроса).
3. Статус ответа: При успешном входе — 200 OK, при неверных данных — 401 Unauthorized или 400 Bad Request.
4. Данные в запросе: В подвкладке "Payload" (для POST) проверяю, что передаются все нужные поля в правильном формате.
5. Данные в ответе: В "Response" проверяю, что сервер возвращает ожидаемый JSON, например, с токеном авторизации.

// Пример того, что может быть во вкладке Payload (формат form-data или json)
{
  "username": "testuser",
  "password": "securePass123"
}

Почему это важно для QA

• Отладка: Быстро понять, почему функционал не работает — запрос не ушел, ушел с ошибкой или ответ неверный.
• Валидация данных: Убедиться, что клиент и сервер обмениваются корректными данными.
• Тестирование безопасности: Проверить, не "светятся" ли чувствительные данные в запросах.
• Анализ производительности: Выявить "тяжелые" или долгие запросы.
• Автоматизация: Иногда вкладка Network служит источником для формирования корректных запросов в автотестах (можно скопировать запрос как cURL).

Вывод: Для анализа сетевой активности, в том числе запросов к API (XHR/Fetch), AJAX-вызовов и загрузки ресурсов, основная и незаменимая вкладка в DevTools — это Network. Умение работать с ней — базовый и критически важный навык современного QA-инженера, особенно при тестировании веб-приложений и бэкенд-сервисов.