Приложение Charles Proxy — большой помощник и тестировщику, и разработчику. Мы хотим рассказать вам про функции «Чарльза», показать, как им пользуемся в своей работе мы. Но для начала поможем разобраться с приложением и правильно его настроить.

Установка и настройка Charles

Скачать последнюю версию можно с официального сайта приложения.

Без лицензии вам будет доступна пробная версия на 30 дней. После истечения этого срока появятся ограничения — функции не заблокируются полностью, но использование ограничено по времени.

Затем нужно установить сертификат. Для этого выполните следующие действия:

• Пройдите путь Help → SSL Proxying → Install Charles Root Certificate.
• Найдите в KeyChain сертификат Charles Proxy.
• Сделайте его доверенным, изменив настройки с дефолтных Use System Defaults на Always Trust.

Подключение девайса

Charles можно установить в связке с ПК и с мобильным устройством. Для этого подключаем девайс и ноутбук к одной сети Wi-Fi.

1. На девайсе в настройках Wi-Fi переходим в дополнительные настройки и подключаем proxy.
2. В Proxy вводим IP ноутбука и порт 8888 (он же дефолтный).
3. На экране MacBook после подключения девайса появится диалоговое окно, нажмите Allow.

На разных девайсах настройки выглядят по-разному, обратите внимание. Например, на Android нужно пройти путем Настройки → Подключения → Wi-Fi → Выбрать сеть → Дополнительно → Прокси → Вручную

На iOS путь следующий: Настройки → Wi-Fi → Info → Настройка прокси → Вручную

Нужные параметры можно посмотреть в Charles по пути: Help → SSL Proxying → Install Root Certificate on a Mobile Device or Remote Browser. Также IP можно посмотреть в Help → Local IP Address.

Установка сертификата на девайс

Прежде чем начать работу, нужно установить на свой девайс сертификат, скачав его в браузере по ссылке chls.pro/ssl. Используйте Safari для iOS и системный браузер для Android.

Если скачивание сертификата не началось автоматически, нужно в установленном на ноутбуке Charles найти запросы http://ssl.charles и http://chls.pro, правым кликом по каждому из них выбрать Enable SSL Proxying и снова пройти по ссылке.

Устанавливаем сертификат.

Android: Если установка сертификата после загрузки не произошла, ищем «Сертификаты» в настройках девайса, выбираем пункт меню Установка ЦА/ЦС сертификатов безопасности. Ищем скачанный на девайс сертификат и устанавливаем его. Если потребуется задать PIN при установке, то задать любой.

На iOS: ищем Настройки → Профили → Установить сертификат.

Финальные настройки

Перед началом работы отключите Proxy на ноутбуке: Proxy → Proxy Settings → MacOS → уберите галочки с чекбоксов Enable MacOS Proxy и Enable MacOS Proxy on launch.

Это нужно, чтобы не видеть запросы с браузеров самого ноутбука.

Затем включаем Proxy → Start Proxying и Start Recording. На нужных запросах выбираем правым кликом Enable SSL Proxying.

FAQ

Что делать, если не скачивается сертификат?

1. Проверьте, включен ли SSL Proxying на оба запроса http://ssl.charles и http://chls.pro.
2. Проверьте настройки браузера на загрузку файлов.
3. Проверьте, не включен ли у вас VPN, так как с ним весь трафик идет в обход Charles.

Что делать, если не видно запросов – везде Unknown?

1. Проверьте, установлен ли сертификат.
2. Включите SSL Proxying на конкретный запрос через правый клик – Enable SSL Proxying.
3. Проверьте Allow List и Block List в меню Tools. Оба этих листа могут запрещать соединение для вашего запроса. Лучше воздержаться от их использования, если вы не очень понимаете их суть.
4. На Android в сборке клиента должны быть прописаны манифесты для Charles Proxy.
5. Если запрос зашифрован, то его данные увидеть нельзя.

Что делать, если сделал все по инструкции, а запросы не вижу?

