25 октября 2022

Как настроить Charles

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

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

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

  • Пройдите путь HelpSSL ProxyingInstall 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Выбрать сетьДополнительноПроксиВручную

Вот так это отображается на Samsung, на Xiaomi и на iPhone:
Нужные параметры можно посмотреть в Charles по пути: HelpSSL ProxyingInstall Root Certificate on a Mobile Device or Remote Browser. Также IP можно посмотреть в HelpLocal IP Address.
Установка сертификата на девайс
Устанавливаем сертификат.
Прежде чем начать работу, нужно установить на свой девайс сертификат, скачав его в браузере по ссылке chls.pro/ssl. Используйте Safari для iOS и системный браузер для Android.

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

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

Важно! Включите доверие для сертификата: ОсновныеОб этом устройствеДоверие сертификатамВключить доверие для вашего сертификата.
Финальные настройки
Перед началом работы отключите Proxy на ноутбуке: ProxyProxy SettingsMacOSуберите галочки с чекбоксов Enable MacOS Proxy и Enable MacOS Proxy on launch.

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

Затем включаем Proxy → Start Proxying и Start Recording. На нужных запросах выбираем правым кликом Enable SSL Proxying.
FAQ
Переустановка сертификата
Сертификат Charles действует год. По истечении его необходимо переустановить. Для этого сбрасываем старый сертификат на вашем Маке: HelpSSL ProxyingReset 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
Здесь запросы отображаются в режиме очередности
layout list detail
Если ранее были добавлены запросы в Focus, то в режиме Sequence можно поставить чекбокс Focused и наблюдать очередность только избранных запросов.

Просмотр информации о запросе идентичен и для Structure, и для Sequence.
layout supporting panel
Overview — информация о запросе (статус, время, метод и т д). Полная информация, которая доступна о запросе.
layout feed
Contents — содержимое запроса с хедерами, куками, json-ами и т д. Основная рабочая вкладка, на которой смотрим содержимое запросов/ответов. Для ответов чаще всего используются Headers и JSON Text.
layout feed
По двойному клику по полю открывается отдельное окно с необходимым значением. Удобно использовать для просмотра больших данных или для копирования.

Summary — сравнительная информация о группе запросов. Удобно сравнивать время, размер и другие данные о запросах.
layout feed
Chart — сравнительная диаграмма о времени выполнения группы запросов.По сути, это очередность запросов со временем их выполнения. Будет полезна, если надо прикинуть, сколько относительно друг друга занимают по времени запросы.
layout feed
Notes — личные заметки о запросе.В заметке можно написать, что делает запрос, какие-то данные для подмены или просто выразить свое негодование.
layout feed
Сама заметка теперь будет отображаться во вкладке Overview запроса.
layout feed
Бабблы подключенных настроек
Здесь отображаются правила, которые сейчас включены в Charles Proxy к запросам и ответам.
layout feed
На скриншоте выше можно увидеть, что в данный момент включена запись запросов Recording, включены правила подмены Rewrite, включена локальная подмена Map Local на запрос, а также выставлены Breakpoints на некоторые запросы.

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


Есть идея?