spy-debugger + Charles 移动端调试

2020-04-10 | 阅读：次

已安装过的可以直接跳过

第1步：点击Charles的 Help > SSL Proxying > Install Charles Root Cetificate 然后就会弹出证书安装页面，将Charles的证书设置为始终信任即可：

第2步：点击Charles的Proxy > Access Control Settings 进行配置让手机连接代理时，不需要点允许连接确认操作。

上述配置，表示允许任意IP的设备连接该代理服务，不会有允许连接确认对话框。

第1步：点击Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后会弹出一个对话框，告诉你手机要设置的代理IP地址和端口

注意：手机和电脑必须连接同一个WiFi才可以。

第2步：根据提示在手机上配置Wi-Fi网络代理，在手机上点击设置 > 无线局域网选中后

第3步：点击配置代理，选择手动，服务器和端口输入Charles对话显示的IP和端口号，配置好后，记得点击存储

第4步：在Safari浏览器输入chls.pro/ssl ，下载并安装证书

第5步：在手机的设置 > 通用 > 描述文件与设备管理找到Charles Proxy CA 证书，点击安装

第6步：在手机的设置 > 通用 > 关于本机 > 证书信任设置将 Charles Proxy CA 打开

此时，Charles所有的准备工作都完成了，接下来我们就可以启动spy-debugger进行移动端H5调试了。

第1步：启动命令

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

上述命令表示启动spy-debugger调试服务，并将所有的资源请求都转发到Charles的代理服务上。其实我们打开Charles程序的时候，它实际上是在本地启动了一个http的服务，监听在8888端口上。

第2步：在手机上设置代理服务器和端口为spy-debugger的IP和端口:

第3步：在浏览器打开http://127.0.0.1:63890/client/

第4步：在网校App里找到聚合H5页面打开

第5步：此时在浏览器上的Remote选项卡上就可以看到，连接的终端了

第6步：我们可以在Elements选项上进行页面元素的选择和调试，可以发现我们鼠标放到元素上，手机端上会实时看到选中效果

第7步：我们还可以在Console选项卡下查看代码输出的console信息，我们也可以这里输入页面要执行的代码

第8步：此时我们发现所有的请求都被转发到了Charles上

OK，到这里spy-debugger + Charles进行移动端调试的接入流程就介绍完了，更多关于spy-debugger的功能和使用方法，可以参考spy-debuger的官方README

李元成