Charles + spy-debugger实现真机调试

1、Charles安装

下载地址：https://www.charlesproxy.com/latest-release/download.do
安装完成后需要安装证书，Help – SSL Proxying – Install Charles Root Cetificate，然后弹出证书安装页面，完成后将证书设置为始终信任。

1.png

2、手机安装证书

点击Charles的 Help – SSL Proxying – Install Charles Root Cetigicate on a Mobile Device or Remote Brower，将弹框中的代理ip和端口配置到手机（PS：手机和电脑需连接同一局域网）

3.png

手机WiFi配置代理完成后，浏览器输入chls.pro/ssl，下载并安装证书（PS：ios安装后需要添加信任，在设置 – 通用 – 关于本机 – 证书信任设置中将Charles Proxy CA打开；
安卓浏览器输入chls.pro/ssl时可能会显示网络错误，可以在pc端下载.ca证书，然后发送到手机安装，具体如下

4.png

上述操作完成后，手机端打开任意app后，即可在Charles中看到访问的页面请求

3、spy-debugger安装

全局安装

npm install spy-debugger -g

安装完成后，命令行执行

spy-debugger

启动spy-debugger服务，成功后会在用户目录下生成一个node-mitmproxy文件夹，这个文件夹内放的就是代理需要的证书，双击node-mitmproxy.ca.crt文件进行安装
，然后添加始终信任，再将证书发送到手机进行安装（参考Charles证书安装过程）

pwd   // 查看当前目录
cd ..  // 找到自己的用户目录，跳转到该目录下
cd node-mitmproxy // 跳转
open ./   // 打开node-mitmproxy文件夹

4、移动端调试

spy-debugger  // 启动spy-debugger服务

或者

spy-debugger -e http://127.0.0.1:8888  // 启动spy-debugger服务，并设置外部代理为Charles的服务

1.png

然后设置手机的WiFi代理（ip和端口如上图），设置完成后，在pc浏览器中访问http://127.0.0.1:58116/，

2.png

移动端访问任意app，绿色表示成功捕获到访问的页面，然后可以子啊elements、console中进行调试

3.png