Приложение Charles Proxy - большой помощник и тестировщику, и разработчику. Мы хотим рассказать вам про функции «Чарльза», показать, как им пользуемся в своей работе. Вторую часть нашего рассказа про функциональность Charles можно почитать по ссылке. Но для начала поможем разобраться с приложением и правильно его настроить.
Установка и настройка Charles
Скачать последнюю версию можно с официального сайта приложения.
Без лицензии вам будет доступна пробная версия на 30 дней. После истечения этого срока появятся ограничения - функции не заблокируются полностью, но использование ограничено по времени.
Затем нужно установить сертификат. Для этого выполните следующие действия:
Пройдите путь Help → SSL Proxying → Install Charles Root Certificate.
Найдите в KeyChain сертификат Charles Proxy.
Сделайте его доверенным, изменив настройки с дефолтных Use System Defaults на Always Trust.
Подключение девайса
Charles можно установить в связке с ПК и с мобильным устройством. Для этого подключаем девайс и ноутбук к одной сети Wi-Fi. Для MacBook это настраивается следующим образом:
1. На девайсе в настройках Wi-Fi переходим в дополнительные настройки и подключаем proxy.
2. В Proxy вводим IP ноутбука и порт 8888 (он же дефолтный).
3. На экране MacBook после подключения девайса появится диалоговое окно, нажмите Allow.
На разных девайсах настройки выглядят по-разному, обратите внимание. Например, на Android нужно пройти путем Настройки → Подключения → Wi-Fi → Выбрать сеть → Дополнительно → Прокси → Вручную
Нужные параметры можно посмотреть в 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
Что делать, если не скачивается сертификат?
Проверьте, включен ли SSL Proxying на оба запроса http://ssl.charles и http://chls.pro.
Проверьте настройки браузера на загрузку файлов.
Проверьте, не включен ли у вас VPN, так как с ним весь трафик идет в обход Charles.
Что делать, если не видно запросов – везде Unknown?
Проверьте, установлен ли сертификат.
Включите SSL Proxying на конкретный запрос через правый клик – Enable SSL Proxying.
Проверьте Allow List и Block List в меню Tools. Оба этих листа могут запрещать соединение для вашего запроса. Лучше воздержаться от их использования, если вы не очень понимаете их суть.
На Android в сборке клиента должны быть прописаны манифесты для Charles Proxy.
Если запрос зашифрован, то его данные увидеть нельзя.
Что делать, если сделал все по инструкции, а запросы не вижу?
Проверьте прописанный IP своего MacBook и порт
VPN на девайсе должен быть выключен и весь трафик должен идти через Charles.
Что делать, если мне нужен VPN для работы?
Ничего страшного, VPN настраивается на MacBook, а девайс подключается через прокси к нему, получая преимущества Charles и VPN.
Что делать, если интернет не работает без Charles?
Откройте «Системные настройки». Далее следующий путь: Сеть → Ваша сеть → Дополнительно → Таб Прокси → Снять галочки с 2 чекбоксов у «Веб-прокси» и «Защищенный веб-прокси» → Ок → Применить
Что делать, если Charles Proxy вылетает каждые 30 минут и постоянно показывает баннер?
Если у вас установлена триал-версия, то она ограничивает время сессии на 30 минут. Можно перезапустить и пользоваться дальше, не забывая про ограничения пробной версии.
Переустановка сертификата
Сертификат Charles действует год. По истечении его необходимо переустановить. Для этого сбрасываем старый сертификат на вашем Маке: Help → SSL Proxying → Reset Charles Root Certificate.
Удаляем старый сертификат с устройства в настройках профиля (iOS) или ЦА сертификатах (Android). Проходим установку сертификата заново, как это описано выше.
Интерфейс
Перед тем, как приступать к работе, рассмотрим основные элементы управления и режимы просмотра запросов и ответов. У нас есть кнопки быстрого доступа включения/отключения некоторых настроек.
Clear the current Session — очищает историю запросов.
Start/Stop Recording — включает или выключает записи запросов.
Start/Stop SSL Proxying — включает или выключает просмотр запросов.
Start/Stop Throttling — включает или выключает троттлинг соединения.
Enable/Disable Breakpoints — включает или выключает брейкпоинты по запросам.
В приложении два режима отображения запросов: Structure и Sequence.
Режим 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.
