Как настроить charles для android

Как настроить Charles Proxy для Android Studio Emulator

Эта инструкция протестирована в начале 2023 года с Windows 10, эмулятором c API 33 и последней на этот момент версией Android Studio (2022.1.1) и Charles Proxy (4.6.3). Написал ее, так как не нашел актуальной инструкции для последних версий эмулятора, так как в них больше нет вкладки Proxy в настройках, а в Charles Proxy также немного переделали настройку. Итак:

> Запускаем Charles Proxy

> Снимаем галочку Proxy -> Windows (MasOS) Proxy

> Смотрим и запоминаем локальный адрес компьютера в сети, он находится в Help -> Local IP Address, или это же можно посмотреть в настройках сети

> Заходим в меню Proxy -> Proxy Settings… и смотрим, чтобы был указан порт 8888

> В Android Studio смотрим расположение Android SDK, для этого в настройках в поиске вводим “sdk”, открываем вкладку “Android SDK” и копируем путь из “Android SDK Location:”

> Открываем командную строку, можно перейти в папку c SDK, для этого вводим

где к пути соответственно добавился “\platform-tools”, в это папке находится adb.exe, который и нужен, а можно сразу ввести команду с путем к adb.exe, выглядеть это будет так

C:\Users\\AppData\Local\Android\Sdk\platform-tools\adb.exe shell settings put global http_proxy :8888

также как вариант, можно открыть папку вручную и перетащить adb.exe в командную строку и добавить все, чего не хватает.

> В Charles Proxy должен появиться запрос на подключение, нужно его подтвердить

> Во вкладке сессии должны появиться в том числе запросы из эмулятора. Чтобы отфильтровать только нужное доменное имя, нажимам правой кнопкой на него и выбираем в выпадающем меню Focus

> Открываем Chrome на эмуляторе и переходим по адресу http://chls.pro/ssl ,скачиваем сертификат

> Заходим в настройки на эмуляторе, вводим в поиске certificate, открываем вкладку Install certificate(может быть вложена в другие пункты меню, в зависимости от версии), устанавливаем скачанный сертификат

> Переходим в Trusted credentials и убеждаемся, что во вкладке User появится сертификат Charles Proxy

> В Charles Proxy выбираем нужный адрес, нажимаем правой кнопкой и выбираем Copy URL, заходим в Proxy -> SSL Proxying settings… -> Include -> Add и добавляем скопированный url, порт писать не обязательно, после очистки истории для указанного адреса, должны начать показываться запросы в виде дерева rest адресов

> Чтобы модифицировать или перезаписать запросы-ответы, есть 3 разных способа:

Включаем Tools -> Rewrite…, добавляем адрес и то, на что мы ходим переписать в поле body, выбрав соответствующий способ, включаем параметр request и в поле value пишем нужный ответ

можно использовать перезапись в режиме текущего времени, используя для этого Brakepoints

можно использовать Map Local и подставляем нужный файл ответа

> Не стоит забывать, если на роутере установлен динамический IPадрес для компьютера, при следующем подключении IPадрес может быть другим

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

Приложение 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

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

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). Проходим установку сертификата заново, как это описано выше.

Интерфейс

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

• 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.

• charles proxy
• инструкция

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

Charles для начинающего QA: от настройки до использования

Всем привет, меня зовут Роман, я тестировщик в компании СберМегаМаркет.

Итак, по первой ссылке в гугле на запрос «Charles что такое», можно найти примерно следующее: Charles – один из самых распространенных инструментов для сниффинга трафика. В свою очередь, сниффинг трафика – это перехват и анализ сетевого трафика.

Нетрудно понять, что Charles – это что-то похожее на консоль разработчика в браузере, однако, с гораздо более широким спектром возможностей и приспособленным под большее количество платформ.

Особенно обширно Charles применяется в мобильном тестировании, ввиду того, что это один из самых простых и удобных способов посмотреть, уходят ли запросы с мобильного клиента, с какими параметрами они отправляются и как отвечает backend. Дальше в статье расскажу о Charles для начинающего QA.

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

