Ты молод(а) и горяч(а), возможно, уже больше n-недель в КУАшинге, строчишь описание для 187ого бага за день под 5ую кружку кофе. Но знаешь ли ты, как много еще скрыто от твоих глаз по ту сторону клиента?!
Давай разберемся, как
🚀 удобно проверить клиент-серверные связи
🚀 сэмулировать нужные ошибки
🚀 посмотреть валидацию на клиенте/сервере
🚀 превентивно найти вероятные UI дефекты
🚀 проверить клиент, когда еще не готов сервер
🚀 и получить полное представление о работе нашего приложения
Proxy tools
Для того чтобы посмотреть, что отправляет клиент и что приходит от сервера, нам нужно проксифицировать наше приложение. Для этого можно использовать специальные прокси тулы, например, Charles, Fiddler, BurpSuite, OWASP ZAP, и др.
Общие настройки и базовая функциональность у всех этих приложений похожи, отличаются они дополнительными плюшками, например, в BurpSuite и Owasp ZAP есть отдельные фичи для проверки безопасности. Но все что нас интересует, это возможность просматривать и изменять запросы и ответы. Благо в данных приложениях базовую часть можно использовать бесплатно. В некоторых есть платные версии, но и без оплаты ограничения не такие критичные - бесплатный Charles нужно будет всего-то перезапускать каждые полчаса :). Но если вы работаете в серьезной компании, то проблем с корпоративной подпиской не должно быть.
Для подключения прокси к веб в Charles нужно установить сертификат прокси тулы, разрешить SSL проксифицирование и кликнуть опцию MacOS / Windows Proxy в настройках. Для мобильных устройств нужна еще щепотка магии с сертификатом для мобилки и WiFi подключением. Подробно с картинками про всю настройку для Charles можно почитать тут, или же посмотреть на youtube про настройку и использование.
//это не реклама авторов или каналов, я просто добавляю валидные материалы, которые привлекли мое внимание. Данные примеры показывают, что информации по теме много, и ее легко найти.//
В случае если возникли проблемы с подключение мобильного девайса к прокси или активация SSL проксифицирования не применяется, держите шпаргалку траблшутинга:
🛠 Идем в настройки девайса (iOS) → General → Profiles
(Android) *Security settings → Remove all security certificates *(точный путь зависит от версии оси и вендора)
🛠 Удаляем все ранее установленные Charles profiles
🛠 Скачиванием и устанавливаем новый свеженький сертификат
🛠 Идем в настройки девайса (iOS) → General → About → Certificate Trust Settings )
(Android) *Security settings → View security certificates *(точный путь зависит от версии оси и вендора)
🛠Убеждаемся, что новый сертификат установлен и включен
🛠 (опционально) можно попробовать поменять порт в Charles, например вместо 8888 на 8889, и не забываем прописать новый порт и в прокси настройках WiFi для девайса
🛠Перезагружаем девайс
🛠 Перезапускаем Charles
⚠Disclaimer⚠ Помним, что не все мобильные приложения могут быть проксифицированы, например, на прод аппликах это может быть запрещено в целях безопасности. Для тестовых билдов эта возможность так же может быть отключена, поэтому не стесняйтесь уточнять данные моменты у команды разработки.
Итак, мы все настроили, теперь при использовании приложения в прокси туле бегут новые и новые строчки, что мы со всем этим можем делать, кроме непосредственного изучения и отслеживания, что все работает как надо.
🛑 Используем Breakpoint, чтобы получить власть над нашими запросами (МУХАХАХА). Итак, выбираем жертвенный запрос - правой кнопкой мышки обрекаем его на остановку после каждого шага (те включаем для него breakpoint) и действуем. При повторении действия на клиенте наш запрос становится на паузу - мы видим, что клиент собирается отправить на сервер (на клиенте в этот момент скорее всего будет состояние загрузки). Тут мы можем поменять значения в Header запроса и/или в Body, если оно имеется:
-можем ввести невалидные значения и проверить валидацию на сервере (например, текстовое поле вдруг отошлет числовое значение);
-можем сделать Abort или Cancel запроса и проверить как реагирует клиент (будет ли авторетрай, если да, то какой лимит по количеству ретраев; какую ошибку покажет клиент или он зависнет на бесконечной загрузке);
Если в запросе от клиента не планируем ничего менять, то просто сразу жмякаем Execute и получаем ответ от сервера на паузе, который еще не успел долететь до нашего клиента. Какие пакости можем натворить на этом шаге:
-опять же можем поменять любые части Header или Body на невалидные или просто нужные нам;
-можем заменить код ответа, чтобы проверить, что отрисует клиент на 500 ошибку;
- добавить кусочек Json, который уже должен уметь парсить клиент, но в реальности сервер пока еще не шлет нужные параметры;
- подставлять в Body нужные значения для параметров (например, сделать заголовок или название кнопки длиньше и посмотреть, перенесет ли клиент на другую строку, обрежет или уведет строку за горизонт экрана ♾);
- как поведет себя клиент, если ответа от сервера долго не будет (просто не отпускаем запрос - те не прожимаем Execute);
//чтобы проверить не потеряли ли мы точку с запятой или не поставили ли лишнюю скобочку в нашей Jsonке, советую использовать подобные валидационные сайты//
Дополнительные фишки
📝 Rewrite - выбираем запрос и какое значение мы хотим, чтобы Charles автоматически подменял.
🧙♀️Map Local - для подмены ответа от сервера целиком. Для этого нам нужна ранее сохраненная сессия или определенный запрос Charles на компьютере, и мы в настройках этой фишки прописываем локальный путь на нужный запрос. Таким образом Чарлиз вместо реального ответа от сервера будет использовать ваш локальный.
//Маленький личный трюк, если мне нужен ответ от сервера определенного вида на первый запуск приложения, то я сначала делаю breakpoint на этот запрос - подменяю все, что необходимо. Правой кнопкой мыши по последнему подхаченому мной запросу - сохраняем его на комп; Дальше не забываем выключить breakpoint, бежим в Map Local и выбираем там нашу сохраненочку для запроса. Перезапускаем приложение - у вас перезаписанный нужный ответ от сервера на первый запуск без регистрации и смс. //
🔄 Map Remote - можем переадресовать наш запрос с одного урла на другой.
🐢 Для проверки плохого интернет соединения, задержек и потерь используем Throttling, настраиваем его как душе угодно, и отправляем черепашку в путь.
📸 Для удобства можно жмякнуть Focus для нужных нам URLок, чтобы видеть их сразу вверху списка, остальные схлопнутся внизу и не будут мешать.
🚫 Если хотите, чтобы для каких-то адресов соединение разрывалось сразу же, то щелкаем для них Black list (в настройках данной фичи можно выбрать вариант просто дроп соединия или с 403 ошибкой).
Также у Charles на сайте есть описание и других полезных плюшек, но для владеющих английским на достаточном уровне. На первое же время для базовых проверок клиент-серверных взаимодействий с лихвой будет достаточно того, что мы охватили выше.
Удачи, и да заколосятся все ваши настройки и соединения!🌾🌾🌾