1、安装whistle

npm install -g whistle  # 安装

w2 start  # 启动

启动后，打开http://127.0.0.1:8899/#network，页面如下

2、安装proxy

SwitchyOmega下载地址：github.com/FelisCatus/…

如上图，选中.crx下载，完成后添加到google扩展程序中，不再赘述。 也可在谷歌应用商店中直接下载，下面两个都可以

3、whistle+proxy实现代理

1）控制台启动whistle 2）创建所需的proxy代理连接，新建一个名为“xxx”的连接，代理服务器设置为127.0.0.1，端口设置为8899（这两个设置很重要！！！直接关系到后面的代理能否成功）。

3）设置代理规则 打开http://127.0.0.1:8899，在Rules中设定代理规则。 以将www.baidu.com指向本地test-local文件为例，首先在Values中添加test-local文件，并随意添加数据（PS：一般的接口返回都是json形式，这里添加的数据最好经过json格式化，否则代理后的接口返回异常）。此时访问www.baidu.com，实际访问的是本地test-local，结果如下图

PS：这里也可以导入本地文件，在本地新建001.json文件，向里面添加数据。然后values => files => drop file …(选中本地文件) => 复制path， 然后在rules里添加规则，结果file://{}等效

www.baidu.com      /$whistle/001.json

4）show time

选中proxy中自己创建的连接

在浏览器中打开www.baidu.com

此时的页面展示就是上述***3）***中定义的代理路径，抓包效果如下所示，访问的url为www.baidu.com，实际的地址为file://{test-local}

4、调试

1）移动端输出console（log://） 在对移动端进行调试时，需要输出console.xxx()的信息，一些抓包工具不会展示这类信息，但whistle在内部实现了类似浏览器console的远程log平台，只需配置简单的whistle负责即可。 在Rules中添加log规则如下：

whistle开启http/https拦截，表示要对http://xxx（为移动端调试页面的url）进行拦截。移动端打开http://xxx后，在Tools => Console中可以看到console信息。

2）真机调试（weinre://） 在Rules中添加weinre规则如下：

http://xxx   weinre://

点击Weinre （=> anonymous），

移动端打开http://xxx页面，会看到Targets部分变成绿色，表示调试过程没问题，刷新页面可以看到页面的打印、dom等信息。