Для начала необходимо подружить телефон, с которого мы будем сниффить трафик, и Charles.

1. Скачиваем программу с официального сайта Charles.

Charles является платной программой, но есть и бесплатная версия, в которой Charles необходимо перезапускать каждые 30 минут и на некоторые действия накладывается 10-ти секундный Delay. В остальном отличий между платной и бесплатной версиями нет.

2. После успешной установки открываем программу и попадаем в главное окно.

3. Сверху жмем Help ~> SSL Proxying ~> Install Charles Root Certificate.

Таким образом мы установим корневой сертификат в систему, чтобы Charles мог работать с https-запросами.

4. После установки в списке сертификатов видим сертификат Charles.

5. Открываем свойства сертификата.

6. В открывшемся окне, в пункте «Доверие», проверяем, что везде указан параметр «Всегда доверять».

7. После этого можно закрыть все окна, связанные с сертификатами. Далее идем в Help ~> SSL Proxying ~> Install Root Certificate on a Mobile Device or Remote Browser.

Должно открыться окно с ip и портом, по которому можно достучаться до Charles.

Открывшееся окно не нужно закрывать. Оставляем открытым, пока не подключимся с телефона.

8. Берем в руки девайс и переходим в настройки Wi-Fi сети.

Чтобы все получилось, необходимо, чтобы компьютер и телефон были подключены к одному Wi-Fi, а vpn был выключен как на телефоне, так и на компьютере. Иначе есть вероятность того, что Charles не сможет обнаружить телефон.

9. В настройках Wi-Fi на телефоне заходим в настройки сети (на телефонах марки Samsung – шестеренка рядом с названием сети Wi-Fi, на телефонах марки Huawei необходимо нажать и удерживать палец на наименовании Wi-FI сети и выбрать «Изменить сеть»).

Далее в пункте «Прокси» выбираем параметр «Вручную».

В поле «Имя узла прокси» вводим ip: например, 192.168.1.64:

В поле «Порт прокси» указываем порт: например, 8888:

Должно получиться следующее:

После того, как сохранили настройки сети, в окне Charles должно появиться уведомление с просьбой разрешить или отклонить доступ к девайсу. Жмем «Разрешить»/«Allow».

После открытия страницы браузер должен начать скачивать сертификат для Charles.

Если браузер не показал, что начал скачивать файл, попробуйте открыть пункт «Загрузки»: некоторые браузеры осуществляют загрузку в фоновом режиме. Если же сертификат не загружается, значит, один из пунктов выше выполнен неправильно или не до конца.

11. После скачивания сертификата открываем настройки – на Samsung в поиске пишем «Установить из памяти» – Сертификат Wi-Fi – выбрать папку Download – Выбрать сертификат Charles и установить его. Для Huawei и других устройств можно просто нажать на сертификат и установить его, выбрав пункт «Установка для Wi-Fi».

12. Теперь можно смотреть сетевой трафик на мобильном девайсе. Если для тестирования дебажной сборки вашего приложения необходимо подключение к VPN, его нужно включить на компьютере. Ввиду того, что весь трафик с телефона проходит через Charles и запросы уходят так же через него, для отправки запроса будут использоваться настройки сети компьютера, а не телефона.

Если есть проблема с тем, что некоторые запросы не отображаются, необходимо сделать следующее: Proxy ~> SSL Proxying Settings ~> Во вкладке SSL Proxying и графе Include нажать Add ~> В поле Host и Port указать «*» и нажать «Ок».

Эта настройка принудительно включает проксирование трафика с любого хоста и порта.

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

Для подключения iOS-девайса к Charles необходимо проделать те же шаги, что и для Android-девайса, однако, в пункте 13 необходимо сделать доверенным установленный сертификат. Для этого необходимо перейти в Настройки – Основные – Об этом устройстве – Пролистать в самый низ экрана – Доверие сертификатам – Включить доверие для сертификата Charles.

