文档: https://wproxy.org/whistle/install.html
总结
这个工具的界面非常好理解,易于使用。
前端开发过程中,经常需要抓包看数据,mock请求数据,mock响应数据,代理线上资源等
这个工具统统可以满足
一、安装
按照文档,安装node,whistle
npm install -g whistle
二、启动一下
如果代理移动端,这里一定要用8081端口
w2 start -p 8081
// 启动
w2 stop
// 停止
w2 restart -p 8081
// 重启
启动后 浏览器打开 http://127.0.0.1:8081
即可看到软件面板
三、ca映射至8081端口
w2 ca 8081
映射后,记得重启下服务
四、安装证书
需要代理哪个客户端 就在哪个客户端安装证书
增加证书才可以代理https
扫码下载(需要先完成step 5)
五、手机端代理
手机wifi代理到 自己电脑ip的8081端口 ip和端口见启动日志
移动端保证和电脑在同一个网络环境下
这一步是将 手机的网络转发到 自己电脑ip:8081端口, 自己电脑ip的8081端口又会被whistle起的服务代理,至此,就可以查看到手机端的请求日志了
六、请求响应mock
下面2步即可
七、调试移动端页面
文档
https://wproxy.org/whistle/rules/weinre.html
八、rules中配置
这个配置有很多,这里只列出最简单的配置
点击上面Weinre 按钮中的trip 即可跳转调试页面
# 劫持mock请求
https://xxx/xxx/getname file://{getname}
# 修改header
https://xxx/xxx/getname resHeaders://{changeHeader}
# 转发
https://xxx/xxx/1.html https://xxx/xxx/2.html
九、代理PC
Chrome先安装这个插件