Charles

Web Debugging Proxy Application for Windows, Mac OS and Linux

Download

About Charles

Charles is a web proxy (HTTP Proxy / HTTP Monitor) that runs on your own computer. Your web browser (or any other Internet application) is then configured to access the Internet through Charles, and Charles is then able to record and display for you all of the data that is sent and received.

In Web and Internet development you are unable to see what is being sent and received between your web browser / client and the server. Without this visibility it is difficult and time-consuming to determine exactly where the fault is. Charles makes it easy to see what is happening, so you can quickly diagnose and fix problems.

Charles makes debugging quick, reliable and advanced; saving you time and frustration!

Key Features

SSL Proxying – view SSL requests and responses in plain text
Bandwidth Throttling to simulate slower Internet connections including latency
AJAX debugging – view XML and JSON requests and responses as a tree or as text
AMF – view the contents of Flash Remoting / Flex Remoting messages as a tree
Repeat requests to test back-end changes
Edit requests to test different inputs
Breakpoints to intercept and edit requests or responses
Validate recorded HTML, CSS and RSS/atom responses using the W3C validator

Charles: незаменимый тул в арсенале QA-инженера

Для тестирования мобильных приложений, работающих с удаленными серверами, QA-инженеру приходится держать под рукой множество разных тестовых аккаунтов, логов, запросов и ответов. Реальность такова, что не всегда удается договориться о предоставлении нужных тестовых данных в срок. Чаще всего серверные разработчики будут незнакомыми вам людьми по ту сторону Скайпа. В таких ситуациях приходится своими руками подменять ответ сервера перед его передачей в приложение.

Чтобы редактировать выдачу сервера и воспроизводить сложные тестовые сценарии в QA Redmadrobot, мы используем Charles.

Как это работает?

Charles — инструмент для мониторинга HTTP/HTTPS трафика. Программа работает как прокси-сервер между мобильным приложением (в нашем случае) и сервером этого приложения. Charles записывает и сохраняет все запросы, которые проходят через подключенный к нему телефон и позволяет их редактировать.

Инструкция по установке Charles на Mac OS X и подключение телефона.

1. Качаем и устанавливаем.
2. При первом запуске Charles заботливо предложит автоматически настроить параметры сети — соглашаемся.
3. Переходим в Proxy > Proxy Settings и выставляем порт 8888, если он уже не прописан.
4. На телефоне заходим в настройки Wi-Fi и прописываем в прокси сервер IP-адрес вашего Mac и порт 8888.
Телефон должен быть подключен к той же Wi-Fi сети, что и ваш Mac.

Готово. При следующем соединении клиент Charles попросить разрешение подключить ваш телефон. После этого в Charles начинают отображаться все HTTP-запросы и ответы, которые проходят через ваш телефон.

Для мониторинга HTTPS-трафика нужно пройти дополнительные шаги:
5. Переходим в браузер телефона и заходим на www.charlesproxy.com/getssl для установки сертификата SSL, который будет использоваться при подключении. Устанавливаем.
6. В списке хостов выбираем желаемый хост с HTTPS и ставим галочку Enable SSL Proxying.

Готово. Теперь в клиенте Charles отображается HTTPS-трафик по выбранному хосту.

Важно
Если ваше приложение использует SSL pinning, то Charles не сможет перехватывать запросы и ответы.

Мониторинг трафика

Для наглядной демонстрации работы с API используем приложение Хабрахабр для Android. На iPhone стоит защита от программ типа Charles, но на Android её нет.

Charles выстраивает все запросы в порядке их отправки на сервер. Запросы и ответы можно просматривать как в отформатированном, так и в «сыром» виде. В QA Redmadrobot во время тестирования телефон всегда подключен к Charles. Таким образом остается возможность посмотреть историю запросов и отследить хитрые баги.

Подмена данных

Как видите, у меня не так много кармы. Charles поможет сделать вид, что её чуть больше, чем есть на самом деле.

Выдача по аккаунту выглядит так (только JSON-строка, без header’ов):

< "data": < "id": 946584, "login": "yaryabu", "time_registered": "2015-02-27T15:22:52+03:00", "score": 6, "fullname": null, "sex": 0, "rating": 0, "rating_position": 0, "geo": < "country": null, "region": null, "city": null >, "counters": < "posts": 1, "comments": 3, "followed": 0, "followers": 0 >, "badges": [< "alias": "habred", "title": "Захабренный", "plural": "Захабренные", "description": "Пользователь с кармой \u003E0." >], "avatar": "http:\/\/habrahabr.ru\/i\/avatars\/stub-user-middle.gif", "is_readonly": false >, "server_time": "2015-10-16T20:38:02+03:00" >