Как и для чего мы в СберМегаМаркете используем Charles: на примере тестирования Android-приложения

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

Во-вторых, одна из самых полезных и незаменимых фич в Charles – это подмена ответа с backend. Это можно сделать с помощью нескольких инструментов, одним из которых являются Breakpoints. Их мы используем чаще всего.

В качестве примера можно рассмотреть наш недавний кейс с отображением заглушки экрана после авторизации, которая отображается в зависимости от того, по какой схеме доставки товара работает продавец. И отрисовка необходимых вкладок с заказами для каждого типа доставок или для обеих типов доставки вместе. Вся логика реализуется на бэкенде.

Во время авторизации используем ручку merchant/search, в ответе которой приходит атрибут startFlow типа string, который свидетельствует о том, должна ли отображаться заглушка и какие вкладки для заказов необходимо отображать.

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

Во-первых, на тестовом окружении нет необходимых аккаунтов, на которых можно проверить отображение заглушки.

Во-вторых, создать такой аккаунт на данный момент довольно сложно ввиду того, что разработка функционала регистрации таких аккаунтов еще не закончена.

В-третьих, атрибут, который приходит в ответе ручки, не хранится в БД, а формируется на бэке по отдельной логике.

Итак, как я уже писал выше, основной инструмент, который понадобится для подмены ответа – это Breakpoints (Точки останова). Если вкратце, Breakpoints срабатывают в тот момент, когда Charles «ловит» запрос к методу, для которого указана точка останова. Запрос не отправится до того момента, пока пользователь руками не отправит его. Сделано это для того, чтобы можно было отредактировать параметры запроса или итоговый ответ.

Итак, указываем в прокси телефона ip и порт Charles и открываем приложение. Логинимся в аккаунт, который работает по поддерживаемой нами схеме.

Открываем Charles и видим запросы, которые проходили за время логина в приложение.

Для того, чтобы отобразилась заглушка, необходимо в ручке merchant/search в поле startFlow прислать значение «true».

Для того, чтобы подменить это поле, необходимо поставить Breakpoint на нужный метод. Для этого в списке запросов находим нужный ~> открываем настройки ~> выбираем пункт Breakpoints.

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

В открывшемся окне нам доступно редактирование тела запроса, если перейти на вкладку «Edit request». В нашем случае менять тело запроса не нужно, поэтому просто отправляем запрос. После этого снова откроется окно в Charles, где уже можно редактировать ответ, который пришел от api. Для редактирования ответа необходимо перейти на вкладку «Edit response» и выбрать удобный формат отображения содержимого ответа.

Из условия мы помним, что для отображения заглушки значение в поле startFlow должны быть stub. Меняем «CD» на «stub» и жмем «execute».

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

В этой статье я преимущественно рассказал, как законнектить Charles и мобильный девайс, описал проблемы, которые наиболее часто возникают при настройке связки телефон + Charles и постарался на примере продемонстрировать базовый уровень того, как мы в СберМегаМаркете используем Charles при тестировании мобильного приложения.

Возможности Charles гораздо обширнее, чем может показаться на первый взгляд. При желании можно создать несколько файлов с заранее сохраненными ответами от api, настроить Map Local (подмен ответа с бэкенда на ответ, сохраненный в локальном файле) и тестить огромные части фронта без фактического взаимодействия с реальным бэкэндом. Без прохождения процессов по созданию необходимых тестовых данных и соответственно без ощутимых временных затрат. Однако, об этом я хочу поговорить в следующей статье.

• Блог компании СберМегаМаркет
• Тестирование веб-сервисов
• Тестирование мобильных приложений

Charles – настраиваем проксирование трафика с устройства

В первой статье мы ознакомимся с подробной настройкой Charles на ПК и устройствах, а в следующей – рассмотрим практически все возможности данного инструмента.

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

Сначала рассмотрим что это такое, а после – настроим этот необходимый для любого QA-инженера инструмент.

