借助whistlejs实现本地调试微信开放平台的微信绑定(登录)

上次使用Fiddler作为本地调试微信的工具, 很成功, 但是 Fiddler是收费的, 只有半个月的试用期, 所以未雨绸缪(囊中羞涩, 不是)找到了另一个抓包的工具--whstle whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的 Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能

安装(Mac/Win)

[sudo] npm install -g whistle && w2 start --init // 安装并初始化工具(设置全局代理, 安装系统根证书), 安装时会主动申请相关权限, 记得给到

安装成功后, 可以访问: local.whistlejs.com 在页面上操作
如果全局或者浏览器内开着代理, 记得关掉, 不然会访问不到

看到下面这个页面就对了

添加规则

找到Rules面板, 点击按钮Create来创建一条规则
例如:

qq.com 127.0.0.1:8000

点下Save或者Ctrl/Cmd + S保存并生效, 此时你在浏览器上输入 qq.com, 你会发现进入的是本地项目

踩坑分析

规则配置不对的时候, 你会发现页面一直在刷新
为啥呢?
因为我们本地开发 dev 环境下, 打包工具会向当前项目的启动地址发送 ws 请求, 以保持热更新, 而如果请求不到的话, 那就会一直刷新项目,直到连接上, 而规则配错了的话, 那就一直连接不上, 所以会一直刷新, 所以要注意的是: 如何配置对规则
方法 1: 首先写域名的时候直接写域名就好了, 不要写协议, 后面映射的地址也不要写协议, 这样的话, 默认规则应该是 replace, 这样配对不会出问题
方法 2: 域名地址与映射地址一一对应, 协议对协议, 域名对 IP, 所以要走这种方式的话, 需要写两条规则:

https://qq.com http://127.0.0.1:8000
wss://qq.com wss://127.0.01:8000

这样的话也能正常映射

还有一个问题, 项目中有传给微信的回调地址, 而这个地址如果是生产环境的地址, 那可能会直接给你改成本地地址的, 微信开放平台的回调就挂掉了, 所以这样是不行的, 需要再加一条规则, 把命中的 filter, 像 Fiddler, 就需要加上这个规则, 而Whistle, 没有Fiddler那么"霸道", 连参数都给一块命中改掉, Whistle不需要, 它没有改参数, 所以不需要再添加 rule

完美!

一些基本命令

文档: wproxy.org/whistle/qui…
w2 proxy [端口]: 开启全局代理 [, 代理到某个端口]
w2 proxy off: 关闭全局代理
w2 start : 开启
w2 stop: 停止 Whistle
w2 restart: 重启 Whistle
WebUI界面: local.whistlejs.com| http://127.0.0.1:8899

客户端

Whistle也有客户端了, 上面主要介绍的是命令行的使用, 习惯客户端的也可以使用客户端抓包: github.com/avwo/whistl…