Charles тестирование web кратко

Обновлено: 05.07.2024

Charles - это платное программное обеспечение, которое можно бесплатно попробовать в течение 30 дней. После пробного периода неоплачиваемые пользователи могут продолжать использовать его, но каждое использование не может превышать 30 минут, и при запуске будет 10-секундная задержка. Таким образом, план оплаты по-прежнему очень дружественный для большинства пользователей, даже если вы не платите в течение длительного времени, вы можете использовать полную функцию программного обеспечения. Просто когда вам нужно будет долго выполнять отладку пакетов, это повлияет на то, что Чарльз вынужден закрыться.

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

Основные функции Чарльза включают в себя:

Официальный адрес загрузки сайта

Другие адреса загрузки

2.1 Установите Чарльза в качестве системного прокси

Как упоминалось ранее, Чарльз завершает перехват пакетов, устанавливая себя в качестве прокси-сервера, поэтому первым шагом в использовании Чарльза является его установка в качестве прокси-сервера системы.

После запуска Charles в первый раз Charles попросит вас установить для нее разрешения для прокси-сервера системы. Вы можете ввести логин-пароль, чтобы предоставить Чарльзу это разрешение. Вы также можете проигнорировать запрос, а затем, когда вам нужно будет установить Charles в качестве системного прокси, выберите Proxy => Mac OS X Proxy в меню, чтобы установить Charles в качестве системного прокси. После этого вы можете видеть непрерывную сеть запросов, появляющихся в интерфейсе Чарльза.

993906-20180309012826001-2063096794.jpg

Следует отметить, что браузеры Chrome и Firefox по умолчанию не используют системные настройки прокси-сервера, и Чарльз завершает перехват пакетов, устанавливая себя в качестве прокси-сервера, поэтому сети браузера Chrome и Firefox не могут быть перехвачены по умолчанию. Содержание общения. Если вам необходимо его перехватить, настройте его на использование параметров прокси-сервера системы в Chrome или непосредственно установите прокси-сервер 127.0.0.1:8888 для достижения того же эффекта.

993906-20180309012843703-1642901217.jpg

993906-20180309012907969-1204434697.jpg

2.2 Введение в основной интерфейс Чарльза

    Представление Структура классифицирует сетевые запросы по имени посещенного домена.

993906-20180309012928245-998491857.jpg

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

Для конкретного сетевого запроса вы можете просмотреть его подробный контент запроса и контент ответа. Если содержание запроса является формой POST, Чарльз автоматически отобразит форму для вас. Если содержимое ответа в формате JSON, Чарльз может автоматически отформатировать содержимое JSON для просмотра. Если ответ представляет собой изображение, Чарльз может отобразить предварительный просмотр изображения.

2.3 Фильтрация сетевых запросов

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

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

2) Способ 2. Выберите Proxy => Настройки записи в строке меню Чарльза, затем выберите Включить столбец, выберите добавление элемента, а затем введите протокол, адрес хоста и номер порта для мониторинга. Таким образом, только пакеты целевого веб-сайта могут быть перехвачены.

993906-20180309012941025-455904405.jpg

3) Способ 3. Щелкните правой кнопкой мыши сетевой запрос, который вы хотите отфильтровать, выберите Фокус, а затем выберите Фокус в столбце Фильтр.

993906-20180309012950093-1112983254.jpg

  • Этот метод может временно и быстро отфильтровать некоторые типы сетевых запросов, которые не передают ключевое слово.

2.4 Перехват сетевых пакетов на iPhone

Чарльз обычно используется для перехвата пакетов локальной сети, но когда нам это нужно, мы также можем использовать его для перехвата сетевых запросов на других устройствах. Далее в качестве примера используется iPhone для объяснения того, как выполнять соответствующие операции.

1) Настройки на Чарльзе

993906-20180309013004252-370242282.jpg

2) Настройки на iPhone

Прежде всего, нам нужно получить IP-адрес компьютера, на котором работает Charles. Справка => Локальный IP-адрес в верхнем меню Charles, вы можете увидеть IP-адрес во всплывающем диалоговом окне.

993906-20180309013014504-435600676.jpg

993906-20180309013024712-1882204589.jpg

993906-20180309013035861-909296404.jpg

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

