Что содержится во вкладке Network

Отличный вопрос! Вкладка Network (Сеть) в инструментах разработчика браузера (Chrome DevTools, Firefox Developer Tools и т.д.) — это один из ключевых инструментов в арсенале QA Engineer для анализа производительности, отладки взаимодействия клиента с сервером и проверки корректности работы веб-приложения. Это не просто список запросов, а мощный диагностический центр.

Вот что содержится во вкладке Network и как этим пользуется QA:

Основные элементы интерфейса

Интерфейс вкладки Network состоит из нескольких ключевых областей:

1. Панель управления и фильтры

• Кнопки записи/очистки: Позволяют начать/остановить запись сетевой активности и очистить текущую таблицу.
• Фильтры по типу ресурса: Быстрый фильтр для отображения только XHR/Fetch, JS, CSS, Img, Media, Font, Doc (основной HTML) и других типов. Незаменимо при поиске конкретного API-вызова или статического ресурса.
• Поиск: Позволяет искать по URL, заголовкам или содержимому ответа.
• Чекбокс "Disable cache": Критически важная опция для тестирования, которая отключает кеширование браузера, гарантируя, что каждый запрос будет отправлен на сервер. Без этого многие ошибки кеширования можно пропустить.
• Режимы эмуляции скорости сети ("Throttling"): Позволяют симулировать медленное соединение (3G, 2G) для тестирования поведения приложения в условиях плохого интернета.

2. Таблица (сводная панель) сетевых запросов

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

• Name/Path: Имя файла или конечный путь URL ресурса.
• Status: HTTP-код ответа (200, 404, 500, 304, 403 и т.д.). QA всегда проверяет эту колонку на наличие неожиданных кодов ошибок.
• Type: Тип запроса (GET, POST, PUT, DELETE, PATCH, OPTIONS).
• Initiator: Что инициировало запрос (например, какой скрипт или файл). Помогает отследить цепочку вызовов.
• Size: Размер загруженного ресурса. Обращаем внимание на большие файлы, которые могут замедлять загрузку.
• Time: Общее время, затраченное на выполнение запроса. Вместе с Waterfall (водопад) помогает выявить "медленные" запросы.

3. Детальная панель информации о запросе

При клике на конкретный запрос в таблице открывается детальная панель с несколькими вкладками:

Вкладка Headers

Здесь содержится вся "служебная" информация запроса и ответа.

• General Headers: Метод запроса, URL, код состояния.
• Response Headers: Заголовки, которые вернул сервер (Content-Type, Set-Cookie, Cache-Control, CORS-заголовки). QA проверяет их на корректность, особенно CORS (Access-Control-Allow-Origin) для API.
• Request Headers: Заголовки, которые отправил браузер (User-Agent, Cookie, Authorization, Content-Type). Проверяем, отправляются ли нужные данные для авторизации.
• Query String Parameters / Form Data: Параметры, переданные в URL (для GET) или в теле запроса (для POST/PUT). Это точка валидации данных, отправляемых на сервер.

Вкладка Preview

Графическое или структурированное представление ответа сервера (JSON, изображение, HTML). Для API-тестирования это основная вкладка для проверки структуры и данных в ответе.

Вкладка Response

Сырой (raw) текст ответа сервера. Используется, когда Preview не отображает данные корректно или для анализа не-JSON ответов (например, HTML ошибки).

Вкладка Initiator и Timing

• Initiator: Показывает стек вызовов JavaScript, который привел к этому запросу. Помогает отладить, какой именно код в приложении делает "лишний" или неверный запрос.
• Timing (Водопад): Детальная временная диаграмма запроса. Показывает этапы: DNS Lookup, Initial Connection (TCP handshake + SSL для HTTPS), Waiting for server response (TTFB - Time to First Byte), Content Download. Анализ таймингов помогает локализовать проблему: долгий TTFB — проблема на сервере, долгая загрузка контента — проблема с пропускной способностью или размером файла.

Практическое применение в работе QA

1. Валидация API-запросов и ответов (REST, GraphQL): Мы проверяем, что:

    *   Отправляется корректный **метод** (`POST`, а не `GET`).
    *   В **заголовках** (`Headers`) передаются правильные токены авторизации.
    *   **Тело запроса** (`Payload`) содержит все необходимые поля с валидными данными.
    *   **Статус код** (`Status`) ответа соответствует спецификации (например, `201 Created` после создания).
    *   **Тело ответа** (`Preview/Response`) имеет ожидаемую JSON-схему, корректные данные и не содержит чувствительной информации (например, паролей в открытом виде).

```json
// Пример проверки структуры ответа API во вкладке Preview
{
  "status": "success",
  "data": {
    "id": 12345,
    "title": "Новый заказ"
  }
}
```

2. Отладка ошибок: При падении функциональности первым делом открываем Network. Ищем запросы с красным статусом (4xx, 5xx) и анализируем ответ сервера, который часто содержит описание ошибки.

1. Анализ производительности: Смотрим на общее время загрузки страницы, количество запросов, их размер и последовательность ("водопад"). Ищем:

    *   "Узкие места" — самые долгие запросы.
    *   Неоптимальные последовательности (например, скрипт блокирует загрузку всего последующего контента).
    *   Большие изображения без сжатия.

1. Проверка кеширования: Отключаем и включаем кеш, чтобы убедиться, что статические ресурсы (CSS, JS, иконки) возвращают статус 304 Not Modified при повторном посещении, а не загружаются заново (200).

2. Тестирование при плохом соединении: Используя Throttling, проверяем, как ведет себя приложение: появляются ли лоадеры, не "ломается" ли интерфейс, корректно ли обрабатываются таймауты запросов.

3. Мониторинг сторонних вызовов: Отслеживаем запросы к аналитике (Google Analytics), платежным системам, CDN — чтобы убедиться, что они выполняются и не блокируют основной функционал.

Таким образом, вкладка Network — это не пассивный лог, а интерактивный инструмент для глубокого анализа клиент-серверного взаимодействия, который позволяет QA Engineer не только находить баги, но и понимать их первопричину, эффективно коммуницировать с разработчиками (предоставляя конкретные данные: URL, заголовки, payload) и вносить вклад в тестирование производительности и безопасности веб-приложения.