whistle-前后端调试利器
一、业务场景
在后端开发过程中，我们需要调试，排查各种问题，后端的问题有时需要借助前端页面去查看问题，然尔有些时候前端页面并不是时刻都可以连到后端的，这时可以借助whistle的ip转发功能，直接将浏览器中的页面请求转发到本地，方便排查问题。
在前端开发过程中，有时需要连接内网去排查问题，同样也可以直接将浏览器的请求转发到对应的ip，方便调试（一般不需要，开发环境自带服务器了，也可以做转发）。如果针对微信的开发，很有必要准备这个工具，极大的缩减了调试的过程和时间，提高开发效率。
二、使用方式
1、 安装
npm install -g whistle //如果国内 npm install 太慢可选择添加淘宝源代理 cnpm 或者
npm install -g whistle --registry=https://registry.npm.taobao.org
w2 -h //帮助信息2. 启动
w2 start // 这里默认端口8899如果需要指定端口可以 添加 -p 8890 参数
w2 start -p 8890 // 指定端口启动完成后会有如下提示：
这几个ip地址都可访问到whistle的配置页面。
接下来在浏览器中输入http://127.0.0.1:8899/ 页面打开后会有如下展示：
但是现在还无法抓包，需要设置代理
3.为浏览器设置代理
我使用的是 whistle-第三方插件 可以下载安装，可以自动识别当前地址的8899端口是否启动，也可代理到对应ip对应端口下
配置完后，可以查看whistle控制台，已经有对应的请求了。
三、基础功能
我们最常使用的就是NetWork 和 Rules 功能了, 其中NetWork是查看抓包，而Rules是设置代理，下面我以一个移动端活动为例，介绍一下whistle的使用：
1.界面功能
创建并启用一个代理选项：
default:
http://www.qq.com/pgg_act/ http://192.168.1.12.匹配模式：
//基本匹配
# 匹配域名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://
// 通配符匹配
# 通配符匹配，以 ^ 开头(如果需要限制结束位置可以用 $)，* 为通配符
^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 operatorURI3.代理协议：
//file
http://www.qq.com/pgg_act/ D:\dev\
//将此路径的请求都代理到本地D:dev 目录下。
//Host:
192.168.1.1 www.qq.com
将www.qq.com的请求都代理到192.168.1.1 IP上，实现在本地环境发测试环境的请求，
//请求替换：在后端接口开发中，我们需要将jsonp请求代理到自己的开发机，使用请求替换可以达到目的（类似fillder的extention)
http://www.qq.com http://www.baidu.com四、进阶
1.真机调试
使用小米手机进行调试，首先，将手机与电脑连在同一个局域网下， 手机在wifi设置下，找到代理-手动 主机名端口，为whistle 启动后的ip地址以及端口，填写好后，手机的所有请求都会从whistle转发，可以查看对应的参数
2.使用 log 功能打印日志：
在移动端真机调试中，我们无法像浏览器控制台那样，查看输出的日志和数据，以往的替代方案是在页面上使用vconsole插件，而有了whistle后，我们可以这样做：
/http://www.baidu.com/ log://这时候不管是PC还是真机，只要是访问 http://www.baidu.com 匹配方式下的页面，都可以在whistle的log选项下看到控制台输出的信息
3.使用 values + js 功能往页面注入 vconsole.js
我们在values功能栏下新建一个vConsole.js , 并把vconsole的源码放进去，并初始化一个vconsole对象,此时在rules 下配置
http://www.baidu.com js://{vConsole.js}
4.使用whistle内置的Weinre调试移动端页面
weinre相信大家都很熟悉，而whistle内置了weinre，使用方法如下： 在rules配置：
http://www.qq.com weinre://test.js这时候，就能在http://127.0.0.1:8899/weinre/client/#test 看到调试界面了：
五、不止于此
whistle还有许多实用的功能
Comments