Сначала нам нужно установить сертификат на компьютер Mac. Нажмите верхнее меню Charles, выберите Help => SSL Proxying => Install Charles Root Certificate, а затем введите пароль системной учетной записи, вы можете увидеть добавленный сертификат в KeyChain.

993906-20180309013046692-955383305.jpg

993906-20180309013057254-641532558.jpg

993906-20180309013111229-249929774.jpg

2.6 Моделирование медленной сети

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

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

2.7 Изменить содержание сетевого запроса

993906-20180309013133356-1829384748.jpg

993906-20180309013144915-1016310946.jpg

2.8 Стресс-тест на сервере

Мы можем использовать функцию Чарльза Repeat для простого тестирования возможностей одновременной обработки на сервере следующим образом.

993906-20180309013202157-2078762629.jpg

Затем мы можем выбрать количество одновременных потоков и количество подавлений во всплывающем диалоговом окне.После подтверждения мы можем начать подавление.

993906-20180309013211895-2091929294.jpg

Спокойно, некоторые слабо написанные сайты голосования также могут использовать этот метод для быстрого голосования. Конечно, вы также можете использовать функцию Чарльза Repeat для подачи спам-данных на некоторые мошеннические фишинговые сайты.

2.9 Изменить содержимое, возвращаемое сервером

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

В соответствии с особыми требованиями, Чарльз предоставляет функцию Map, функцию Rewrite и функцию Breakpoints, которая может достичь цели изменения содержимого, возвращаемого сервером. Функциональные различия между этими тремя:

  • Функция Map подходит для долгосрочного перенаправления некоторых запросов на другой сетевой адрес или локальный файл.
  • Функция Rewrite подходит для регулярной замены сетевых запросов.
  • Функция Breakpoints подходит для некоторых временных модификаций.

1) Функция карты

Функция Чарльза Map делится на два типа: Map Remote и Map Local. Как видно из названия, Map Remote перенаправляет указанный сетевой запрос на другой адрес URL-запроса, а Map Local перенаправляет указанный сетевой запрос в локальный файл.

В меню Charles выберите Tools => Map Remote или Map Local, чтобы перейти на страницу настройки соответствующей функции.

993906-20180309013241705-2142707324.jpg

993906-20180309013247022-890029945.jpg

993906-20180309013252283-109966932.jpg

На следующем рисунке приведен пример сопоставления указанного сетевого запроса с локальным измененным файлом с помощью функции Map Local.

993906-20180309013258746-1276122629.jpg

2) переписать функцию

Функция перезаписи подходит для некоторой регулярной замены определенного типа сетевого запроса для достижения цели изменения результата.

993906-20180309013326951-1237682069.jpg

Мы хотим попытаться напрямую изменить возвращаемое значение в сети и заменить tangqiaoboy на iosboy. Таким образом, мы включаем функцию Rewrite, а затем устанавливаем следующие правила.

993906-20180309013331772-229365043.jpg

После завершения настроек мы можем видеть из Чарльза, что псевдоним, полученный API позже, автоматически переписывается в iosboy.

993906-20180309013336624-1294234444.jpg

3) Функция точек останова

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

Функция Breakpoints похожа на точки останова, которые мы устанавливаем в Xcode. Когда происходит указанный сетевой запрос, Чарльз перехватывает запрос. В это время мы можем временно изменить возвращенное содержимое сетевого запроса в Charles.

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

993906-20180309013343293-2129099401.jpg

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

Документацию можно почитать на официальном сайте , а в данной заметке я покажу основные кейсы его использования.

Установка и предварительная настройка

Установка и запуск

Скачайте и установите Charles .

При первом запуске Charles скорее всего попросит разрешения внести изменения в сетевые настройки вашего компьютера, согласитесь.

Настройка прокси

Далее перейдите в Proxy – Access Control Setting, нажмите кнопку Add и добавьте IP-адрес 0.0.0.0/0.

Charles Access Control Setting

Charles Location

Установите сертификаты на компьютер: Help – SSL Proxying – Install Charles Root Certificate.

Сharles Certificates

Укажите порт: Proxy – Proxy Settings – вкладка Proxies – Port: 8888.

Charles Port

Проксирование трафика веб-браузера

Если не хотите видеть запросы с ПК, перейдите на вкладку MacOS (Windows) и снимите чекбоксы. Но если целью является изучение трафика из браузера, наоборот, удостоверьтесь, что чекбоксы установлены.

