学习笔记：whistle解决移动端的烦恼

我用过很多抓包调试工具，如：fiddler  ，Charles ，Wireshark，还有android Profiler自带的网络抓包等。

    

这些工具的给我第一个感觉，操作麻烦，十分繁琐，到目前为止，我还没有发现哪一款能够和whistle媲美。

像whistle这种好用，又跨平台，而且简单方便，功能强大确实值得推荐，只所以已whistle解决移动端的烦恼为主题，主要是因为他能解决移动端，三大问题：

       ##1.  一是它方便抓包，请求响应清晰明了

          

         

                 

       ##2. 二是它能调试Web网页，移动端的webview，UKwebView显示内容

         

       ##3. 三是它能快速转换所有请求，正式和测试环境只需要进行注释，就能避免打包操作。

                    

是不是特别棒，而我用的也只是这个工具的冰山一角，下面看正文。

一、whistie 工具 简介

具体功能：

二、安装启动whistle

四个步骤： 安装Node、安装whistle、启动whistle、配置代理。

##1. 安装Node

whistle支持v0.10.0以上版本的Node，为获取更好的性能，推荐安装最新版本的Node。

如果你的系统已经安装了v0.10.0以上版本的Node，可以忽略此步骤，直接进入安装whistle的步骤，否则：

1. Windows或Mac系统，访问https://nodejs.org/，安装LTS版本的Node，默认安装即可。
2. Linux下推荐使用源码安装: 从Node官网下载最新版的Source Code(或者用wget命令下载)，解压文件(tar -xzvf node-vx.y.z.tar.gz)后进入解压后的根目录(node-vx.y.z)，依次执行./configure、./make和./make install。

安装完Node后，执行下面命令，查看当前Node版本

$ node -v

如果能正常输出Node的版本号，表示Node已安装成功(Windows系统可能需要重新打开cmd)。

##2. 安装whistle

Node安装成功后，执行如下npm命令安装whistle （Mac或Linux的非root用户需要在命令行前面加sudo，如：sudo npm install -g whistle）

$ npm install -g whistle

npm默认镜像是在国外，有时候安装速度很慢或者出现安装不了的情况，如果无法安装或者安装很慢，可以使用taobao的镜像安装：

$ npm install cnpm -g --registry=https://registry.npm.taobao.org
$ cnpm install -g whistle

或者直接指定镜像安装：
$ npm install whistle -g --registry=https://registry.npm.taobao.org

whistle安装完成后，执行命令 whistle help 或 w2 help，查看whistle的帮助信息.

如果能正常输出whistle的帮助信息，表示whistle已安装成功。

##3.启动whistle

最新版本的whistle支持三种等价的命令whistle、w2、wproxy

启动whistle:

$ w2 start

Note: 如果要防止其他人访问配置页面，可以在启动时加上登录用户名和密码 -n yourusername -w yourpassword。

重启whsitle:

$ w2 restart

停止whistle:

$ w2 stop

调试模式启动whistle(主要用于查看whistle的异常及插件开发):

$ w2 run

启动完whistle后，最后一步需要配置代理。

##4. 配置代理

配置信息

1. 代理服务器：127.0.0.1 (如果部署在远程服务器或虚拟机上，改成对应服务器或虚拟机的ip即可)
2. 默认端口：8899 (如果端口被占用，可以在启动是时通过 -p 来指定新的端口，更多信息可以通过执行命令行 w2 help (v0.7.0及以上版本也可以使用w2 help) 查看)

勾选上 对所有协议均使用相同的代理服务器

代理配置方式(把上面配置信息配置上即可)

1. 全局代理：直接配置系统代理：

   • Windows
   • Mac: System Preferences > Network > Advanced > Proxies > HTTP or HTTPS

      

   • Linux: Settings > Network > VPN > Network Proxy > Manual

      