В логе есть поле score:

"score": 6

По всей видимости, как раз то, что мне нужно.

Rewrite settings

Для подмены серверных данных открываем Tools > Rewrite.
В списке слева отображаются сеты из запросов, которые можно составлять на свой вкус. После создания сета идет выставление location. Здесь мы прописываем URL запроса с query параметрами (по желанию).

Следующий шаг — создать правило подмены. К сожалению, Charles не умеет подменять информацию по ключу. Нужно вручную прописывать ключ и значение, а затем писать то, что мы ходим увидеть.

Окно создания правила будет выглядеть следующим образом:

Сам экран подмены будет выглядеть приблизительно так:

Следующий ответ по запросу информации о себе будет иметь отредактированные данные, score = 5000:

< "data": < "id": 946584, "login": "yaryabu", "time_registered": "2015-02-27T15:22:52+03:00", "score": 5000, "fullname": null, "sex": 0, "rating": 0, "rating_position": 0, "geo": < "country": null, "region": null, "city": null >, "counters": < "posts": 1, "comments": 3, "followed": 0, "followers": 0 >, "badges": [< "alias": "habred", "title": "Захабренный", "plural": "Захабренные", "description": "Пользователь с кармой \u003E0." >], "avatar": "http:\/\/habrahabr.ru\/i\/avatars\/stub-user-middle.gif", "is_readonly": false >, "server_time": "2015-10-16T20:58:05+03:00" >

При следующем переходе на экран профиля в приложении Хабра мы увидим плод своих трудов.

Хочу еще раз напомнить, что информация на сервере остается прежней. Данные изменяются во время путешествия к МП и эти изменения никак не затрагивают реальные данные профиля.

Таким же образом можно подменять не только ответы, но и запросы. Для этого на экране Rewrite rule нужно поставить галочку в поле Request, а не Response.

Breakpoints

При подмене запросов с помощью Rewrite settings в Charles невозможно редактировать кириллицу. При изменении любой информации на кириллицу ваши логи будут состоять из множества вопросительных знаков.

К счастью, этот недостаток можно обойти с помощью другой функции Charles — breakpoints. Идея похожая, но только ответы останавливаются прямо перед передачей в МП, и их можно редактировать своими руками в реальном времени.

Открываем Breakpoints settings и прописываем URL запроса.

При следующем ответе по этому запросу Charles перехватит всю выдачу и позволит нам с ней работать. Следует держать в голове, что МП может выкинуть ошибку по тайм-ауту, и текущий запрос уйдет в никуда.

Заменим мой логин на что-нибудь, написанное на кириллице.

Вот и все. Приложение отображает нужную нам информацию и проблем с кириллицей не возникает.

Самое главное

Лицензионная версия Charles обойдется в $50 на человека. Charles разрешает пользоваться собой бесплатно, но с ограничениями. Функционал инструмента не блокируется, но во время использования триальной версии иногда будут появляться окна с просьбой подождать 5-10 секунд перед возобновлением работы и еще раз подумать о том, как клево было бы купить лицензию. Также каждые 30 минут программа будет автоматически завершаться и вся история запросов будет утрачена.

Итоги

Charles является незаменимым инструментом в арсенале QA-инженеров Redmadrobot. С его помощью можно создавать любые необходимые тестовые данные, как реальные, так и невозможные (если верить API-спецификациям). Такие возможности расширяют границы тестирования черного ящика и позволяют наблюдать все основные взаимодействия вашего МП и его серверов. Тестирование на таком уровне позволяет находить более сложные дефекты и значительно повышает общее качество приложения.

тестирование мобильных приложений
redmadrobot
мобильная разработка
mobile development
qa
quality assurance
charles
charlesproxy
proxy
web debugger

Блог компании red_mad_robot
Разработка мобильных приложений
Тестирование веб-сервисов
Тестирование мобильных приложений

При подготовке материала использовались источники:
https://www.charlesproxy.com/overview/about-charles/
https://habr.com/ru/companies/redmadrobot/articles/269109/

Программа charles что это такое