Привет, меня зовут Даша, я работаю тестировщицей клиентского мобильного приложения в Ozon.

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

Например, у нас в Ozon команда разработчиков в основном пользуется Proxyman, а тестировщики (в том числе и я) — Charles.

Не так давно у нас в команде разработки мобильного приложения случился холивар на тему “Charles vs Proxyman”. Я попыталась выяснить, почему некоторые люди пользуются Proxyman, а другие — Charles. Из разговоров с коллегами мне было не до конца понятно, какой из снифферов лучше (и чем именно). Поэтому я решила попользоваться Proxyman и разобраться самостоятельно. Давайте вместе посмотрим, какой из инструментов — Charles или Proxyman — выйдет победителем в битве снифферов.

Готовим поле для битвы снифферов: ключевое о тулинге

Снифферы позволяют видеть, что приходит с бэка, изменять или перезаписывать этот ответ; то же самое можно сделать с запросами на бэк. Это даёт нам отличные возможности для тестирования клиент-сервисного взаимодействия (особенно если основная логика зашита на сервере). 

Например, сегодня с бэка приходит заголовок страницы, состоящий из одного слова, и всё выглядит красиво и соответствует макетам. Но завтра бэк решает написать в заголовке пару предложений вместо одного (условно) — и то, как это будет выглядеть, как раз и помогает узнать сниффер.

В своей работе я чаще всего использую следующие функции: Rewrite, Map Local, Breakpoints и Throttling.

Rewrite: 

• для замены URL — чтобы перенаправить трафик с тестовой среды на продакшен или наоборот (например, если фича готова только для тестовой среды); 

• для подмены статус-кода, который приходит с бэка, — чтобы посмотреть, корректно ли будет вести себя приложение при ошибке сервера; 

• для добавления или изменения заголовка в запросе — если фичу необходимо протестировать с определёнными хедерами.

Map Local — для полной замены ответа страницы с бэка на локальный файл. 

Этой фичей удобно пользоваться для тестирования различных состояний элементов: открываешь файл, на который был заменён ответ страницы, меняешь в нём значение, сохраняешь и обновляешь страницу на устройстве. Как шутят наши разработчики, если у тебя достаточно сохранённых ответов с разных страниц, то из них можно построить приложение.

Breakpoints — с помощью этой функции можно поставить точку останова на любой URL; когда устройство будет его запрашивать, запрос к серверу откроется в формате редактирования. 

Запрос можно будет изменить или прервать; то же самое произойдёт с ответом от сервера. По сути, Breakpoints может заменить Rewrite и Map Local, но всё же эта фича больше подходит для единоразового использования. Постоянно выискивать ту самую строчку, которую необходимо изменить, довольно затратно по времени, да и запрос за это время может отвалиться по тайм-ауту.

Throttling — отличная фича для подмены скорости интернета. Можно увидеть, как поведёт себя приложение на медленной скорости, как при этом будут загружаться картинки, видео или карта.

Давайте сравнивать Charles и Proxyman на примере этих функций.

Начинаем битву снифферов: установка и настройка

Для начала давайте разберёмся, как установить наши снифферы.

Charles: можно бесплатно скачать с официального сайта. 

После инсталляции приложения устанавливаем сертификат на железо: Help -> SSL Proxying -> Install Root Certificate. Сниффер готов к работе.

Proxyman: скачиваем бесплатно с официального сайта. 

Устанавливаем сертификат: Certificate -> Install Certificate on this Mac ->

Install and trust. Сниффер готов к работе.

Сравнение основных фич Charles и Proxyman

Начнём с простого. 

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

Charles:

1. Убедиться, что телефон и ноутбук подключены к одной сети.

2. На мобильном устройстве: Настройки Wi-Fi -> Настройка прокси -> Вручную -> Сервер: ввести IP из Charles (Help -> Local IP Address) -> Порт: по умолчанию вводится 8888.

   

3. Открыть браузер и перейти по ссылке chls.pro/ssl.

4. Для Android: после загрузки сертификата необходимо его открыть и задать имя; после этого устройство будет готово к работе со сниффером.

5. Для iOS: Настройки -> Основные -> Профили: установить только что скачанный сертификат.

6. Для iOS: Настройки -> Основные -> Об этом устройстве -> Доверие сертификатам: включить для сертификата из п. 3.

Всё, вы великолепны! Можете запускать приложение и работать с трафиком.

Proxyman: процесс подключения реального устройства такой же, как в случае с Charles. Отличаются только место, где можно узнать IP, и адрес для скачивания сертификата.

Чтобы узнать IP, переходим в Certificate -> Install Certificate on iOS (Android) -> Physical  Devices. Здесь можно найти IP-адрес, который необходимо вводить в настройках, а также адрес, по которому можно скачать сертификат и подробную инструкцию по его установке.

В этом раунде победителем для меня стал Proxyman. В нём есть подробное описание процесса установки сертификата на мобильное устройство. В случае с iOS многие забывают о том, что необходимо включить опцию «Доверие сертификатам», а подробная инструкция Proxyman позволяет избежать этой ошибки.

