Charles называют самым популярным сниффером, инструментом для мониторинга трафика и подмены данных. Он работает как промежуточное звено между вебом или мобильным приложением (в нашем случае) и сервером. Этот инструмент хорошо знают тестировщики, но разработчикам тоже полезно знать и пользоваться его возможностями. В этой статье мы сосредоточимся на основных функциях Charles для мобильных приложений.
Sic! Это продолжение статьи про Charles — начало касается настройки приложения и его интерфейса.
Для начала кратко приведем примеры кейсов разработчиками:
- Бэк еще не реализовал фичу, которую уже реализовали мы
- Бэк присылает не те данные
- Добавить или убрать элемент интерфейса, когда через код это делать дольше
- Получить данные, которые не заведены (например, данные о пользователе)
- Упрощает поиск причин багов
- Проверка фич после реализации
И, не откладывая в долгий ящик, перейдем к функциям Charles.
Throttling соединения в Charles
Одна из функций Charles — троттлинг соединения, который позволяет симулировать различное поведение Сети. Инструмент позволит узнать, как приложение будет работать, например, в ситуации нестабильного интернет-соединения или его внезапного отсутствия.
Включить функцию троттлинга можно в меню Proxy, выбрав там пункт «Throttle Settings».
Давайте посмотрим на все настройки функции.
Enable Throttling — это чекбокс включения/отключения троттлинга по приложению. Можно поставить чекбокс на Only for selected hosts — это позволит проводить троттлинг только для заданных url. Их можно добавить или удалить ниже (Add и Remove).
Далее в меню вы видите набор предустановленных настроек соединений (Throttle preset).
Bandwidth — это скорость соединения,
Utilisation — процент пропускной способности, которую можно предоставить пользователю в любой момент времени.
Round-trip latency — здесь устанавливается задержка между клиентом и сервером.
MTU — максимальный размер пакета.
Reliability, измеряемая в процентах, устанавливает вероятность, что соединение не удастся. Именно эта кнопка нужна для имитации ненадежных сетевых условий. Кнопка Stability задает вероятность нестабильного соединения и снижения качества. Это полезно для моделирования сетей, в которых периодических падает качество связи — например, мобильных.
Throttling может работать даже при установленном в приложении SSL пиннинге — достаточно настроить его и убрать Enable SSL Proxying с запросов необходимого домена.
Подмена запросов/ответов в Charles
Одна из часто используемых функций Charles — подмена запросов/ответов. Часто это самый простой вариант проверки того, как будет отображаться в приложении та или иная фича. «Чарльз» умеет менять ответ от сервера.
Есть четыре основных инструмента для подмены запросов/ответов, которые предлагаются программой:
- Breakpoint – позволяет поставить на паузу запрос или ответ и редактировать их в режиме реального времени.
- Rewrite – универсальный инструмент подмены, который по заданному правилу ищет совпадения и заменяет на необходимые нам.
- Map Local – подменяет целиком ответ на локальный json.
- Map Remote – автоматическая переадресация пользователя с одного URL-адреса на другой.
Сравнение преимуществ и недостатков методов, которое заранее может помочь определиться, какой метод выбрать для работы с вашей задачей:
А теперь подробнее о каждом из инструментов.
Breakpoint
Преимущества этого инструмента, который, как мы помним, позволяет поставить на паузу и отредактировать запрос или ответ, в легкости его применения и возможности редактирования как запроса, так и ответа. Этот инструмент идеален для быстрого изменения статуса кода, изменений небольшого числа параметров в запросе/ответе, для единичных случаев подмены.
Однако есть и несколько недостатков: слишком короткое время на редактирование запроса, кроме того, редактировать его приходится каждый раз.
Как пользоваться Breakpoint
- Правым кликом на запрос добавляем его в список для Breakpoint
- Редактировать список добавленного в Breakpoint можно в Proxy → Breakpoint Settings
- В момент отправки запроса или получения ответа срабатывает Breakpoint, после чего в окне появляется соответствующая вкладка.
- Затем переходим в таб Edit Request. Здесь можно изменить Query запроса на Add/Remove.
Функционал кнопок внизу:
- Cancel — отменяет изменения, внесенные за время работы breakpoint, и пропускает запрос/ответ дальше в оригинальном виде.
- Abort — сбрасывает запрос/ответ и возвращает на клиент ошибку.
- Execute — применяет внесенные изменения и пропускает запрос/ответ дальше
Редактировать данные запроса (как и ответа) удобно в табах Headers или Json Text:
Запрос:
Для продолжения нажимаем на Execute. Теперь запрос прошел и открылось окно ответа. Переходим в таб Edit Response.
Ответ (Headers):
Ответ (Json text):
Для продолжения нажимаем на Execute.
В Breakpoint Settings можно поменять настройки, при которых будет срабатывать брейкпоинт – это актуально, если надо редактировать только ответ и постоянно пропускать запрос.
FAQ
Что делать, если я не вижу запрос/ответ?
- Проверьте подключение «Чарльза» по инструкции в нашей первой статье. Иногда такое возможно при настройках сервера. В таком случае для редактирования ответа лучше использовать Map Local.
Что делать, если я не успеваю редактировать, а новый запрос уже приходит в очередь?
- Просто воспользуйтесь другим способом подмены. Например, Rewrite.
Rewrite в Charles
Этот тип подмены по заданному правилу ищет совпадения и заменяет на необходимые нам. В отличие от Breakpoint, здесь как раз довольно сложная настройка, а также есть необходимость настраивать подмену предварительно.
Однако важнее преимущества Rewrite, которые заключаются в его универсальности:
- Подмена здесь происходит автоматически,
- в наличии гибкий инструмент в параметрах подмены,
- есть возможность менять и запрос, и ответ.
Этот инструмент идеально подходит для подмены хоста, подмены определенных параметров на конкретные значения, подмен/изменений в query запроса.
Как пользоваться Rewrite
- Переходим в меню Tools → Rewrite → Rewrite Settings
- С помощью кнопки Add добавляем новую вкладку подмен. Затем в Location при необходимости добавляем путь подмены.
- Достаточно вставить скопированную заранее ссылку в Host, и она автоматически распарсится
- Можно оставить * в Host для подмены на всех путях
- Точно так же можно поступить с полем Location, это будет равносильно * или применению ко всем путям.
- Затем во втором блоке мы настраиваем подмену Rewrite Rule
- Выбираем Type подмены
- Выбираем, на что распространяется подмена Request/Response. Request включает или выключает правило подмены на запрос, Response — на ответ.
- Заполняем поля Match поиска
- После заполняем поля Replace замены
Настройки Rewrite
Важнее всего обратить внимание на Enable Rewrite — это главный чекбокс включения/отключения работы Rewrite подмен в приложении.
Debug in Error Log позволяет отслеживать работу правил подмены в дебаг меню.
Посмотрим также на список подмен.
- Чекбокс — включает/отключает конкретный пункт подмены
- Add — добавляет новый пункт в список
- Remove — удаляет пункт из списка
- Import/Export — добавляет/сохраняет настройки из/в файл
Location:
- Чекбокс — включает/отключает конкретный путь подмены
- Add — добавляет новый путь
- Remove — удаляет путь
Под Location список Rewrite Rule в кратком варианте отображает Type и Action правила подмены.
- Чекбокс — включает/отключает конкретное правило подмены
- Add — добавляет новое правило
- Remove — удаляет правило
- Up/Down — позволяет передвигать правила выше/ниже (чем правило выше, тем больше у него приоритет)
Теперь перейдем непосредственно к Rewrite Rule и рассмотрим типы правил подмены.
Примеры правил подмены
1. Add / Modify / Remove Header — применяет изменения к Headers запроса/ответа. Алгоритм работы с ними во всех случаях начинается с выбора чекбоксом предмета замены (запрос или ответ). Далее, в зависимости от функции:
Add (добавляет хедер):
- Достаточно заполнить второй блок Replace — ключ в Name, значение в Value
- Повторяем запрос
Modify (изменяет существующий хедер):
- Заполняем первый блок Match условием для поиска хедера под замену (”ключ”:”значение”, регулярные выражения)
- Заполняем второй блок Replace новым хедером (”ключ”:”значение”)
Remove (удаляет существующий хедер):
- Заполняем первый блок Match условием для поиска хедера для удаления (”ключ”:”значение”, регулярные выражения)
Пример из практики
Для определения геопозиции используется запрос, который уже редиректит на нужный ответ в зависимости от страны. Мы подменяем в хедере ответа ссылку на редирект.
Результат:
2. Host / Path / URL — позволяет изменить путь ссылки. Во всех этих функциях важно задизейблить чекбокс выбора запроса/ответа. Далее:
Host (подмена домена):
- в первом блоке — Match — заполните единственное доступное поле Value условием для поиска домена под замену,
- во втором блоке — Replace — заполняем поле Value новым доменом.
Path (подмена в пути ссылки):
- в блоке Match заполняем поле Value условием для поиска части пути под замену,
- в блоке Replace заполняем поле Value новым путем.
URL (подмена ссылки целиком).
- Здесь заполняем Value в блоке Match условием для поиска части ссылки под замену,
- в блоке Replace заполняем поле Value новой частью ссылки.
Пример из практики
Подмена тестового сервера с приходящего https://spb.test.dev.ru на необходимый в данный момент https://spb.web.test.ru
3. Add / Modify / Remove Query Param — применяет изменения к Query запроса/ответа. Во всех трех вариантах чекбокс выбора запроса/ответа задизейблен. В остальном есть небольшие различия:
- Add — добавление квери. Здесь достаточно заполнить второй блок Replace — ключ в Name, значение в Value — и повторить запрос.
- Modify — изменение существующего квери. Здесь первый блок Match заполняем условием для поиска квери под замену (”ключ”:”значение”, регулярные выражения), а второй блок Replace — новым квери (”ключ”:”значение”).
- Remove — Удаление существующего квери. Здесь просто заполняем первый блок Match условием для поиска квери для удаления (”ключ”:”значение”, регулярные выражения)
Пример из практики
Подмена тега в Спортс.ру, когда легким движением руки мы получаем на экране информации игрока не Роналду, а Месси.
Результат:
4. Response Status — позволяет изменить статус-код ответа.
В этой ситуации чекбокс выбора запроса/ответа задизейблен, подмена только на ответ. Заполняем первый блок Match в единственном доступном поле Value условием для поиска статус-кода под замену, в блоке Replace заполняем поле Value новым статус-кодом.
Пример из практики
Кейс, касающийся подмены статуса 200 на 500 для отображения ошибки сервера.
Результат:
5. Body — изменение тела запроса/ответа.
Здесь выбираем чекбоксом предмет замены (запрос/ответ), заполняем первый блок Match условием для поиска параметра под замену (”ключ”:”значение”, регулярные выражения), заполняем второй блок Replace новым параметром (”ключ”:”значение”).
Пример из практики
Меняем на «Кассир.ру» минимальную цену события с 2500 на 0.
До:
После:
Для правил подмены лучше брать структуру, которая находится во вкладке ответа Text. Это поможет не запутаться — нужны лишние пробелы в подмене или нет.
Пробелы чаще не нужны, их стоит убрать между парами “ключ”:”значение”. Но бывают и исключения. Копирование из Text поможет избежать подобных проблем.
FAQ
Что делать, если подмена не срабатывает?
- Проверьте правильность написания ключей и значений
- Проверьте подмену на случай лишних пробелов в “ключ”:”значение”. Попробуйте проверить себя через вкладку Text.
- Попробуйте разбить подмену на составляющие, иногда большие массивы не срабатывают
- Могут быть проблемы с кириллицей. Лучше использовать другие методы для подмены названий и имен с кириллицей.
Что делать, если срабатывает не та подмена?
- Отключите ту, что срабатывает
- Поставьте необходимую подмену выше в списке подмен
Что делать, если я подменяю конкретное значение, а Charles подменяет все совпадения даже внутри других значений?
- Включите чекбокс «Match whole value»
- Попробуйте использовать пару “ключ”:”значение”
- Используйте регулярные выражения
Map Local в Charles
Этот метод подменяет целиком ответ на локальный json. Он работает только с ответом, не касаясь запроса. Кроме того, здесь необходима предварительная настройка — получение рабочего json.
Однако есть важные преимущества:
- возможность одновременной работы с большим количеством изменений,
- возможность «нарисовать» выдачу, которой нет на сервере,
- изменения подтягиваются при новом запросе сразу после сохранения в json.
Этот метод идеально подойдет для работы с большим количеством изменений в структуре ответа и для моментов, когда сервер не отдает нужный ответ — бэкенд еще не готов.
Как пользоваться Map Local
- Заранее подготовьте json с полным ответом от сервера. Проще всего его взять из готового ответа и изменить под свои требования, либо воспользоваться сваггером/документацией для того, чтобы написать ответ самостоятельно.
- Отредактируйте данные json файла в текстовом редакторе и сохраните файл. Рекомендуем использовать для редактирования текстовый редактор с возможностью удобной работы с JSON — например, Sublime Text.
- Правым кликом по нужному запросу выбираем Map Local и попадаем в меню добавления/редактирования Edit Mapping.
- В блоке Map From уже будет заполнен запрос — и тут же его можно отредактировать.
- В блоке Map To кнопкой Choose выбираем путь до файла json, который подготовили ранее. Затем повторяем запрос с экрана или вручную. В запросе будет приходить новый сохраненный ответ из файла.
Если есть необходимость, редактируйте json — при этом повторно путь к файлу задавать не надо, он уже добавлен.
Настройки Map Local
Переходим в меню Tools → Map Local. Map Local Settings выглядит так:
Enable Map Local — чекбокс, который включает/отключает работу Map Local в приложении.
Список запросов с подменой содержит путь запроса и путь до файла json.
Чекбокс у подмены включает/отключает конкретно эту подмену в приложении.
Кнопки: Add — добавляет новый запрос для подмены, Remove — удаляет, а Up/Down — позволяет передвигать подмены выше/ниже, повышая или понижая их приоритет. Import/Export позволяют добавлять/сохранять настройки из файла или в файл.
Двойной клик по подмене из списка откроет меню добавления/редактирования Edit Mapping. Можно отредактировать Host или перевыбрать файл json для подмены.
FAQ
Что делать, если на экране приложения отображается ошибка/креш?
- Возможно, структура json нарушена или же какие-то поля опциональны. Проверьте правильность по сваггеру и попробуйте снова.
Что делать, если я вижу не ту подмену?
- Возможно, на этот запрос уже есть подмена и стоит ее удалить, или применить сортировку по приоритету (см Up/Down в Settings), подняв необходимую подмену в списке выше.
Map Remote в Charles
Мы подобрались к последнему методу подмены, который используется в Charles. Он нужен для автоматической переадресации пользователя с одного URL-адреса на другой. Это его главный недостаток и одновременно преимущество: Map Remote умеет только редиректить на новую ссылку, но это самый простой способ подменить путь ссылки, когда уже готов нужный ответ.
Как использовать метод
- Правым кликом по нужному запросу выбираем Map Remote и попадаем в меню добавления/редактирования Edit Mapping.
- Здесь в блоке Map From уже будет заполнен запрос, но его можно тут же отредактировать.
- В Map To добавляем путь, на который будет настроен дальнейший редирект. После чего повторяем запрос.
Настройки Map Remote
Переходим в меню Tools → Map Remote.
Здесь все так же, как в настройках предыдущего метода.
Enable Map Remote — это чекбокс, который включает/отключает работу Map Remote в приложении.
Список запросов с редиректом содержит путь запроса и новый путь, на который мы ссылаемся.
Чекбокс у редиректа включит/отключит конкретно этот редирект в приложении
Кнопки: Add добавит новый запрос для редиректа, Remove удалит его из списка, Up/Down передвинет редиректы выше/ниже, меняя их приоритет. Import/Export — добавит/сохранит настройки из или в файл.
Двойной клик по редиректу из списка откроет меню добавления/редактирования Edit Mapping. Здесь можно заменить Map From и Map To
FAQ
Что делать, если Map Remote настроен, редирект есть, но в приложении ошибка?
- Возможно, что в приложении есть дополнительная проверка на конечный итог запроса. В таком случае лучше использовать другой тип подмены.
Итог
Мы рассмотрели функциональность Charles Proxy с упором на правила подмены, которые могут понадобиться при работе с мобильными приложениями. Скорее всего, вы столкнетесь с такими задачами.
Не стоит останавливаться на одном методе, если вы его попробовали и начали для всего использовать. Каждый метод хорош по-своему и оптимально подходит под конкретные задачи. Знакомство с каждым из них позволит оптимизировать ваш рабочий процесс и сделать его более интересным и комфортным. Например, Breakpoint лучше справляется со статус-кодами, а Map Local — с большими json-структурами. Так что не поленитесь узнать все методы — это позволит ускорить лично вашу работу и оптимизировать время.