Какая вкладка DevTools меняет скорость работы сети?

Вкладка DevTools для эмуляции сетевых условий

Основной инструмент для изменения скорости сети находится во вкладке Network (Сеть) браузера DevTools. Однако, начиная с Chrome 87+ и аналогичных версий в других браузерах, эта функциональность была перемещена и интегрирована в более общий инструмент эмуляции условий.

Точное расположение и настройка

1. Вкладка Network (Сеть):

    *   Здесь вы видите все сетевые запросы вашей страницы.
    *   В верхней панели этой вкладки есть выпадающее меню, которое по умолчанию имеет значение **`No throttling`** (Без ограничения). Кликнув по нему, вы получаете доступ к пресетам скорости сети.

1. Панель Performance (Производительность) или Lighthouse:

    *   В этих вкладках также часто присутствует аналогичный выпадающий список для выбора сетевого пресета, так как анализ производительности напрямую зависит от условий загрузки.

1. Расширенная настройка в Conditions (Условия) или Throttling (Ограничение):

    *   В современных DevTools (особенно в Chrome) появилась отдельная панель **`Performance settings`** или вкладка **`Conditions`** (доступна через кнопку с иконкой шестеренки `⚙ Settings` в DevTools или в отдельной панели `Drawer`).
    *   Здесь можно найти расширенные настройки **`Network throttling`** и **`CPU throttling`**. Это наиболее гибкий вариант.

Как настроить пользовательский профиль скорости

Пресеты (Fast 3G, Slow 3G) часто недостаточны. Создать свой профиль можно так:

• В выпадающем списке Network throttling выберите Add... или Custom.
• Задайте параметры. Самые важные из них:

    *   **`Latency` (Задержка, RTT)**: Время прохождения сигнала "туда и обрабратно" в миллисекундах. Влияет на время установления соединения (TCP-рукопожатие, TLS-negotiation).
    *   **`Download throughput` (Скорость загрузки)**: Максимальная скорость получения данных на устройство (в килобитах/мегабитах в секунду).
    *   **`Upload throughput` (Скорость отдачи)**: Скорость отправки данных.

Пример типичных значений для пресетов:

• Slow 3G: Задержка 400 мс, Скачивание 400 Кбит/с, Отдача 400 Кбит/с.
• Fast 3G: Задержка 150 мс, Скачивание 1.5 Мбит/с, Отдача 750 Кбит/с.

Вы также можете эмулировать Offline режим.

Практическое применение для QA-инженера

Для тестирования веб-приложений изменение скорости сети используется для проверки:

• Устойчивости и обработки ошибок: Как ведет себя приложение при обрывах связи или очень медленной загрузке. Не "висит" ли интерфейс.
• Логики загрузки контента: Корректно ли работают lazy loading изображений, бесконечный скролл, подгрузка данных по частям.
• Пользовательского опыта (UX): Наличие и адекватность skeleton screens (скелетонов), спиннеров, сообщений о загрузке.
• Работы с кэшем (Cache) и Service Workers: Поведение приложения при повторных посещениях на медленной сети.
• Граничных условий: Загрузка больших файлов, отправка форм, потоковое видео.
• Валидации navigator.connection: Если приложение использует API Network Information для адаптации логики под тип сети.

Пример кода для мониторинга сети в автоматизированном тестировании (Playwright)

Хотя в DevTools настройка производится вручную, в автотестах можно эмулировать сеть программно:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // Эмуляция медленного 3G через контекст браузера
  await context.setOffline(false);
  await context.route('**', route => {
    // Можно добавить искусственную задержку для всех или конкретных запросов
    // route.continue();
    // Или мокать ответы для медленных API
  });

  // Более точная эмуляция через CDP Session (Chrome DevTools Protocol)
  const page = await context.newPage();
  const client = await context.newCDPSession(page);
  await client.send('Network.emulateNetworkConditions', {
    offline: false,
    downloadThroughput: (500 * 1024) / 8, // 500 Кбит/c в байтах/с
    uploadThroughput: (500 * 1024) / 8,
    latency: 200 // Задержка в мс
  });

  await page.goto('https://your-site.com');
  // Далее выполняются проверки поведения на медленной сети
  // Например, проверка видимости спиннера
  // await page.waitForSelector('.loader', { state: 'visible' });
  // await page.waitForSelector('.loader', { state: 'hidden' });

  await browser.close();
})();

# Пример на Python с использованием Selenium (более сложный, требует передачу команд CDP)
from selenium import webdriver
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

caps = DesiredCapabilities.CHROME
caps['goog:loggingPrefs'] = {'performance': 'ALL'}

driver = webdriver.Chrome(desired_capabilities=caps)

# Через CDP (требуется совместимость версий)
driver.execute_cdp_cmd('Network.emulateNetworkConditions', {
    'offline': False,
    'downloadThroughput': 500 * 1024 / 8,  # 500 Кбит/c
    'uploadThroughput': 500 * 1024 / 8,
    'latency': 200
})

driver.get("https://your-site.com")
# ... ваши проверки
driver.quit()

Важное замечание: Эмуляция сети в DevTools не влияет на реальный трафик вашей операционной системы, она действует только на вкладку браузера. Это идеально для изолированного тестирования. Для QA-инженера умение использовать этот инструмент и понимание его влияния на ключевые метрики веб-производительности (First Contentful Paint, Largest Contentful Paint, Time to Interactive) является критически важным навыком для обеспечения качества пользовательского опыта в реальных условиях.