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

Снятие сетевой активности в DevTools: пошаговое руководство и анализ

Для снятия сетевой активности в DevTools я использую вкладку Network — это центральный инструмент для анализа HTTP/HTTPS запросов, WebSocket соединений и других сетевых взаимодействий. Вот мой профессиональный подход с детальными шагами, примерами и типичными сценариями использования в QA.

Открытие и настройка вкладки Network

1. Запуск DevTools:

   • F12 или Ctrl+Shift+I (Cmd+Opt+I на Mac) в браузере
   • Контекстное меню → "Исследовать элемент"
   • Меню браузера → Дополнительные инструменты → Инструменты разработчика

2. Базовая настройка перед записью:

   // Часто проверяю наличие запрета кэширования (Disable cache)
   // Галочка в верхней панели Network предотвращает кэширование
   

   • Disable cache — для чистых тестов без кэшированных ресурсов
   • Throttling — эмуляция медленных сетей (3G, Slow 3G)
   • Preserve log — сохраняет логи между перезагрузками страниц
   • Record network log — автоматически активна при открытии

Ключевые элементы интерфейса Network

• Панель запросов: Таблица с колонками (Name, Status, Type, Initiator, Size, Time)
• Панель фильтров: Фильтрация по типу (XHR, JS, CSS, Img, Media, Font, Doc, WS)
• Панель информации: Waterfall, Headers, Preview, Response, Timing, Cookies

Практический процесс снятия активности

1. Очистка предыдущих записей:

   • Кнопка Clear (круг с зачёркнутой линией)
   • Ctrl+L для быстрой очистки

2. Запуск записи:

   • Запись начинается автоматически
   • Красный кружок указывает на активную запись

3. Воспроизведение сценария:

   // Пример: тестирование формы входа
   // 1. Открываю страницу логина
   // 2. Заполняю credentials
   // 3. Нажимаю Submit
   // 4. Анализирую сетевые запросы
   

4. Фильтрация запросов:

   • Чаще всего фильтрую по XHR/Fetch для API-запросов
   • Для проверки ресурсов: JS, CSS
   • Поиск по имени: Ctrl+F в панели Network

Анализ критических параметров запроса

На примере типичного API-запроса:

GET /api/v1/users/123 HTTP/1.1
Host: example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
Content-Type: application/json

В панели Headers проверяю:

• Request URL и HTTP метод (GET/POST/PUT/DELETE)
• Status Code (200, 201, 400, 401, 500)
• Request/Response Headers
• Query String Parameters для GET
• Request Payload для POST/PUT

Пример тестового сценария

// Сценарий: Проверка добавления товара в корзину
// 1. Открыть Network → очистить логи
// 2. Перейти на страницу товара
// 3. Нажать "Добавить в корзину"
// 4. Найти XHR-запрос с endpoint /api/cart/add
// 5. Проверить:
//    - Status: 200 или 201
//    - Request payload: {productId: 123, quantity: 1}
//    - Response: {success: true, cartCount: 5}
//    - Timing: < 500ms для критического действия

Расширенные возможности для QA

1. Mock-ответы через Request blocking:

   • Блокировка специфичных URL
   • Тестирование fallback-логики при недоступности API

2. Анализ производительности:

   • Waterfall для определения "узких мест"
   • Размер ресурсов (сжатие, оптимизация)
   • Количество запросов (оптимизация объединения)

3. Проверка безопасности:

   • Наличие чувствительных данных в URL
   • Корректные заголовки CORS
   • Валидность токенов авторизации

4. Экспорт данных:

   • Export HAR (HTTP Archive) для передачи команде
   • Импорт в Postman или другие инструменты

Типичные QA-кейсы использования

• Валидация API-контрактов: Совпадение request/response с документацией
• Дебаг ошибок: Анализ 4xx/5xx статусов, проверка error payload
• Проверка оптимизации: Размеры изображений, кэширование статики
• Тестирование условий гонки: Параллельные запросы, порядок выполнения
• Анализ зависимостей: Загрузка сторонних ресурсов (аналитики, виджеты)

Профессиональные рекомендации

1. Контекстное использование:

   • Для тестирования REST API: фокус на XHR-фильтре
   • Для анализа загрузки страницы: полный snapshot со всеми ресурсами
   • Для WebSocket: переключение на фильтр WS

2. Автоматизация:

   // Использование DevTools Protocol в автотестах
   const puppeteer = require('puppeteer');
   
   async function captureNetwork() {
     const browser = await puppeteer.launch();
     const page = await browser.newPage();
     
     // Включение перехвата запросов
     await page.setRequestInterception(true);
     page.on('request', request => {
       console.log('Request:', request.url());
       request.continue();
     });
     
     page.on('response', response => {
       console.log('Response:', response.status(), response.url());
     });
   }
   

3. Интерпретация timing:

   • Queueing: Время в очереди браузера
   • Stalled: Ожидание доступности соединения
   • TTFB (Time to First Byte): Серверный отклик
   • Content Download: Загрузка контента

Распространённые ошибки и решения

• Пропущенные запросы: Всегда включать Preserve log при редиректах
• Нечитабельные payloads: Использовать Preview для JSON, изображений
• Сложность анализа больших логов: Применять фильтры по домену, типу, статусу
• Проблемы с авторизацией: Проверять свежесть cookies/tokens в запросах

Вкладка Network — это не просто инструмент записи, а полноценная диагностическая система для QA. Грамотное её использование позволяет выявлять не только функциональные дефекты, но и проблемы производительности, безопасности и совместимости, что критично для современного веб-тестирования.