1、安装whistle
npm install -g whistle # 安装
w2 start # 启动
启动后，打开http://127.0.0.1:8899/#network，页面如下
1.png
2、安装proxy
SwitchyOmega下载地址：https://github.com/FelisCatus/SwitchyOmega/releases
2.png
如上图，选中.crx下载，完成后添加到google扩展程序中，不再赘述。
也可在谷歌应用商店中直接下载，下面两个都可以
3.png
3、whistle+proxy实现代理
1）控制台启动whistle
2）创建所需的proxy代理连接，新建一个名为“xxx”的连接，代理服务器设置为127.0.0.1，端口设置为8899（这两个设置很重要！！！直接关系到后面的代理能否成功）。
4.png
3）设置代理规则
打开http://127.0.0.1:8899，在Rules中设定代理规则。
以将www.baidu.com指向本地test-local文件为例，首先在Values中添加test-local文件，并随意添加数据（PS：一般的接口返回都是json形式，这里添加的数据最好经过json格式化，否则代理后的接口返回异常）。此时访问www.baidu.com，实际访问的是本地test-local，结果如下图
5.png
6.png
7.png
PS：这里也可以导入本地文件，在本地新建001.json文件，向里面添加数据。然后values => files => drop file …(选中本地文件) => 复制path， 然后在rules里添加规则，结果file://{}等效
8.png
www.baidu.com /$whistle/001.json
4）show time
选中proxy中自己创建的连接
9.png
在浏览器中打开www.baidu.com
10.png
此时的页面展示就是上述3）中定义的代理路径，抓包效果如下所示，访问的url为www.baidu.com，实际的地址为file://{test-local}
11.png
4、调试
1）移动端输出console（log://）
在对移动端进行调试时，需要输出console.xxx()的信息，一些抓包工具不会展示这类信息，但whistle在内部实现了类似浏览器console的远程log平台，只需配置简单的whistle负责即可。
在Rules中添加log规则如下：
12.png
whistle开启http/https拦截，表示要对http://xxx（为移动端调试页面的url）进行拦截。移动端打开http://xxx后，在Tools => Console中可以看到console信息。
13.png
2）真机调试（weinre://）
在Rules中添加weinre规则如下：
http://xxx weinre://
点击Weinre （=> anonymous），
14.png
移动端打开http://xxx页面，会看到Targets部分变成绿色，表示调试过程没问题，刷新页面可以看到页面的打印、dom等信息。
15.png
