whistle与vconsole的简单使用

相关文档

1. whistle相关说明文档 wproxy.org/whistle/ （当前最新版本:1.16.0）
2. vconsole.js相关说明文档 github.com/Tencent/vCo… （当前最新版本:3.3.2）

简单配置和使用

1. 安装whistle，使用命令npm install npm install -g whistle

2. 运行whistle，使用命令w2 run，默认为8899端口。运行成功结果：

   

3. 通过运行结果提示的地址打开whistle界面

   

4. 下载vconsole.js， 当前最新版本：github.com/Tencent/vCo… 解压后获取vConsole-3.3.2/dist/vconsole.min.js文件路径。

5. 在左菜单栏Values 中添加测试js文件，文件命名随意，vconsole.js为例，内容为标记输出和vconsole的初始化

   console.log('-----------vconsole hhh');
   <!--初始化VConsole-->
   new VConsole();
   console.log('-----------vconsole www');
   

6. 在左菜单栏Rules 总添加匹配规则。

   • 坑一：js://规则已经不在whistle新版本中使用（所有搜索到相关js://都是过时的操作），取而代之的是 jsAppend://，（说明文档：wproxy.org/whistle/rul…
     jsPrepend://， （说明文档：wproxy.org/whistle/rul…

   • 坑二：在未知原因的影响下通过jsAppend://引入vconsole会导致对象尚未完全加载而导致初始化VConsole是吧，所以需要使用jsPrepend://引入vconsole。

   • 坑三：ios上Chrome浏览器和Safari浏览器对相同网页的地址配柜规则可能会不同。以百度为例
     Chrome:匹配规则 www.baidu.com
     Safai:匹配规则 m.baidu.com

   # Chrome环境下
   www.baidu.com log://
   <!--本地vconsole.min.js地址-->
   www.baidu.com jsPrepend:///Users/weijiawang/Desktop/codes/vConsole-3.3.2/dist/vconsole.min.js
   <!--values中对应的自定义js-->
   www.baidu.com jsPrepend://{vconsole.js}
   
   # Safari环境下
   m.baidu.com log://
   <!--本地vconsole.min.js地址-->
   m.baidu.com jsPrepend:///Users/weijiawang/Desktop/codes/vConsole-3.3.2/dist/vconsole.min.js
   <!--values中对应的自定义js-->
   m.baidu.com jsPrepend://{vconsole.js}
   

7. 添加完 Values 和 Rules 都需要保存生效

8. https抓包配置，wproxy.org/whistle/web…

9. 手机设置代理为本地 whistle。默认端口8899

10. 通过手机浏览器打开百度，会出现vconsole调试按钮。

Chrome：