whistle+proxy实现页面调试

1 安装whistle

npm install -g whistle  # 安装

w2 start  # 启动

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

2 安装proxy

SwitchyOmega下载地址：https://github.com/FelisCatus/SwitchyOmega/releases

如上图，选中.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规则如下：

# 添加监听
要做调试的地址   weinre://
# 如：
# ^www.baidu.com/***  weinre://baidu    # 监听域名为www.baidu.com的所有子链接地址

点击Weinre （=> baidu），

移动端打开要调试的页面，会看到pc端Targets部分变成绿色，表示调试过程通过，可查看dom、network等信息

FROM
https://www.cnblogs.com/beileixinqing/p/11384209.html
https://zqc.onlylike.work/whistle%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8/