PrepBro
← Назад к вопросам

Как сделать троттлинг трафика через DevTools

1.0 Junior🔥 101 комментариев
#Веб-тестирование

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI5 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Троттлинг трафика через DevTools: полное руководство для QA Engineer

Троттлинг (throttling) трафика в DevTools — это мощная техника для эмуляции сетевых условий, которая позволяет тестировать поведение веб-приложений при медленном или нестабильном соединении. Как QA Engineer с 10+ лет опыта, я использую этот метод для проверки устойчивости, производительности и пользовательского опыта приложения в реалистичных условиях.

Зачем нужно троттлинг трафика?

  • Тестирование производительности: оценка времени загрузки и отклика интерфейса.
  • Проверка устойчивости (resilience): как приложение ведет себя при потере пакетов или высокой задержке.
  • Отладка: выявление проблем, которые проявляются только при медленном соединении.
  • Оценка UX: проверка наличия индикаторов загрузки, graceful degradation.

Пошаговая инструкция для Chrome/Edge DevTools

  1. Откройте DevTools: F12 или Ctrl+Shift+I (Windows/Linux), Cmd+Opt+I (Mac).
  2. Перейдите в панель Network.
  3. Найдите выпадающий список "Throttling": по умолчанию там стоит Online. Нажмите на него.
  4. Выберите предустановленный профиль или создайте свой:
    *   **Fast 3G / Slow 3G:** стандартные профили для мобильного интернета.
    *   **Custom > Add...** для создания своего профиля с точными параметрами.

Пример создания кастомного профиля

При создании профиля вы задаете:

  • Latency (задержка): время передачи пакета туда и обратно (RTT).
  • Download speed (скорость загрузки).
  • Upload speed (скорость отдачи).
  • Optional: Packet loss (потеря пакетов).

Вот как выглядит типичная конфигурация для эмуляции "плохого 4G":

Latency: 200 ms
Download throughput: 1 Mbps (или 1024 Kbps)
Upload throughput: 512 Kbps
Packet loss: 1%

Автоматизация через Puppeteer (Node.js)

Для интеграции в автотесты можно использовать Puppeteer, который позволяет программно задавать условия сети.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Включаем троттлинг через DevTools Protocol
  const client = await page.target().createCDPSession();
  await client.send('Network.emulateNetworkConditions', {
    offline: false,
    latency: 200, // ms
    downloadThroughput: 1024 * 1024 / 8, // 1 Mbps в байтах/сек
    uploadThroughput: 512 * 1024 / 8, // 0.5 Mbps в байтах/сек
    packetLoss: 0.01 // 1% потерь
  });
  
  await page.goto('https://your-app.com');
  // Дальнейшие проверки...
  
  await browser.close();
})();

Ключевые сценарии тестирования с троттлингом

  • Загрузка тяжелых ресурсов:
    *   Проверьте, как загружаются изображения, видео, скрипты.
    *   Убедитесь, что есть fallback (например, placeholder для изображений).
  • Отправка форм:
    *   Проверьте, что кнопка отправки блокируется (disable) на время запроса.
    *   Убедитесь, что есть timeout и retry логика.
  • Streaming данные:
    *   Актуально для чатов, дашбордов в реальном времени.
    *   Проверьте буферизацию и механизмы восстановления.
  • Офлайн-режим:
    *   Используйте режим `Offline` в DevTools.
    *   Проверьте работу Service Workers и кеширования.

Best Practices от эксперта

  • Сочетайте с CPU throttling: в панели Performance также можно замедлить CPU, что эмулирует слабые мобильные устройства.
  • Не забывайте про мобильные устройства: используйте Device Toolbar (Ctrl+Shift+M) вместе с троттлингом.
  • Мониторьте Network Waterfall: анализируйте, какие ресурсы блокируют загрузку.
  • Проверяйте логи ошибок: некоторые ошибки JavaScript или таймауты API проявляются только при медленной сети.
  • Используйте в CI/CD: автоматизируйте сценарии с троттлингом для регрессионного тестирования.

Ограничения DevTools Throttling

  • Не эмулирует реальную сеть с ее нестабильностью (jitter, fluctuating bandwidth).
  • Не влияет на WebSocket/Socket.io так же, как на HTTP-запросы (для этого нужны другие инструменты, например, Charles Proxy).
  • Только для вкладки: не затрагивает другие вкладки браузера.

Вывод: Троттлинг трафика через DevTools — это must-have навык для современного QA Engineer. Он позволяет находить критические проблемы с UX и стабильностью до того, как их увидят пользователи с плохим интернетом. Всегда включайте сценарии с замедленным соединением в свой тест-план, особенно для мобильных и географически распределенных приложений.

Как сделать троттлинг трафика через DevTools | PrepBro