Подключение симулятора к снифферу 

Подключение симулятора происходит немного по-другому по сравнению с подключением реального устройства. Я пишу тут именно про симулятор, потому что подключение эмулятора ничем не отличается от подключения реального устройства. 

Charles:

1. Сделать ресет симулятора: Device -> Erase All Contents and Settings.

2. Help -> SSL Proxying -> Install Charles Root Certificate in iOS Simulators.

3. Сделать рестарт симулятора: Device -> Restart.

4. Убедиться, что вы слушаете трафик вашего компьютера: Proxy -> MacOS Proxy (должна стоять соответствующая галочка).

Proxyman:

1. Открыть Certificate -> Install Certificate on iOS -> Simulators. 

2. Поставить последовательно галочки в каждом пункте. 

Готово, вы великолепны!

В этом раунде тоже выигрывает Proxyman — это видно даже по количеству пунктов в списке. Несколько кликов — и всё готово, в отличие от замороченной настройки Charles.

Функции снифферов: Rewrite 

Charles:

1. Tools -> Rewrite -> поставить чекбокс Enable Rewrite.

2. Нажать на Add для создания правила для Rewrite. 

3. В окне Location с помощью кнопки Add можно добавить один или несколько URL, для которых будет работать это правило. 

4. В окне под Location с помощью кнопки Add можно задать правило, по которому будет работать Rewrite. 

Есть большой выбор типов Rewrite, которые можно задать в выпадающем меню Type. Например, можно добавить, изменить или удалить Header в Request, изменить Response Code или подменить URL запросов.

Например, вот так будет выглядеть правило для добавления Header в Request:

Proxyman:

1. Scripting -> Script List (⌥⌘I).

2. Нажать + в левом нижнем углу и задать правила, по которым будет работать скриптинг.

3. В поле Name внести название шаблона.

4. Указать URL, для которого будут работать эти правила.

Всё, после этого можно выбирать и заменять значения Request и Response.

Вот так будет выглядеть скрипт для добавления параметров Header и Query в Request:

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

Функции снифферов: Map Local

Следующая по порядку, но не менее важная функция — Map Local. С её помощью можно полностью подменить ResponseBody.

Charles:

1. Запустить приложение, чтобы трафик пошёл через Charles.

2. Щёлкнуть правой кнопкой по URL, ответ от которого необходимо изменить, и выбрать Map Local.

3. В окне Edit Mapping нажать на кнопку Choose и выбрать файл, содержимое которого должно отображаться в ответе.

Proxyman:

1. Tools -> Map Local.

2. Нажать + в левом нижнем углу и заполнить поля Name (название правила) и URL (адрес, для которого будет выполняться правило).

3. Нажать Select Local File и выбрать JSON-файл, которым будет подменяться ответ (запрос).

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

Функции снифферов: Breakpoints

Функция Breakpoints предназначена для изменения и прерывания запросов и ответов непосредственно в сниффере.

Charles:

1. Нажать на кнопку Enable Breakpoints на верхней панели.

2. Щёлкнуть правой кнопкой по URL, для которого необходимо использовать Breakpoints, и нажать на Breakpoints. 

Также можно задать правила Breakpoints в пункте меню Proxy -> Breakpoints Settings.

После перехода по указанному URL сработает Breakpoints — и запрос с ответом станут редактируемыми; по нажатию на кнопку Abort их можно будет прервать.

Proxyman: 

1. Щёлкнуть правой кнопкой по URL, для которого необходимо использовать Breakpoints, и нажать на Breakpoints.

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

При желании можно изменить URL, а также использовать Breakpoints для чего-то одного: только для запроса или только для ответа. 

В этом раунде силы снифферов равны.

Функции снифферов: Throttling

Последняя функция из основного незаменимого арсенала снифферов — Throttling.

Charles:

1. Proxy -> Throttle Settings.

2. Выбрать опцию Enable Throttling. Если поставить чекбокс Only for selected hosts, кнопка Add станет активной и по нажатию на неё можно будет добавить те URL, для которых сработает изменение скорости интернета.

3. Скорость интернета, которую будет симулировать Charles, можно выбрать из выпадающего списка или задать в соответствующих полях:

   

Proxyman: 

1. Tools -> Network Conditions.

2. Выбрать опцию Enable Network Conditions.

3. По нажатию на + откроется окно, в котором можно настроить правила симуляции скорости интернета.

   

   В этом раунде соперники равны.

Charles vs Proxyman: выбираем победителя

Мы рассмотрели только четыре функции снифферов — из списка незаменимых. Понятно, что в целом функций гораздо больше (надеюсь когда-нибудь собраться с силами и написать более подробный гайд по Proxyman). 

Как видно из итогов раундов, у каждого сниффера есть свои плюсы и минусы. Мне нравится Charles за удобный интерфейс и более понятную настройку правил (нажал две кнопочки — и готово!), а Proxyman — за более гибкую настройку правил и подключения симуляторов (наверное, именно этим объясняется любовь разработчиков). 

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