Сюй Шуайву, фронтенд-инженер команды WeDoctor Cloud Service. Front-end программист, который любит «делать что-то» по выходным.
предисловие
Зачем нам нужен прокси-инструмент? Насколько полезен гибкий и простой в использовании прокси-инструмент для разработки?
Удобный прокси-инструмент, который позволяет нам управлять нашей средой разработки по своему усмотрению.Если текущая интерфейсная служба среды зависает, нужно ли нам ждать перезапуска? Не делайте! Подрезал рабочую среду прямо к моей разработке. Процесс проверки различных состояний данных на странице все еще нуждается в создании данных? Не делайте! Направьте агента для изменения данных и прохождения процесса, экономя усилия. Я не знаю, как найти онлайн-проблему конкретной модели? Агент подключен к элементам просмотра и удаленному журналу, чтобы легко найти проблему...
Использование прокси не говорит о том, что оно может решить все проблемы, но, по крайней мере, оно может сэкономить нам большую часть времени в процессе решения проблемы, вместо того, чтобы ждать там перезагрузки при столкновении с проблемами окружения.
Представляем свисток
О свистке Следующие цитаты официального
Whistle (произносится [ˈwɪsəl], пиньинь [wēisǒu]) — это кроссплатформенный прокси-инструмент для веб-отладки, основанный на Node. Подобные инструменты — Fiddler на платформе Windows, который в основном используется для просмотра и изменения запросов HTTP, HTTPS и Websocket и ответов. Его можно использовать в качестве прокси-сервера HTTP. В отличие от способа изменения ответа на запрос через точки останова в Fiddler, Whistle использует аналогичный способ настройки хостов системы. Все операции могут быть реализованы с помощью конфигурации, поддерживающей доменные имена, пути, регулярные выражения, подстановочные знаки, общие Несколько методов сопоставления, таких как сопоставление путей и функций, могут быть расширены с помощью модулей Node.
против Чарльза
По-видимому, большинство людей использовали один из двух старомодных прокси-инструментов для захвата пакетов, Charles и Fiddler, когда они впервые столкнулись с прокси-сервером для захвата пакетов.Автор был дверью к Чарльзу. Но, узнав о Whistle позже, я решительно решил отдать его в его руки. Давайте поговорим о некоторых преимуществах Whistle, на мой взгляд.
- Открытый исходный код бесплатен По сравнению с гонораром Чарльза, использование Whistle с открытым исходным кодом, безусловно, менее обременительно.
- Простой в установке, Whistle реализован на основе Node, установка заключается в глобальной установке пакета npm, что, конечно, более удобно для внешнего интерфейса.
- Централизованная и гибкая конфигурация, различные функции Whistle управляются централизованно с помощью файлов конфигурации, а просмотр и изменение становятся более удобными и легкими для совместного использования.
- Свободно программируемый, когда встроенные функции не могут удовлетворить потребности, вы также можете использовать пакет Npm для разработки плагинов, который более удобен и прост в использовании для разработчиков JS.
как использовать
установить и использовать
Поскольку это пакет npm, для установки требуется только одно предложение (пользователям Mac или Linux без полномочий root необходимо добавить sudo перед командной строкой, например:sudo npm install -g whistle)
# 安装
npm install -g whistle
# 启动
w2 start
# 重启
w2 restart
# 停止
w2 stopДоступ к основному интерфейсу
Обычно прямой доступhttp://localhost:8899/#networkЭтого адреса достаточно.Если вы не используете порт по умолчанию, вы можете изменить его на активированный номер порта для доступа.
Интерфейс выглядит следующим образом:
Настроить прокси
информация о конфигурации
прокси-сервер: 127.0.0.1 (при развертывании на удаленном сервере или виртуальной машине измените его на ip соответствующего сервера или виртуальной машины)
порт по умолчанию:8899 (если порт занят, можно указать новый порт через -p при запуске, более подробную информацию можно посмотреть, выполнив командную строку w2 help (v0.7.0 и выше также можно использовать w2 help))
Поскольку Whistle не может автоматически установить системный прокси-сервер, контент, для которого требуется прокси-сервер, необходимо настраивать вручную.
Системный агент
Обычно это не используется, каждая система устанавливает системный прокси по-разному, вы можете найти способ настройки самостоятельно.
Браузерный прокси (например, Chrome)
Хотя Chrome также может установить прокси, рекомендуется использоватьSwitchyOmegaПлагин управляет прокси, и в то же время можно настроить правила прокси лестницы, чтобы к прокси нельзя было получить доступ из Google.
мобильный прокси
Мобильный прокси требует, чтобы два устройства находились под одним и тем же WiFi (связь по сети), и настройте текущий прокси Wi-Fi в настройках.В качестве примера возьмем iOS: Прокси-сервер — это IP-адрес, с которого запускается устройство Whistles.
https-сертификат
Если вы будете настраивать или у вас нет требований к https, вы можете пропустить этот пункт.
Если https не может просматривать свое содержимое по умолчанию, нам нужно установить собственный корневой сертификат для просмотра https-запроса.В этой части содержимого нет ничего особенного, поэтому мы будем напрямую копировать содержимое документа.
Загрузите корневой сертификат и включите захват HTTPS-запросов:
Установить корневой сертификат
После установки сертификата в соответствии со следующими шагами, если напоминание о безопасности все еще появляется, основная причина заключается в том, что вы посещали страницу ранее, что привело к длительному соединению.Вы можете подождать некоторое время, чтобы посетить, или снова открыть браузер, или перезапустите Whistle: перезапуск w2
После загрузки корневого сертификата, как показано выше, щелкните файл rootCA.crt, и появится диалоговое окно установки корневого сертификата.
Windows:
Installing a root certificate on Windows
После загрузки сертификата дважды щелкните сертификат и следуйте инструкциям по установке сертификата. В процессе установки сертификата убедитесь, что сертификат хранится в разделе Доверенные корневые центры сертификации.
Mac:
После установки сертификата на Mac вам необходимо вручную установить доверие к сертификату, выполнив следующие действия:
Откройте интерфейс управления сертификатами и найдите сертификат со словом свисток.Если сертификатов несколько и вы не уверены, какой из них установлен последним, вы можете удалить их все и установить заново.
После двойного щелчка по сертификату нажмите «Доверять», чтобы развернуть параметры слева, выберите «Всегда доверять» в красной части, нажмите в верхнем левом углу, чтобы закрыть текущий интерфейс, и вам будет предложено ввести пароль; после ввода пароля, Вы можете видеть, что красный значок x на сертификате исчез, перейдите к этому шагу Описание Завершите установку сертификата.
Firefox:
Меню > Настройки > Дополнительно > Сертификаты > Центры сертификации > Импорт > Отметить все флажки > ОК
iOS
После настройки прокси на телефоне введите в адресной строке Safari rootca.pro, следуйте подсказкам для установки сертификата (или установите его, отсканировав QR-код в консоли свистка, корневой сертификат для установки iOS необходимо проверить по подключение к удаленному серверу, а функцию перехвата HTTPS нужно временно отключить. После iOS 10.3 вам нужно вручную доверять пользовательскому корневому сертификату, задав путь: Настройки > Общие > О программе > Тесты доверия сертификатов. Подробнее см. здесь
Android
- Установка кода сканирования QR-кода консоли Whistle или установка rootca.pro в адресной строке браузера по запросу
- Некоторые браузеры не распознают сертификат ca автоматически, его можно установить через Android Chrome.
- Некоторые приложения после Android 6.0 по-прежнему не могут захватить https-соединение после успешной установки сертификата.Возможно, у приложения нет разрешения доверять пользовательскому сертификату. Подтвердите, имеет ли приложение следующую конфигурацию:
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
<certificates src="user" />
</trust-anchors>
</base-config>В основном это связано с тем, что конфигурация по умолчанию для версий после Android 6.0 изменилась.Для получения дополнительной информации см. документацию по разработке Android.
Включить перехват HTTPS
В открытом диалоге на картинке есть флажок:
1.Capture HTTPS CONNECTs: Включите функцию перехвата Https, только после установки этого флажка и установки корневого сертификата Whistle сможет видеть запросы HTTPS и Websocket.
Пользовательский сертификат запроса или корневой сертификат
свисток будет автоматически генерировать корневой сертификат и динамически генерировать https-сертификат для каждого запроса на основе корневого сертификата.Если вам нужно использовать пользовательский сертификат или даже корневой сертификат, есть два способа (поддерживаются только сертификаты в формате .crt) :
Поместите общую пару сертификатов (таких как: test.crt и test.key, test2.crt и test2.key и т. д.) или корневой сертификат (имя должно быть root.crt и root.key) в определенном каталоге system, например /data/ssl, и добавьте параметр запуска w2 start -z /data/ssl при запуске, свисток автоматически добавит сертификат внутри (поддерживается в версии 1.14.8 и выше) Поместите указанный выше сертификат или корневой сертификат в фиксированный каталог ~/.WhistleAppData/custom_certs/, свисток автоматически добавит сертификат внутрь
приоритет -z dir > ~/.WhistleAppData/ > встроенный сертификат
правила сопоставления
В Whistle есть много правил сопоставления, вот несколько общих шаблонов сопоставления, которые в основном могут охватывать 90% сценариев использования. Подробные правила можно посмотреть【Правила сопоставления】
Примечание:Правила сопоставления по умолчанию имеют следующий вид:pattern operatorURI, Правило сопоставления находится слева, а правило операции — справа.
совпадение доменного имени
# 匹配域名 www.test.com 下的所有请求，包括 http、https、ws、wss，tunnel
www.test.com operatorURI
# 匹配域名 www.test.com 下的所有 http 请求
http://www.test.com operatorURI
# 匹配域名 www.test.com 下的所有 https 请求
https://www.test.com operatorURI
# 上述匹配也可以限定域名的端口号
www.test.com:8888 operatorURI # 8888 端口
www.test.com/ operatorURI # http 为 80 端口，其它 443 端口сопоставление путей
# 限定请求协议，只能匹配 http 请求
http://www.test.com/xxx operatorURI
http://www.test.com:8080/xxx operatorURI
# 匹配指定路径下的所有请求
www.test.com/xxx operatorURI
www.test.com:8080/xxx operatorURIсовпадение с подстановочным знаком
Сопоставление с подстановочными знаками начинается с ^, а * — это подстановочный знак, доступ к которому можно получить с помощью
# 通配符匹配必须以 ^ 开头
# 访问 wy.guahao.com/abc/xyz/1.js 就会被映射到 /path/to/xyz/1.js
^wy.guahao.com/abc/*** /path/to/$1
# 也可以用 $ 限制结尾
# 只转发 index.js 结尾的 url
^wy.guahao.com/abc/***index.js$ /path/to/$1* означает остановку при совпадении /, а *** означает совпадение нескольких
Подстановочный знак доменного имени
Использование * в имени домена не обязательно должно начинаться с ^, например, мы используем*.com operatorURIсоответствоватьguahao.comд., но не совпадаетwww.guahao.com. И чтобы вступило в силу для всех поддоменов, вы можете использовать***.com operatorURIэто будет соответствоватьwx.wy.guahao.comтакое доменное имя
обычный матч
Для очень гибких правил матча вы можете использовать регулярное сопоставление.
# 匹配所有请求
/./ operatorURI
# 匹配 url 里面包含多个关键字的请求
/keyword/ operatorURI
# 通过正则匹配，同样的 $1~$9 捕获分组，$0 表示整个 URL
/(\d+).html/ operatorURIОбщие функции
Привязать хост
Метод записи такой же, как и для файла хоста.При использовании прокси файл хоста машины не запрашивается.Изменение этой конфигурации хоста не будет кэшироваться и вступит в силу немедленно.
127.0.0.1 wy.guahao.comЗаменить запрос
При отладке некоторых проблем, которые трудно найти локально с проверкой доменного имени (например, авторизация WeChat, вызовы WeChat SDK), вы можете проксировать онлайн-страницы в локальную среду разработки для устранения неполадок.
Для некоторых ресурсов, не скомпилированных с помощью Webpack, онлайн-ресурсы могут быть заменены для достижения эффекта прямой онлайн-отладки. Для проектов, в которых внешний и внутренний интерфейсы не разделены, когда локальную среду сложно настроить, вы можете отлаживать локальные файлы JS и CSS в тестовой среде.
# 本地替换线上
127.0.0.1 wya.guahao.com
https://wy.guahao.com http://wya.guahao.com:8080
# 代理替换资源
^http://test.guahao-test.com/front/hps-h5-static/css/h5.min.css*** http://127.0.0.1:9091/front/hps-h5-static/css/h5.css
^http://test.guahao-test.com/front/hps-h5-static/js/h5.js*** http://127.0.0.1:9091/front/hps-h5-static/js/h5.jsзаменить возврат
Добавление запрошенного текстового контента, возврат замены контента
# 说明：会把内容 append 到请求后面
http://guahao.com/style.css resAppend://{myAppend.css}
# 说明：完全替换请求内容
http://guahao.com/style.css resBody://{myResBody.css}
Внедрить JS-скрипт
Обычно мы не включаем инструменты отладки, такие как vConsole и Eruda, в онлайн-проектах. Трудности с просмотром сообщений об ошибках и другой информации, когда что-то идет не так. В настоящее время вы можете использовать прокси-сервер для внедрения vConsole, Eruda на страницу, чтобы увидеть проблему.
# htmlAppend 操作即为在 html 部分最后注入 debugger 变量，变量内容在“Value”面板进行设置
https://wy.guahao.com/ htmlAppend://{debugger}Содержимое переменной отладчика:
<script crossorigin="anonymous" integrity="sha384-ltIfi6+efoMR4xY0cwhn9a243JE/09cby6RJioKuqFKzs4un/eTmCLbAGaVM8xsJ" src="https://lib.baomitu.com/eruda/2.2.1/eruda.js"></script>
<script>eruda.init();</script>
Вывод Remote Console.xxx
Проблема при отладке на мобильном терминале заключается в том, что вы не можете просмотреть журнал.Даже если мы используем описанный выше метод для внедрения инструментов отладки, таких как Eruda, на страницу, неизбежно, что два устройства будут переключаться назад и вперед для просмотра содержание. В Whistle реализована платформа удаленного ведения журналов, аналогичная браузерной консоли, с помощью соответствующих правил вы можете просматривать журналы на других устройствах на стороне ПК.
# wy.guahao.com 域名的网站远程打印 log
# wy.guahao.com log://
# 远程打印 log 同时注入脚本
wy.guahao.com log://{injection-log}
# --------- Value 部分 ------------
# injection-log 内容
console.log('-----------------start-------------------')
console.log('远程 log')
console.log('查看某个变量', window)
console.log('-----------------end---------------------')Интегрированная удаленная отладка weinre
Weinre является одним из основных проектов Apache и является аббревиатурой WEb INspector REmote. Как следует из названия, он похож на Firebug или инструмент отладки браузера, но может удаленно запускать и отлаживать веб-страницы. Поэтому, если вы использовали инструменты разработчика Firefox или инструменты отладки Chrome, начать работу с Weinre очень просто и естественно.
Тем не менее, конфигурация использования Weinre очень громоздка.Whistle может автоматически внедрить сценарий запуска Weinre на страницу для нас, что делает использование Weinre одним предложением.
# 集成 weinre 的功能, key 为任意的字符串，主要用于区分页面
wy.guahao.com weinre://[key]резюме
Выше приведены несколько функций, которые я обычно использую в процессе разработки, и функций Whistle гораздо больше. Если вам интересно, вы можете перейти к документации Whistle, чтобы просмотреть подробности.Следующее является частью его списка протоколов.Видно, что функции очень богаты. Кроме того, он поддерживает написание подключаемых модулей.При наличии пользовательских требований вы также можете самостоятельно написать подключаемые модули для достижения требуемых функций.