Что ты такое, Charles?

Charles — инструмент для мониторинга HTTP/HTTPS трафика.
Работает он как прокси-сервер между веб / мобильным приложением и сервером. Другими словами – анализатор трафика или сниффер.

“Сниффинг — процесс мониторинга и перехвата всех пакетов, проходящих через сеть, с помощью инструментов сниффинга (OWASP ZAP, Fiddler, Charles Proxy и свежий боец - Proxyman).

Из плюсов можно выделить:

• наблюдение за всем трафиком приложения (решается проблема клиентских логов, особенно для iOS приложений)
• модификация трафика (подмена ответа от сервера, воспроизведение “сложных” кейсов и прочее)
• позволит не подключать мобильное устройство к VPN, достаточно только VPN на ПК (актуально в условиях текущей работы, удаленной)

Как наглядно это выглядит:

Установка Charles

На установке мы можем надолго не останавливаться, так как тут все стандартно.

Charles доступен на всех популярных ОС: macOS, Windows, Linux

Данный инструмент – платный (50$ / шт.), в бесплатной версии ограничение – 30 дней и каждые полчаса – надоедливое окно с напоминанием о покупке лицензии.

Настройка Charles

С настройкой клиента Charles и устройств дела обстоят куда хуже, чем просто с установкой, но мы с этим справимся ��

Клиент Charles

После запуска мы проверяем данные адреса ПК:

• В Charles смотрим свой IP: “Help” – “Local IP Address”
• Проверям порт (по умолчанию – 8888): “Proxy” – “Proxy Settings” (“HTTP Proxy” – “Port”)

IP и порт где-нибудь фиксируем, чтобы ввести эти данные на наших устройствах, с которых мы будем транслировать трафик.

Android устройства

Проксируем трафик с Android:

• Настройки системы > Сеть и интернет > Wi-Fi > выбираем сеть, к которой подключен ПК > Клик на иконку шестеренки напротив данной сети > Изменить > Расширенные настройки > Прокси-сервер > Вручную:
  Имя хоста прокси-сервера: IP Вашего ПК, это то, что я попросил зафиксировать выше ��
  Порт прокси-сервера: порт Charles (8888 или какой у вас установлен)

Эмулятор ANDROID

На эмуляторе достаточно ввести IP и порт в настройках самого эмулятора:

• “Settings” – “Proxy” – выбрать “Manual proxy configuration” и заполнить “Host name”, “Port number”

На некоторых эмуляторах необходимо настраивать аналогично реальному устройству:

• Настройки системы > Сеть и интернет > Wi-Fi > выбираем сеть, к которой подключен ПК > Клик на иконку шестеренки напротив данной сети > Изменить > Расширенные настройки > Прокси-сервер > Вручную

iOS устройства

Проксируем трафик с iOS:

• Настройки системы > Wi-Fi > выбираем сеть, к которой подключен ПК > Клик на иконку инфо (i) > Настройка прокси > Вручную:
  Сервер: IP Вашего ПК (192.168.1.2)
  Порт: порт Charles (по умолчанию – 8888)

Chrome (macOS)

Направить трафик с Chrome в Charles можно следующим образом:

• Должен быть включен macOS Proxy (“Proxy” – “macOS Proxy”)
• В Настройках Chrome найти настройки прокси
• В настройках сети автоматически подставится нужный IP и порт с Charles

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

После установки и настройки, которую мы произвели выше – Вам необходимо поставить сертификаты на ПК и мобильное устройство:

Далее необходимо включить SSL Proxy для нужного нам хоста, это можно сделать следующим образом:

• на нужном нам запросе вызвать меню и нажать “Enable SSL Proxy”
• через меню “Proxy” – “SSL Proxy Settings”, где вручную Вам нужно будет ввести “Host” и “Port”

Теперь Вы сможете видеть трафик с устройства на Вашем ПК

В следующей статье рассмотрим практически все возможности данного сниффера.