1. Проверьте прописанный IP своего MacBook и порт
2. VPN на девайсе должен быть выключен и весь трафик должен идти через Charles.

Что делать, если мне нужен VPN для работы?

Ничего страшного, VPN настраивается на MacBook, а девайс подключается через прокси к нему, получая преимущества Charles и VPN.

Что делать, если интернет не работает без Charles?

Откройте «Системные настройки». Далее следующий путь: Сеть → Ваша сеть → Дополнительно → Таб Прокси → Снять галочки с 2 чекбоксов у «Веб-прокси» и «Защищенный веб-прокси» → Ок → Применить

Что делать, если Charles Proxy вылетает каждые 30 минут и постоянно показывает баннер?

Если у вас установлена триал-версия, то она ограничивает время сессии на 30 минут. Можно перезапустить и пользоваться дальше, не забывая про ограничения пробной версии.

Переустановка сертификата

Сертификат Charles действует год. По истечении его необходимо переустановить. Для этого сбрасываем старый сертификат на вашем Маке: Help → SSL Proxying → Reset Charles Root Certificate.

Удаляем старый сертификат с устройства в настройках профиля (iOS) или ЦА сертификатах (Android). Проходим установку сертификата заново, как это описано выше.

Интерфейс

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

1. Clear the current Session — очищает историю запросов.	2. Start/Stop Recording — включает или выключает записи запросов.	3. Start/Stop SSL Proxying — включает или выключает просмотр запросов.	4. Start/Stop Throttling — включает или выключает троттлинг соединения.	5. Enable/Disable Breakpoints — включает или выключает брейкпоинты по запросам.

Режим Structure

Можно отображать запросы в виде структурированных папок.

Дерево запросов — список запросов, который был отправлен приложением. Поле запроса — информация о запросе. Поле ответа — ответ сервера. Фильтр — поле для фильтрации запросов.

• Включите Focus на запросы, с которыми чаще работаете (кликаем правой кнопкой мыши по домену запроса или конкретному запросу, и в выпадающем меню выбираем Focus). Это поможет отслеживать только необходимые домены/запросы, группируя оставшиеся в Other Hosts.
• Сессии можно сохранять и загружать через File → Import/Export Session. Формат для сохранения .chls

Режим Sequence

Здесь запросы отображаются в режиме очередности

• Если ранее были добавлены запросы в Focus, то в режиме Sequence можно поставить чекбокс Focused и наблюдать очередность только избранных запросов.

Просмотр информации

Просмотр информации о запросе идентичен и для Structure, и для Sequence.

Overview — информация о запросе (статус, время, метод и т д). Полная информация, которая доступна о запросе.

Contents — содержимое запроса с хедерами, куками, json-ами и т.д. Основная рабочая вкладка, на которой смотрим содержимое запросов/ответов. Для ответов чаще всего используются Headers и JSON Text.

• По двойному клику по полю открывается отдельное окно с необходимым значением. Удобно использовать для просмотра больших данных или для копирования.

Summary — сравнительная информация о группе запросов. Удобно сравнивать время, размер и другие данные о запросах.

Chart — сравнительная диаграмма о времени выполнения группы запросов. По сути, это очередность запросов со временем их выполнения. Будет полезна, если надо прикинуть, сколько относительно друг друга занимают по времени запросы.

Notes — личные заметки о запросе. В заметке можно написать, что делает запрос, какие-то данные для подмены или просто выразить свое негодование.

Сама заметка теперь будет отображаться во вкладке Overview запроса.

Бабблы подключенных настроек

Здесь отображаются правила, которые сейчас включены в Charles Proxy к запросам и ответам.

На скриншоте выше можно увидеть, что в данный момент включена запись запросов Recording, включены правила подмены Rewrite, включена локальная подмена Map Local на запрос, а также выставлены Breakpoints на некоторые запросы.

Итак, мы разобрались, как настроить Charles, посмотрели на его интерфейс, и теперь — наконец-то! — можем начинать работу. Но об этом поговорим уже в следующей статье от студии мобильной разработки CleverPumpkin.