whistle — инструмент отладки переднего плана

1. Бизнес-сценарий

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

2. Зачем использовать свисток

На протяжении долгой истории мы использовали fiddler+willow и Wi-Fi Xiaomi для захвата и отладки пакетов на локальной и реальной машине.Это понятно.Функции захвата пакетов и прокси-сервера Fiddler очень мощные, но в процессе его использования возникает очень обратной стороной боли является утечка памяти! ! Скрипач целый день висит,память съедает,а потом комп становится очень большим.Даже добавление флешки может вылечить только симптомы но не первопричину.На данный момент единственный способ решить это-это перезапустите скрипач.Интересно, есть ли какие-нибудь инструменты, которые могут заменить fillder. Итак, я нашел свисток. Попробовав его в течение некоторого времени, я обнаружил, что он может заменить скрипача для завершения нашей повседневной работы по разработке, а свисток в некоторых аспектах лучше.Давайте поделимся практикой использования свистка.

3. Начало установки

1. Установка

 npm install  -g  whistle   //也可以使用tnpm
 
 w2 -h  //帮助信息

2. Старт

 w2 start  -p 8899  //不设置端口默认使用8899

Дополнительные команды:Установка начинается
После завершения запуска откройте 127.0.0.1:8899 под chorme и увидите такую страницу:

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

Выберите один из двух вышеперечисленных плагинов chorme, я использую SwitchyOmega для проксирования браузера на порт 8899.
!

После завершения настройки смотрим в консоль свистка, в это время можно поймать запрос:

4. Основные функции

Наиболее часто используемые функции — это «Сеть» и «Правила», в которых «Сеть» предназначена для просмотра и захвата пакетов, а «Правила» — для настройки агентов Позвольте мне взять мобильное действие в качестве примера, чтобы представить использование свистка:

1. Функции интерфейса:

А. Создайте и включите опцию прокси:

б. Включить несколько параметров прокси

Для получения дополнительных функций интерфейса см.:список интерфейсов

2. Режим соответствия:

А. Базовое соответствие:

# 匹配域名www.qq.com下的所有请求
www.qq.com operatorURI

# 匹配域名www.qq.com下的所有http请求
http://www.qq.com operatorURI

# 匹配域名www.qq.com下的所有https请求
https://www.qq.com operatorURI

# 限定域名的端口号
www.qq.com:8888 operatorURI # 8888端口

#限定具体路径
http://www.qq.com/xxx operatorURI

# 精确匹配 ， 以$符号开头
$http://www.qq.com/xxx operatorURI

б. Регулярное сопоставление:

 /http:\/\/(.*)/  log://

C. Сопоставление подстановочных знаков

# 通配符匹配，以 ^ 开头(如果需要限制结束位置可以用 $)，* 为通配符

^www.example.com/test/***   operatorURI


# 通配域名匹配：
# 匹配二级域名以 .com 结尾的所有url，如: test.com, abc.com，但不包含 *.xxx.com
*.com   operatorURI
//*.com  operatorURI


# 通配路径匹配：
# 对所有域名对应的路径 protocol://a.b.c/xxx[/yyy]都生效
*/  operatorURI
*/xxx  operatorURI

Для получения дополнительных совпадающих шаблонов см.:образец соответствия

3. Агентский договор:

файл:

http://www.qq.com/pgg_act/  D:\dev\

Прокси запрашивает этот путь к локальному каталогу D:dev.

Б. ХОЗЯИН:

 10.241.11.111  www.qq.com

Проксировать все запросы с www.qq.com на IP-адрес 10.241.11.111, чтобы реализовать запрос тестовой среды в локальной среде,

в. Сканировать HTTPS:

whistle поддерживает получение https-запросов. Чтобы узнать о конкретных методах настройки, см.:HTTPS-перехват

г. Запрос на замену:

При разработке интерфейса php нам нужно проксировать запрос jsonp на нашу собственную машину разработки, что может быть достигнуто с помощью замены запроса (аналогично расширению fillder):

http://www.qq.com  http://www.baidu.com

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

5. Расширенный

1. Отладка реальной машины:

С Wi-Fi Xiaomi после настройки прокси-сервера вы можете получить пакет реальной машины, а кнопка онлайн в правом верхнем углу может запросить соответствующий прокси-сервер и порт:

2. Используйте функцию журнала для печати журнала:

В реальной машинной отладке мобильного терминала мы не можем просматривать журналы вывода и данные, такие как консоль браузера.Предыдущий вариант — использоватьvconsoleплагин, а со свистком мы можем сделать это:

/http://www.baidu.com/   log://

В настоящее время, будь то ПК или реальная машина, до тех пор, пока к ней есть доступwww.baidu.comДля страниц в режиме сопоставления вы можете увидеть информацию о выводе консоли в опции журнала свистка:

3. Используйте функцию values + js для внедрения vconsole.js на страницу:

Мы создаем новый vConsole.js под функциональной панелью значений, помещаем в него исходный код vconsole и инициализируем объект vconsole, который настроен по правилам:

http://www.baidu.com  js://{vConsole.js}

На этом этапе мы обновляем страницу, чтобы увидеть:

4. Используйте встроенный Weinre в свистке для отладки мобильной страницы:

Я думаю, что все знакомы с weinre, и в свистке есть встроенный weinre.Использование выглядит следующим образом: Настройте в правилах:

http://www.qq.com  weinre://test.js

В это время вы можетеhttp://127.0.0.1:8899/weinre/client/#test, чтобы увидеть интерфейс отладки:

ps: эта штука не очень полезна~

5. Маленькая хитрость:

Поскольку свисток — это веб-консоль, в этот раз мы добавляем 127.0.0.1:8899 на рабочий стол под chorme. Вы можете использовать эту консоль как программное обеспечение, чтобы вытащить ее~

6. Более того

в свистке тоже много полезных функций, украду картинку с официального сайта:
请在这里填写图片描述

Среди них основное внимание уделяется:

фиктивные данные:Использовать данные WHISTLE MOCK
Пользовательский плагин:Разработка плагина

Семь, используйте опыт

whistle — это кроссплатформенный (включая, но не ограничиваясь: Windows, Mac) прокси-инструмент веб-отладки на основе Node. По сравнению с fiddler, первый более удобен для разработчиков интерфейсов с точки зрения пользовательского опыта, но, в конце концов, он это рабочая веб-страница, которая лучше, чем fiddler, но не так стабильна. Тем не менее, установка свистка проста, а настройка проста, по сравнению с утомительным процессом настройки скрипача, он действительно завершен. Что касается функций, поддерживаются некоторые свистки скрипача, и это более удобно для отладки реальной машины, и есть больше функций, которые нужно обнаружить.
Прикрепите адрес гитхаба:GitHub.com/avme/whist это…

8. Справочные статьи:

Официальная документация:whistle.gitbooks.io/h...