Charles Proxy Settings

Когда закончите с настройками прокси, перезапустите Charles.

Настройка прокси на устройстве

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

Компьютер с Charles и устройство должны находиться в одной сети.

На устройстве, в настройках сети или Wi-Fi, укажите прокси-сервер: IP-адрес компьютера с запущенным Charles и порт 8888, или другой, который был указан при настройке прокси.

Быстро узнать IP-адрес компьютера с запущенным Charles можно через пункт меню Help – Local IP Address.

IP address Charles

Для iPhone откройте Настройки (Settings), перейдите в настройки Wi-Fi, выберите активную Wi-Fi сеть, пролистайте экран вниз и выберите пункт Настройка прокси (Configure Proxy). Метод определения выберите Вручную (Manual) и укажите IP-адрес и порт.

Proxy iPhone

Далее нужно установить сертификат прокси-сервера.

Установите скачанный сертификат Charles. Процесс установки зависит от используемого устройства и может различаться.

Например, чтобы установить сертификат на iPhone откройте Настройки (Settings), перейдите в Основные (General), пролистайте вниз и выберите пункт Профили и управление устройством (Profiles & Device Management). В открывшемся меню найдите загруженный профиль сертификата, откройте его, а затем установите.

Profiles iPhone

Дополнительно может потребоваться установить доверие сертификату. Откройте Настройки (Settings) – Основные – Об этом устройстве (About), пролистайте вниз до конца, выберите пункт Доверие сертификатов (Certificate Trust Settings). В открывшемся окне отметьте переключателем сертификат, которому хотите дать доверие.

Certificate Trust Settings

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

Подробнее про установку сертификатов можно прочитать в документации Charles.

Теперь можно проксировать и изучать трафик.

Как смотреть трафик

Запустите Charles. На устройстве или в браузере откройте интересующий сайт или приложение. При выполнении действий на клиенте, запросы с него и ответы от сервера будут логироваться в Charles.

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

Structure View

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

Charles Sequence View

Чтобы исключить из отображения ненужные хосты, удобно пользоваться фильтром (поле под списком хостов).

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

Charles Focus

Не забывайте пользоваться Поиском (Edit – Find или Cmd+F). Он поможет быстро найти интересующий параметр или подстроку среди перехваченных запросов.

Charles Find

На что стоит обращать внимание:

  • запрос уходит на верный URL;
  • допустимое время между действием, отправкой запроса и получением ответа;
  • метод, код ответа, тело, параметры cоответствуют ожидаемым, значения не пустые;
  • формат данных;
  • запрос не дублируется;
  • данные отобразились на клиенте.

Как менять запросы и ответы

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

