前端抓包工具 spy-debugger

场景:H5页面嵌入在app页面里,页面展示有误,到底是前端问题还是后端问题,如果没有任何辅助工具,我们无法直接检查接口的数据返回。。。
如果每次都发布版本都测试环境,或者借助后端同学帮忙抓数据,也是非常麻烦的。。。
不需要发布测试版本,及借助后端同学的帮忙,我们如何获取到测试app里的接口数据
抓包工具由此诞生。

一.安装方法

1.windows下
npm install spy-debugger -g
2.mac下
sudo npm install spy-debugger -g

二.启动

spy-debugger -w true

启动成功后,如图:
前端抓包工具 spy-debugger

四.按照启动spy-debugger的代理说明,使用浏览器打开http://127.0.0:62186,打开如图:

前端抓包工具 spy-debugger

五.手机配置:

设置->无线局域网->选择当前网络,如图:
前端抓包工具 spy-debugger
配置代理:选手动,按照终端启动spy-debugger的代理说明,填写配置代理,并存储:
前端抓包工具 spy-debugger

六.配置完成,打开你的测试app,进入你要测试的h5页面,如果该页面有接口请求,http://127.0.0.1:55687/的请求抓包页面会同步该页面的请求情况。

前端抓包工具 spy-debugger