2. 浏览器代理：安装浏览器代理插件 (推荐) 

   • 安装Chrome代理插件：推荐安装SwitchyOmeg

   • Firefox: 地址栏输入访问 about:preferences，找到 Network Proxy，选择 手动代理配置(Manual proxy configuration)，输入代理服务器地址、端口，保存

      

3. 移动端需要在设置中配置当前Wi-Fi的代理，Android :                                      

4. 移动端需要在设置中配置当前Wi-Fi的代理，iOS :                                                                      

PS: 如果配置完代理，手机无法访问，可能是whistle所在的电脑防火墙限制了远程访问whistle的端口，关闭防火墙或者设置白名单：http://jingyan.baidu.com/article/870c6fc317cae7b03ee4be48.html

##5.浏览器访问配置页面

启动whistle及配置完代理后，用Chrome浏览器(由于css兼容性问题界面只支持Chrome浏览器)访问配置页面，如果能正常打开页面，whistle安装启动完毕，可以开始使用。

可以通过以下两种方式来访问配置页面：

• 方式1：域名访问 http://local.whistlejs.com/
• 方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
• 方式2：通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号)，自定义端口支持上述两种方式访问，也支持 http://127.0.0.1:xxxx

三、whistle的配置 规则 和WEB页面调试

##1.whistle的配置 规则

whistle的所有操作都可以通过配置实现，配置方式扩展于系统hosts配置方式(ip domain或组合方式ip domain1 domain2 domainN)，具有更丰富的匹配模式及更灵活的配置方式。whistle的匹配顺序是从左到右，这与传统hosts从右到左的配置方式不同，但为了兼容传统hosts配置方式，除了pattern和operatorURI都可以为请求url外(这种情况whistle无法自动区分pattern和operatorURI，只能按约定的顺序匹配)，其它情况whistle都支持配置两边的位置对调，即：pattern operatorURI和operatorURI pattern等价。

whistle跟传统hosts配置一样也采用#为注释符号

whistle有以下三种配置方式：

1. 默认方式

   默认是将匹配模式写在左边，操作uri写在右边

    pattern operatorURI
   

   whistle将请求url与pattern匹配，如果匹配到就执行operatorURI对应的操作

2. 传统方式

   传统方式指的是传统的hosts配置方式，操作URI写在左边

    operatorURI pattern
   

   如果pattern为路径或域名，且operatorURI为域名或路径

    www.test.com www.example.com/index.html
    http://www.test.com www.example.com/index.html
   

   这种情况下无法区分pattern和operatorURI，whistle不支持这种传统的方式，只支持默认方式

3. 组合方式

   传统hosts的配置对多个域名对于同一个ip可以采用这种方式：

    127.0.0.1  www.test1.com www.test2.com www.testN.com
   

   whistle完全兼容传统hosts配置方式，且支持更多的组合方式：

    # 传统组合方式
    pattern operatorURI1 operatorURI2 operatorURIN
   
    # 如果pattern部分为路径或域名，且operatorURI为域名或路径
    # 这种情况下也支持一个操作对应多个pattern
    operatorURI pattern1 pattern2 patternN
   

whistle v1.13.4及以上版本支持，配置换行：

www.test.com file://(test) filter://*/cgi-bin
# 等价于
line`
www.test.com file://(test)
filter://*/cgi-bin
`
# 或
line`
www.test.com
file://(test)
filter://*/cgi-bin
`

  具体规则可配合详细文章使用： 

   http://wproxy.org/whistle/pattern.html ，http://wproxy.org/whistle/principle.html

  日常使用比较多的：

##2.调试Web页面：

具体详看 这三篇文章，比较详细：

 https://segmentfault.com/a/1190000012159690，https://www.cnblogs.com/fafa-coding/p/10833547.html，https://segmentfault.com/a/1190000016058875

附一篇mock数据的文章：https://segmentfault.com/a/1190000014185370

在此，特别感谢这些作者和官方。推荐详细可去看看官网：http://wproxy.org/whistle/