spy-debugger 前端调试工具

特性

1、页面调试＋抓包
2、操作简单，无需USB连接设备
3、支持HTTPS。
4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
6、可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)

安装

npm install spy-debugger -g

安装成功后，把手机和电脑连到同一网络环境下，在命令行执行spy-debugger

正在启动代理
本机在当前网络下的IP地址为：xxx.xxx.xx.xx
node-mitmproxy启动端口: 9888
浏览器打开 ---> http://127.0.0.1:50094

步骤

第一步：手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）

第二步：命令行输入spy-debugger，按命令行提示用浏览器打开相应地址。

第三步：设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)。

• Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
• iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动

第四步：手机安装证书。注：手机必须先设置完代理后再通过(非微信)手机浏览器访问http://s.xxx  安装证书（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)。

第五步：用手机浏览器访问你要调试的页面即可。

spy-debugger原理是集成了weinre，简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。

ps:这个不会显示样式来源；能用真机模拟就用；不能的话这个不失为一个好工具