Артефакт разработки интерфейса Charles от входа до удаления

предисловие

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

1. Причудливый комплимент Чарльзу

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

Ладно, садись на мой любимый маленький мотоцикл и готовься отправиться в путь...

2. Загрузка и установка

Загрузка с официального сайтапортал

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

Инструмент Charles PoJie может отвечать на ключевые слова, следуя официальной учетной записи «Ху Гэ есть что сказать».charlesполучать.

3. Простое начало работы — фиксируйте все запросы

ОткрытьCharles, чек об оплатеProxyвнизmacOS Proxy(Если это Windows, то это Windows Proxy)
нажмитеProxy->Start Recording, откройте браузер, чтобы посетить любую страницу, вы можете перейти кCharlesсм запрос.

Очень хорошо, сейчас в пути, пробок по дороге на учебу никогда не будет...

В-четвертых, установите запрос фильтра

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

Временная конфигурация фильтра

на интерфейсе дисплеяFilterУсловная фильтрация доступна в

Также доступен справаsettingsКонфигурация в обычном использовании для фильтрации
Постоянная конфигурация фильтра

пройти черезProxy->Recording Settings->includeНастройте условия фильтрации в

Хорошо, мы сделали еще один большой шаг вперед

5. Прокси пересылает запрос

пройти черезCharlesизMap Remoteа такжеMap LocalМы также можем настроить прокси для пересылки запросов.

Map Remote

Map Remote — это удаленное сопоставление, которое перенаправляет указанный сетевой запрос на другой URL-адрес.

Деловая сцена:Некоторые запросы файлов на стороне сервера ограничивают определенные доменные имена (*.baidu.com), и когда мы используем локальный хост для запуска проекта, это приводит к отсутствию разрешения на доступ. по конфигурацииMap RemoteДистанционное картографирование решает проблему.

Путь конфигурации:настраиватьTools->Map Remote

Как показано в приведенной выше конфигурации, адрес локально запущенного проекта:http://localhost:8080(илиhttp://127.0.0.1:8080), теперь для доступа снова можно использовать путьhttp://test.baidu.comПросто посетите.

УведомлениеEnable Map RemoteЕго надо проверить, и соответствующие правила тоже надо проверить, иначе не вступит в силу

Map Local

Карта Локальное локальное сопоставление, которое относится к перенаправлению указанных сетевых запросов в локальные файлы.

Деловая сцена:При разработке локализации данные интерфейса имитируются; или при устранении неполадок онлайн-среды запрос перенаправляется в локальный файл для облегчения устранения неполадок.

Путь конфигурации:настраиватьTools->Map Local

Через конфигурацию, как показано выше, запроситеaa.baidu.com:443/index, он будет сопоставлен с локальным/xx/index.json

УведомлениеEnable Map LocalЕго нужно проверить, и соответствующие правила тоже нужно проверить, иначе он не вступит в силу.

6. Захват мобильного телефона

Запрос захвата пакетов мобильного телефона также является тем, что нам нужно использовать в нашей повседневной разработке.Как его использовать?CharlesКак насчет захвата запроса мобильного телефона?

настраиватьCharlesномер порта прокси установивProxy->Proxy Settings->Proxies->HTTP ProxyвнизPortНомер порта
Посмотреть локальный IP-адрес пройти черезCharlesизHelp->Local IP AddressПосмотреть, локальный IP-адрес xx.xx.xx.xx
Мобильный телефон и компьютер должны быть в одной сети Wi-Fi.
Настройка мобильной сети Wi-Fi

Возьмите Huawei mate 30 в качестве примера, выберите соответствующий Wi-Fi, выберите显示高级选项, установите прокси на手动. настраивать服务器主机名Это: xx.xx.xx.xx (только что проверенный IP-адрес компьютера) настраивать服务器端口Это: 8888 (порт только что установлен) После нажатия Сохранить запрос с телефона можноCharlesПроверьте это...

Обратите внимание, что при связыванииCharlesПоявится окно авторизации, для выбораAllow

Семь, настройки ограничения скорости

установивProxy->Throttle Settingsограничить скорость

Примечание: обязательно проверьтеEnable Throttlingопции

резюме

Вышеуказанная информация предоставлена вамCharlesКонфигурация общего использования, если у вас есть какие-либо связанные вопросы, вы можете оставить сообщение для обмена.

постскриптум

Это то, чем сегодня поделился с вами брат Ху. Не забудьте поставить лайк.点赞,收藏Да, обратите внимание на то, что говорит брат Ху, не теряйтесь в изучении внешнего интерфейса, добро пожаловать, чтобы оставить сообщение для обмена...

Брату Ху есть что сказать, сосредоточив внимание на области крупных интерфейсных технологий, поделившись архитектурой интерфейсных систем, принципами реализации фреймворка и новейшими и наиболее эффективными техническими методами!