содержание
- 1. Установка и использование
- 2. Возьмите пакет запроса мобильного телефона.
- 3. Замените онлайн-файлы локальными файлами
- 4. Другое
- Справочная документация
@江华, главный инженер Meituan Dianping, 2 года опыта работы, в основном отвечает за разработку апплета Dianping «Order H5» и «Meituan Dianping Smart Restaurant». Эта статья была впервые опубликована вКолонка Цзян Хуаня Zhihu,Следите за обновлениями.
Текст начинается здесь~
Charles — это сетевой прокси-инструмент, который часто используется для веб-отладки под Mac, его функции аналогичны инструменту Fiddler в среде Windows. Поскольку он часто используется в моей работе, я решил написать обобщающую статью.
Обратите внимание, что эта статья в основном используется для записи сложных проблем и решений, возникающих во время использования. Для регулярной установки и использования Charles см. конец статьи.Справочная документация, которые не будут подробно описаны в этой статье.
1. Установка и использование
от ЧарльзаЗагрузка с официального сайтаи установить пакет.
В этой статье не будет представлен основной метод использования. Если вам что-то непонятно, перейдите к этой статье.веб-руководство, написано очень подробно.
Ниже приводится подробный анализ проблем, возникающих при использовании.
2. Возьмите пакет запроса мобильного телефона.
захват пакета HTTP-запроса
Во-первых, вам нужно получить IP-адрес машины.
После открытия Charles выберите «Локальный IP-адрес» в разделе «Справка», чтобы увидеть IP-адрес машины. Если адрес IPv6 получен. Вы также можете удерживать нажатой клавишу выбора на вашем Mac и щелкнуть значок WIFI, чтобы получить адрес в формате IPv4. Как показано ниже:
Получить локальный IP-адрес
Вручную установите HTTP-прокси на WIFI на iPhone, адрес сервера — это IP-адрес компьютера, а номер порта — 8888. Затем откройте кнопку «Запись» на панели инструментов Charles, зайдите на страницу или откройте приложение в мобильном браузере, и вы увидите пакет http-запроса в Charles.
https запрос для перехвата пакетов
Пакет HTTPS для захвата мобильного телефона iPhone
Айфон хапает https пакеты, а конфигураций в интернете много, не буду их здесь подробно представлять.веб-руководствоДля справки.
Два дополнительных совета:
- Совет 1: После настройки в соответствии с описанной выше операцией, если iPhone захватит пакет запроса https, он отобразитunknown.
Это означает, что сертификат Чарльза был установлен только на локальном компьютере, но не был настроен как доверенный.Для его настройки необходимо выполнить следующие действия:Общие -> Об этой машине -> Настройки доверия сертификатов -> Проверка ЦС.
HTTPS-запрос Неизвестно
- Совет 2: Для адреса конфигурации Прокси —> Настройки прокси-сервера SSL, если вы не хотите устанавливать каждое доменное имя один раз, вы можете напрямую установить для хоста и порта значение *, чтобы разрешить захват пакетов запросов всех доменных имен. .
Разрешить сбор пакетов со всех SSL-прокси
Пакет HTTPS захвата мобильного телефона Android (Xiaomi)
Захват телефонов Android аналогичен захвату iPhone, вам необходимо выполнить следующие 4 шага, чтобы захватить пакеты HTTP-запросов:
- компьютерный сертификат
- Сертификат установки мобильного устройства
- Чарльз добавляет SSL-прокси
- Мобильный телефон использует прокси-сервер Mac для доступа к целевому доменному имени.
Добавьте две ошибки установки и решения
- Случай 1: Если вы столкнулись с вводом данных в браузере симулятора/мобильного телефонаcharlesproxy.com/getsslВместо выскакивающего окошка появляется следующая картинка, возможно потому, что телефон не устанавливает IP-адрес компьютера в качестве прокси (номер порта 8888)
Доступ к ссылке getssl без установки прокси на телефоне
- Случай 2: сертификат установки мобильного телефона Xiaomi выдает сообщение **"нет сертификата для установки"**, решение:
А. Откройте СПРАВКА Charles -> SSL Proxying -> Экспорт сертификата Charles Root Certification и закрытого ключа, введите любой пароль и экспортируйте файл pem.
Чарльз экспортирует сертификат извлечения файла Pem
Б. После экспорта используйте WeChat или другие методы для передачи pem-файла на телефон Android. Откройте файл в Настройках WLAN -> Установить сертификат и введите пароль, установленный при экспорте.
Например, путь к файлу через WeChat: WLAN -> Дополнительные настройки -> Установить сертификат -> Папка Tencent -> Папка MicroMsg -> Папка загрузки
Сертификат установки мобильного телефона Xiaomi
Анализ принципа Чарльза
Сертификат, установленный Чарльзом, фиксирует пакет, и компьютер и мобильный телефон соединяются. будь то посещениеcharlesproxy.com/getssl(Поскольку Mac включил прокси-сервер, доступ к этому адресу фактически возвращает локальный сертификат Charles и не посещает веб-сайт charlesproxy.com), или при ручной установке фактически устанавливается SSL-сертификат, соответствующий локальному компьютеру. Поэтому, если мобильный телефон и компьютер, на котором установлен сертификат, не сопряжены, даже если оба имеют сертификаты, они не могут перехватывать пакеты.
3. Замените онлайн-файлы локальными файлами
Замените файлы тестовой среды
а, сначала нужно установить ChromeProxy SwitchyOmegaПодключите и настройте прокси-сервер Charles, чтобы ссылки в Chrome отправлялись через Charles.
Конфигурация плагина SwitchyOmega
Не забудьте переключиться на прокси Charlse
б) Откройте Charles, выберите «Инструменты» —> «Настройка без кэширования» и установите флажок «Включить без кэширования», чтобы гарантировать, что кэширование файлов не повлияет на код.
Чарльз не включает настройки кеша
Кроме того, в настройках сети в панели управления Chrome лучше всего поставить галочку напротив пункта «Отключить кеш». Таким образом, кеш нельзя включить на этапе отладки браузера, что предотвратит модификацию кода, но это не вступит в силу из-за кеша браузера.
Chrome не включает настройки кеша
в) Замена одного файла. Выберите «Инструменты» —> «Сопоставить локальные настройки», чтобы сопоставить онлайн-файлы с локальными файлами, щелкните, чтобы выбрать файлы для замены (например, mm-order-list.*.js). Протокол Если оставить пустым, все протоколы сопоставляются по умолчанию.
注意：webpack打包的项目可能还需要根据实际情况映射公共文件，如 manifest.*.js 和 common.*.js 才可以完成替换。
Чарльз заменяет конфигурацию одного файла
г. Замените всю папку. По шагу в мы уже можем выполнять однофайловую замену, но задавать ее отдельно слишком хлопотно. Таким образом, мы напрямую заменяем всю папку. На примере проекта настройки app-menuorder-h5 конфигурации хоста и локального пути показаны на следующем рисунке:
Чарльз Замена карты папки Локальная настройка
После настройки локального сопоставления файлов Map Local Settings вам также необходимо настроить параметр Rewrite для перезаписи и замены файла. Замените все файлы в соответствующем каталоге регулярными выражениями.
Чарльз Заменить параметр перезаписи папки
е. Наконец, обновите браузер.Если в заголовке ответа http-запроса есть поле X-Charles-Map-Local, это означает, что локальный файл успешно заменен.
Замена файлов успешных рендеров
Замена файлов в рабочей среде (междоменная)
Замена файлов в производственной среде локальными файлами также требует установки локальных параметров сопоставления и параметров перезаписи.
А. Установите локальные настройки карты для сопоставления каталогов файлов, просто измените Host на доменное имя статического хранилища файлов, в этом примере Host: www.dpfile.com
Б. Установите параметры перезаписи, которые необходимо разделить на два этапа:
Первым шагом является указание файла замены.Обратите внимание, что файл в строке может иметь поле «min» в имени файла, поскольку он был сжат.
Настройки производственной среды Сопоставить директорию замены файла локальных настроек
На втором этапе, поскольку m.dianping.com ссылается на файлы в сопоставленном домене www.dpfile.com, это вызывает междоменные проблемы.
Обратите внимание, что это необходимо обсуждать в каждом конкретном случае:
- Случай 1: Заголовок ответа не содержит полей Access-Control-Allow-Origin и Access-Control-Allow-Credentials, вам нужно добавить эти два поля вручную.
Междоменные проблемы в производственных средах
Таким образом, вам нужно добавлять поля в заголовок ответа под доменом dpfile.comAccess-Control-Allow-Credentials: true и Access-Control-Allow-Origin: *, разрешающие ссылки на файлы в домене dpfile.com из других доменов.
Добавляя поле в заголовок ответа, можно ссылаться на файл в поле dpfile.
- Случай 2: Если заголовок ответа уже содержит поле Access-Control-Allow-Origin, просто добавьте Access-Control-Allow-Credentials. Добавить Access-Control-Allow-Origin больше нельзя, иначе будет сообщено об ошибке.
В заголовке ответа уже есть поле Access-Control-Allow-Origin, и об ошибке сообщается неоднократно.
После настройки в соответствии с приведенной выше конфигурацией вы можете заменить онлайн-файлы в рабочей среде локальными файлами :)
4. Другое
Фильтровать запросы в указанном домене
Так как Charles будет перехватывать все пакеты запросов, отправляемые мобильным телефоном, чтобы быстро найти нужные нам запросы, мы можем отфильтровать запросы захвата пакетов Charles.request package.
Чарльз фильтрует запросы в определенном домене