База для QA
К списку уроков
Блок 5 · Инструменты тестировщика

Урок 17. Charles Proxy / Сниффер

Перехват и анализ запросов

Темы урока

Прокси-сервер и сниффер, Charles установка/настройка, HTTPS перехват, Breakpoints, Map Local/Remote, Throttling

Видео урока

Пройти тест по уроку

Конспект урока

Главное за урок

Charles Proxy — это посредник между клиентом и сервером. Он перехватывает весь трафик: заголовки, тела запросов и ответов, статус-коды, тайминги — всё в читаемом виде, включая HTTPS после настройки SSL Proxying.

DevTools показывает только то, что браузер решил показать. Charles видит весь трафик системы — мобильные приложения, нативные клиенты, фоновые процессы. Там, куда DevTools не дотягивается.

Подмена данных без доступа к коду — главная суперсила сниффера. Breakpoints, Map Local, Map Remote позволяют тестировать граничные случаи и edge cases без разработчика и без тестового сервера.

Как работает прокси

Charles встаёт в цепочку между клиентом и сервером:

Без прокси: Браузер → Сервер → Браузер
С Charles:  Браузер → Charles → Сервер → Charles → Браузер

Charles получает копию каждого запроса и ответа. Ничего не блокирует, просто наблюдает (если не включены Breakpoints).

Два режима просмотра:

  • Structure view — дерево хостов и эндпоинтов, удобно для фильтрации по домену
  • Sequence view — хронологический список с временными метками, удобно для анализа потока запросов

SSL Proxying — перехват HTTPS

По умолчанию Charles видит HTTPS как зашифрованный туннель — тело и заголовки скрыты, отображается <encrypted>.

Как включить:

  1. Help → SSL Proxying → Install Charles Root Certificate → доверяем сертификату в Связке ключей
  2. Proxy → SSL Proxying Settings → Add → Host: * (или конкретный домен, например aiqa.su)
  3. Перезагружаем страницу — теперь HTTPS расшифрован

Charles расшифровывает трафик на лету и снова шифрует перед отправкой серверу. Сервер ничего не замечает.

Сертификат Charles нужен только для HTTPS. Для HTTP он не нужен.

Breakpoints — перехват на лету

Breakpoints останавливают запрос или ответ и дают возможность отредактировать его до отправки дальше.

Работают в обе стороны:

  • На запрос — перехватывается до отправки серверу; можно изменить тело, заголовки, метод
  • На ответ — перехватывается до получения клиентом; можно подменить статус-код, тело ответа

Как поставить: правый клик на запросе → Breakpoint. При следующем срабатывании — диалог с редактором → Execute.

Зачем нужно:

  • Проверять граничные значения (quantity: 999, цена: -1)
  • Тестировать реакцию UI на ошибки (503, 404, 500) без доступа к серверу
  • Проверять, как фронтенд обрабатывает неожиданные данные

Map Local и Map Remote

В отличие от Breakpoints, Map Local и Map Remote работают постоянно — правило срабатывает автоматически при каждом запросе, пока активно.

Map Local

Каждый запрос к URL возвращает содержимое локального файла вместо реального ответа сервера.

Как использовать:

  1. Правый клик на запросе → Save Response — сохраняем оригинальный JSON
  2. Редактируем файл: меняем данные под нужный сценарий
  3. Tools → Map Local → Add → указываем URL и путь к файлу

Когда удобно: воспроизвести баг с конкретными данными, проверить UI с пустым ответом, edge cases.

Map Remote

Запросы к одному URL автоматически перенаправляются на другой.

Как использовать: Tools → Map Remote → Add → From (оригинальный URL) → To (целевой URL).

Когда удобно: сравнить поведение prod и staging, протестировать фронтенд с другим бэкендом без переконфигурации приложения.

Breakpoints Map Local Map Remote
Активация Вручную при каждом запросе Автоматически Автоматически
Что делает Редактируешь запрос/ответ на лету Отдаёт локальный файл Перенаправляет на другой URL
Когда удобно Разовые проверки Стабильные подмены данных Сравнение сред

Throttling — симуляция медленной сети

Throttling имитирует разные сетевые условия: мобильный интернет, EDGE, 3G, нестабильное соединение.

Как включить: Proxy → Throttle Settings → выбрать профиль (EDGE: 240 Kbps, 500 мс задержка) → Proxy → Enable Throttling.

Что проверять:

  • Появляются ли спиннеры загрузки
  • Не падает ли приложение при таймаутах
  • Нет ли race conditions при медленных ответах
  • Отображается ли сообщение об ошибке при превышении таймаута

Charles vs DevTools Throttling

DevTools Charles
Установка Встроен в браузер, ноль настройки Требует установки и сертификата
Область видимости Только текущая вкладка браузера Весь трафик системы
Мобильные устройства Нет Да (через настройку прокси на телефоне)
Когда выбирать Веб-тестирование, быстро Мобильные приложения, нативные клиенты

Тренажёр Charles Lab

Все 7 упражнений урока построены на реальном API «Пиццаеда»: aiqa.su/base/charles-lab

Упражнение Тема Что делаем
1 SSL Proxying Настраиваем перехват HTTPS для aiqa.su, смотрим ответ GET /products
2 Анализ ответа Изучаем структуру JSON, находим самый дорогой товар
3 Breakpoints (запрос) Меняем quantity: 1 → 999 в POST /cart, проверяем статус-код
4 Breakpoints (ответ) Подменяем статус 200 → 503 у GET /products, смотрим реакцию UI
5 Map Local Сохраняем /products, меняем все цены на 1, подменяем ответ
6 Map Remote Перенаправляем /products на /products?env=staging
7 Throttling Измеряем Duration POST /cart до и после включения EDGE

Домашнее задание урока 17

Пройди все 7 упражнений в Charles Lab: aiqa.su/base/charles-lab

У каждого упражнения есть пошаговая инструкция и вопрос с объяснением ответа.

Опубликуй итоги в чат по шаблону:

ДЗ 17 — Charles Lab
1. SSL Proxying: total в ответе GET /products → [число]
2. Самый дорогой товар → [название] — [цена] ₽
3. Breakpoints (запрос): статус-код на quantity: 999 → [код]
4. Breakpoints (ответ): что показал UI при статусе 503 → [описание]
5. Map Local: что отобразилось в карточках → [описание]
6. Map Remote: что изменилось в названиях → [описание]
7. Throttling: Duration запроса на EDGE → [мс]

Сдавать в чат марафона: https://t.me/+-utD4gcZaG82MTky

Ключевые тезисы для теста

  • Charles Proxy — посредник между клиентом и сервером; перехватывает весь трафик системы, включая мобильные приложения.
  • SSL Proxying — нужен для расшифровки HTTPS; требует установки корневого сертификата Charles и добавления хоста в SSL Proxying Settings.
  • Breakpoints — разовый перехват на лету; работают на запрос и на ответ; нужен клик при каждом срабатывании.
  • Map Local — постоянная подмена: запрос → локальный файл; удобно для стабильных edge cases.
  • Map Remote — постоянное перенаправление: запрос идёт на другой URL; удобно для сравнения сред.
  • Throttling — имитация медленной сети; проверяет поведение UI при задержках и таймаутах.
  • Charles vs DevTools: DevTools — только браузер и текущая вкладка; Charles — весь системный трафик, включая мобильные устройства.
  • Без SSL Proxying Charles видит HTTPS как <encrypted> — тело и заголовки недоступны.

Полезные ссылки