В этом случае можно использовать инструмент Rewrite (Tools – Rewrite – галочка Enable Rewrite.

Добавьте новое правило, введите хост (или оставьте пустым, тогда правило будет действовать для всех хостов), затем заполните Rewrite Rule, где укажите что на что необходимо заменить.

В примере ниже, значение поля bonus в теле ответа будет заменено со 100 на 5000.

Еще задача: допустим есть лента с контентом (видео, реклама, музыка) и при тестировании нужно быстро изменить его источник без вмешательства разработчика.

Rewrite Charles

В разделе Match можно использовать регулярные выражения.

Аналогичным способом через Rewrite можно изменять, добавлять, удалять заголовки, менять коды ответа сервера, хосты и url.

Как вручную отредактировать запрос

Задача: перехватить запрос (ответ) и перед отправкой (приемом) его отредактировать. Отличие от предыдущей задачи заключается в том, что в ней данные менялись на лету по заранее заданному шаблону, здесь же редактирование осуществляется вручную.

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

Charles Compose

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

Charles Execute

Инструмент Repeat в контекстном меню запроса отправит его на сервер еще раз.

Repeat Advanced – похож на Repeat, однако позволяет указать количество отправляемых запросов и задержку между ними. Данный функционал может быть полезен при проверке сервера на флуд.

С помощью инструмента Breakpoints (точки остановка) можно перехватывать и изменять не только запросы, но так же и ответы от сервера, прежде чем они попадут на клиент.

Для начала нужно включить возможность использования Breakpoints (Proxy – Breakpoint Settings – Enable Breakpoints).

Далее нужно указать URL запроса, который в случае выполнения должен быть перехвачен. Это можно сделать в том же окне Breakpoint Settings, либо повесить Breakpoint через контекстное меню, выбрав ранее выполненный запрос.

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

Charles Breakpoints

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

Как подменить хост в API

Задача: подменить продовый хост с API на тестовый. Это можно сделать двумя способами.

Первый, через инструмент Rewrite, подобно тому, как описано в предыдущем разделе.

Host Charles

Второй способ подменить API, заключается в использовании инструмента Map Remote (Tools – Map Remote).

Charles Map Remote

В зависимости от задачи можно подменить хост целиком, его часть или только параметры.

Как подменить код ответа сервера

Задача: проверить как поведет себя клиент при неожиданном коде ответа от сервера.

Как и в предыдущих двух примерах, тут подойдет инструмент Rewrite (Tools – Rewrite).

Charles Response Status

Как эмулировать недоступность сервера

Задача: проверить как поведет себя клиент при недоступности хоста.

Используя инструмент Block List (Tools – Block List), можно заблокировать доступ клиента к указанному хосту. На выбор разрыв соединения либо 403 код ответа.

Charles Block List

Инструмент Allow List (Tools – Allow List) наоборот блокирует все хосты кроме разрешенных.

Как замокать ручку или подменить файл

Задача: подменить ответ от сервера на заранее подготовленный, сохраненный локально, например, чтобы замокать ответ ручки или заменить скрипт.

Для этих целей можно использовать инструмент Map Local (Tools – Map Local).

Charles Mapping

В настройках укажите ручку или файл на сервере, а также локальный файл, который будет использован вместо них. Поддерживаются форматы HTML, CSS, JSON, XML и медиафайлы.

Как эмулировать проблемы в сети

Задача: посмотреть, как работает сервис в различных сетевых условиях.

Для этого предназначен инструмент Throttle (Proxy – Throttle Settings).

Charles Throttle

Здесь можно включить сетевые ограничения для определенных или всех хостов, а так же задать различные сетевые параметры.

  • Bandwidth – пропускная способность;
  • Utilisation – эффективность использования пропускной способности;
  • Latency – задержка в миллисекундах между клиентом и сервером;
  • MTU – максимальный объём данных за одну итерацию;
  • Reliability – вероятность, что соединение не удастся;
  • Stability – вероятность, что соединение будет нестабильным.

Так же можно использовать готовые предустановки из списка.

Как раздать VPN

Задача: дать доступ другому устройству в корпоративную сеть.

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

Другие полезные функции

Инструмент Block Cookies – предотвращает получение клиентом запросов на установку cookie с сервера.

Инструмент No Caching предотвращает кэширование через заголовки.

MacOS Proxy или Windows Proxy разрешает или запрещает проксирование трафика из браузера, установленного на том же компьютере, что и Charles.

Инструмент Port Forwarding (проброс портов) позволяет пересылать запросы с одного порта на другой.

DNS Spoofing – перенаправляет запрос с доменного имени на указанный IP-адрес.

Mirror – автоматически сохраняет в указанную папку все ответы, возвращаемые в Charles. Затем их можно использовать как моки.

Устранение проблем

Большая часть функций Charles не будет работать если не установлены или не корректно установлены сертификаты. Это самая распространенная проблема. Вторая проблема может быть в том, что для связи клиента и сервера используется SSL соединение, но оно выключено в Charles, соответсвенно он не может его расшифровать, тем более изменить запрос или ответ.

Убедитесь, что ответ в Charles отображается в незашифрованном виде, как на скриншоте ниже. Это значит базовые настройки выполнены верно, сертификаты установлены, SSL Proxying включен.

Not Encrypted

Если же в ответе нечитаемый текст, как на скриншоте ниже, часть инструментов Charles работать не будет.

Encrypted

В этом случае проверьте, что выполнили все рекомендации по настройке описанные в начале данной статьи.

В частности удостоверьтесь, что проксирование включено для SSL соединений. Галочка в Enable SSL Proxying в Proxy – SSL Proxying Settings должна быть установлена, указана локация.

Сертификаты Charles должны быть установлены в системе (Help – SSL Proxying – Install Charles Root Certificate).

Сертификаты Charles должны быть установлены на клиенте, если в качестве него выступает другое устройство.

Если клиентом является iPhone, убедитесь, что кроме того, что сертификат установлен, ему так же выдано доверие (это один из пунктов, который часто пропускают).

Дополнительную информацию про установку сертификатов можно получить в документации Charles.

Если клиентом является браузер, установленный на том же компьютере, где и Charles убедитесь, что разрешено проксирование с локального устройства (Proxy – MacOS Proxy или Windows Proxy).

Делитесь интересными кейсами использования Charles и я добавлю их в статью.

Полезные ссылки

На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.

Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.







Что пишут в блогах

Подписаться

Онлайн-тренинги

Конференции

Heisenbug 2022 Spring
Большая техническая конференция по тестированию
12-14 апреля 2022, онлайн

Что пишут в блогах (EN)

  • Aginext Conference 2022 Global
  • This content. " target="_blank" rel="nofollow">How far should you go in your investigation of a defect?
  • Is there such a thing as an Evil Tester? Poking holes is good.
  • 5 Software Testing Trends in 2022
  • Why Speak at conferences? write blogs? - To get your message out.
  • I’m independent!
  • How My Team Tests for Now
  • Lesson Learned - I'm not ready for that vs I could do but choose not.
  • Two Ways of Solo Programming
  • The Positive Negative Split Leads Us Astray

Разделы портала

Про инструменты

Автор статьи: Артем Холевко, Максилект.

Текст подготовлен по материалам внутреннего семинара Максилект.

Снифферы - это инструменты, позволяющие перехватывать, анализировать и модернизировать все запросы, которые через них проходят. Они полезны, когда из потока нужно извлечь какие-либо сведения или создать нужный ответ сервера. Так можно проводить модульное тестирование продукта, в котором есть и бэк, и фронт, и разные команды со своей версионностью.

В этой статье я расскажу об основных функциях снифферов, которые могут быть полезны QA. Попробую не вдаваться в теорию, а сфокусироваться на практике. Наиболее популярными представителями анализаторов трафика сейчас являются WhireShark, Fiddler и Charles Proxy. Об удобстве интерфейсов и функционале каждого из них можно рассуждать долго, учитывая все плюсы и минусы. Но здесь я отдал предпочтение Charles, поскольку сам им активно пользуюсь. Буду рассказывать на его примере.


Что собой представляет Charles Proxy

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

Первичная настройка

При тестировании мобильного приложения

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

Как правило, соединение настраивается по Wi-Fi. В настройках Wi-Fi мобильного устройства в качестве proxy-сервера надо указать IP-адрес компьютера и стандартный порт инструмента 8888 (пароль остается пустым).

IP-адрес компьютера можно узнать через командную строку (ipconfig) или в самом Charles Proxy (Help -> Local IP Address).


Этот же адрес есть в инструкции по подключению, доступной в Help -> SSL Proxying -> Install Charles Root Certificate on mobile device remote browser.


В Android установленные сертификаты верифицируются в Settings -> Trusted Credentials на вкладке User.

Главное отличие в настройках для этой ОС в том, что с Android 6.0 и выше в Androidmanifest надо добавить специальную конфигурацию, позволяющую просматривать защищенный трафик. На продакшене эта конфигурация убирается из соображений безопасности.

При тестировании приложения на ПК

В этом случае дополнительные сертификаты нужно установить на сам ПК. Для скачивания и установки нужна ссылка из Help -> SSL Proxying -> Install Charles Root Certificate.


Сертификат устанавливается в доверенные корневые центры.

Два слова об интерфейсе


Интерфейс Charles Proxy прост. Слева - список перехваченных запросов, справа - детали.

В списке запросов есть две основные вкладки - Structure и Sequence.

В первом случае запросы рассортированы по хостам-папкам. Наведя на любой из них, можно получить всю информацию о количестве запросов к этому корневому хосту, доле удачных, таймингах, размерах и т.п. Фактически, здесь представлена вся та же информация, которую можно получить из панели разработчика в браузере. Выбрав конкретный URL, можно увидеть код ответа, версии протоколов, контент и т.п. Тело запроса, заголовки, cookie (если есть) можно посмотреть в разных форматах - даже в HEX.

С помощью контекстного меню запроса можно настраивать блокировки, повторять и изменять запросы. На этом мы еще остановимся.

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

Если запросов на экране слишком много, с помощью панели инструментов их можно очистить или вообще остановить перехват. Там же есть возможность включить и выключить троттлинг (подробнее об этих функциях расскажу позже). Базовая настройка каждой из функций осуществляется через меню, а кнопки панели управления выступают своего рода тумблерами On / Off.

Фильтрация

В Charles Proxy очень много вариантов фильтрации запросов.

Начнем с вкладки Structure. Самое примитивное - скопировать хост и вставить в поле Filter. Так мы увидим только запросы с этого хоста. Примерно того же результата можно добиться, если в контекстном меню хоста выбрать Focus. Остальные запросы будут собраны в Other Hosts. Если при этом перейти на закладку Sequence и отметить настройку Focused, то в списке окажется информация только о тех запросах, которые были выбраны на вкладке Structure.

На вкладке Sequence есть аналогичный фильтр.

Charles Proxy умеет работать с регулярными выражениями. Для этого на вкладке Sequence выбираем Settings и отмечаем пункт Filter uses regex. И вписываем в поле поиска элементарную регулярку.

Например, вот так

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

Там же можно включить Autoscroll списка запросов или указать максимальное количество строк.

В Charles Proxy можно фильтровать не только отображение, но и запись запросов. Для этого надо зайти в Proxy -> Record settings и задать условия на одной из вкладок - Include или Exclude - так мы включаем или выключаем запись запросов данного хоста.

Похожего результата можно добиться, используя блок-листы. Включить хост в блок лист можно из контекстного меню (команда Block list) или через добавление в Tools -> Block list, где следует отметить Enable Block list.

Блокируемый запрос можно прервать двумя способами (подходящий надо выбрать в настройках):

вернуть ошибку 403.

От выбранного способа блокировки зависит, какой ответ мы получим.

Можно провести эксперимент. Включим наш тестовый стенд в Block list, выбрав простой сброс соединения. С помощью контекстного меню запроса повторим его (команда Repeat) и получим такой ответ:


Статус запроса - Failed, а в описании ошибки указано, что Connection dropped.

Просмотр SSL-трафика

Если ранее мы успешно установили SSL-сертификат, для просмотра зашифрованного трафика остается только включить SSL proxying для нужного хоста в самом Charles Proxy. Это можно сделать через контекстное меню конкретного хоста.


Чтобы не включать каждый хост, можно зайти в Proxy -> SSL Proxying settings и на первой вкладке SSL Proxying включить Enable SSL Proxying.

Аналогично настройке фильтров на вкладках Include и Exclude можно добавить или исключить конкретные хосты. Если списки на этих вкладках не заполнять, по умолчанию мы будем читать трафик со всех хостов.

Брейкпоинты

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

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


Чтобы проверить, как это работает можно использовать повтор запроса (Repeat из того же контекстного меню). Запрос перехватывается, его можно редактировать.

В принципе, изменить можно все - от header до авторизационного токена. Когда редактирование будет закончено, можно выбрать Execute и в Charles Proxy появится повторный запрос, который и отправится на сервер, а потом вернется с ответом. В этот момент можно будет посмотреть и отредактировать ответ, который получит приложение - появится поле Edit response.

Редактируя запрос, можно ввести заведомо некорректные данные и посмотреть, как ответит сервер. Также можно отредактировать ответ (внеся некорректные данные) и использовать его для тестирования фронта. Можно оставить корректные данные, но изменить код - посмотреть, как фронт воспринимает информацию, переданную через API.

Map remote

Еще одна популярная функция Charles Proxy - подмена ответа сервера. Так мы можем ответ одного хоста подменить на ответ другого. Настраивается это через Tools -> Map Remote.


Обратите внимание, в левом нижнем углу есть кнопки Import и Export. Они позволяют обмениваться настройками - переносить их с одного рабочего места на другое.

Например, мы можем подменить контура. Я буду посылать запрос на dev-контур, но ответ хочу получить с тестового стенда. Для этого создаем новый пункт в списке Map Remote Settings. Map From - куда изначально был запрос; Map to - откуда берем ответ.

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

Map Local

Главное отличие Map Local от предыдущей функции в том, что замена осуществляется не на ответ другого сервера, а на содержимое локального файла. Настройки выглядят точно также, но вместо второго сервера мы указываем локальный путь к файлу с ответом.

Rewrite

Функция Rewrite может быть полезна, если вам нужно переписать данные, которые отправляются в Charles Proxy. В отличие от простого редактирования Rewrite позволяет задать правила изменения и работать в автоматическом режиме. Можно изменять и добавлять заголовки, искать и заменять текст в теле запроса или ответа. Можно даже менять статус ответа.

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

Настроить это можно через Rewrite settings, доступные в контекстном меню. Единственный недостаток инструмента в том, что каждое правило замены прописывается отдельно.

Throttling

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

Настраивается функция через Proxy ->Throttling settings.


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

Repeat Advanced

Хотя полноценное нагрузочное тестирование лучше проводить в специальных инструментах, Charles Proxy имеет одну базовую настройку, которая помогает закрыть минимальные потребности. Функция Repeat Advanced (доступная через контекстное меню перехваченного запроса) позволяет нужное количество раз повторить тот же запрос. После настройки откроется отдельная сессия, где будут видны детали каждого из запросов.

Отмечу, что Charles Proxy платный. Можно использовать триальную версию. Но раз в 5-7 минут поверх него будет отображаться всплывающее окно с версией, а раз в 30 минут он будет выключаться, при этом сессии не сохраняются. Решайте сами, помешает ли это вашей работе.

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

Если ваш интернет ограничен пакетом в несколько гигабайт, то поневоле приходится следить за объёмом переданной и полученной информации – так называемым трафиком. В этом помогает программа Charles: сейчас мы разберём, как ею пользоваться.

Charles Web Debugging Proxy

Что собой представляет программа Charles

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

Программа Charles Proxy для Windows

Пока вы работаете в интернете, плагин собирает информацию с серверов и сортирует их по папкам с названиями посещенных сайтов. Вы увидите объём данных, исходящих в сеть и выходящих из неё. Приложение справляется со своей задачей достаточно хорошо, чтобы обратить на себя внимание не только рядовых пользователей, но и профессионалов.

Установка и настройка программы

Установка программы Charles

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

Лицензионное соглашение Charles Proxy

Также для браузера Mozilla скачайте и установите Java самой свежей версии – это позволяет программе работать корректно. Иногда нужный файл кладут в общий архив – кликните по нему и запустите. Обратите внимание, что Java не поддерживается браузерами на основе Chromium: Google Chrome, Яндекс. Браузер и прочими.

Выбор места установки Charles Proxy

После установки программы найдите в пакете инсталляции файл с расширением .xpi. Откройте Firefox и просто перетащите элемент в окно браузера.

Инсталляция Charles Proxy

Переходим к настройкам:

Настройки прокси-сервера в Charles

Как пользоваться Charles: основные аспекты

Вы настроили Charles, как пользоваться им, сразу понятно из меню программы:

  1. Чтобы данные не просто отслеживались, но и записывались, нажмите вверху плашку Start / Stop Recording – она крупная, вы её точно не пропустите. Это делается на случай возникновения каких-либо проблем с подключением к определённому сайту. Имея подробный отчёт о процессе соединения, вы сможете обратиться к системному администратору, и он быстро обнаружит причину ошибки.
  2. Если какой-то сайт кажется вам подозрительным и вы хотите вначале понять, какие данные он отправляет/получает, а затем уже допускать или не допускать их перемещение, то можно сделать так, чтобы по запросу в браузере информация передавалась сразу в Charles. Для этого выделите папку с его названием ресурса, кликните по ней ПКМ и нажмите Breakpoints — Enable/Disable Breakpoints.
  3. Управлять содержимым папок со сведениями можно через клик дополнительной кнопкой манипулятора и команду Edit. После внесения коррективов в заголовки и прочие элементы, нажмите Execute, чтобы подтвердить новую форму обращения. На нее вы будете получать ответы от сервера – их можно просматривать и сохранять себе. Это ещё один плюс на случай неполадок, столкновения с мошенническими и фишинговыми ресурсами и т. п.

Теперь вы разобрались, как работать с программой Charles. Даже если вы не понимаете, как использовать данные, то хранить их полезно, чтобы своевременно получить помощь от провайдера или системного администратора.

Проблемы с использованием Charles

Иногда при посещении некоторых сайтов сведения о них не отображаются в списках Charles. Попробуйте сделать следующее:

  1. Откройте раздел Proxy/Recording Settings и Black List.
  2. Удалите из последнего нужный сайт, и его данные появятся в общем перечне.

Исключение из чёрного списка

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

Читайте также: