简介

​ 移动端调试一直都是一个痛点，因为移动终端对于我们来说是一个黑盒，它无法像 PC 端一样，我们可以通过 F12 很方便的调出开发者工具。在开发中经常会遇到同样一份代码在某个型号的手机上运行出现错误，其他手机都好好的，开发的时候 Chrome 上也没有报错。如果没有调试工具这种情况下我们就很难定位问题，接下来的主题就是介绍如何使用 spy-debugger + Charles 进行移动端调试。

安装

第 1 步：全局安装 spy-debugger

npm install spy-debugger -g

spy-debugger 证书

其实 spy-debugger 的代理是基于 node-mitmproxy 模块实现的，这里安装的证书其实是 node-mitmproxy 的证书，标题写 spy-debugger 证书是为了和 Charels 证书区分开来避免混淆。

电脑安装证书

第 1 步：在命令行中执行 spy-debugger 启动 spy-debugger 服务，启动成功后，检查你的用户目录（home 目录），会发现多了一个 node-mitmproxy 文件夹，这个文件夹内放的就是代理需要的证书。

我 Mac 电脑完整的路径是：/Users/jameswain/node-mitmproxy

第 2 步：在启动 spy-debugger 服务的电脑上安装证书，双击 node-mitmproxy.ca.crt 文件

第 3 步：双击 node-mitmproxy CA 选择为 始终信任

第 4 步：输入你电脑的用户密码

出现这个 + 号表示证书已经安装成功

IOS 手机安装证书

第 1 步：首先需要将 node-mitmproxy.ca.crt 上传到手机上，可以通过 live-server 在node-mitmproxy.ca.crt 文件所在的目录下启动这个服务。如果你还没有 live-server 命令，可以通过以下命令进行安装：

npm i -g live-server

在 /Users/jameswain/node-mitmproxy 目录下执行 live-server 命令

第 2 步：在手机浏览器上访问这个服务，输入我电脑的 IP 地址和端口进行访问，⚠️手机和电脑必须是连接同一个 WiFi 网络才可以访问。

点击 node-mitmproxy.ca.crt 文件进行下载安装

第 3 步：在手机的 设置 > 通用 > 描述文件与设备管理 找到node-mitmproxy CA 证书，并点击安装

输入手机锁屏密码：

选择安装

第 4 步：在手机的 设置 > 通用 > 关于本机 > 证书信任设置 将 node-mitmproxy CA 打开

此时，spy-debugger 的前期准备工作就已经全部完成了

Charles 证书

这里简单介绍一下 Charles 的证书安装，如果你已经是 Charles 的老手了，可以直接跳过。Charles如果不安装证书的话是无法抓 https 的请求的。

电脑安装证书

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

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

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

IOS 手机安装证书

第 1 步：点击 Charles 的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后会弹出一个对话框，告诉你手机要设置的代理 IP 地址和端口，⚠️注意：手机和电脑必须连接同一个 WiFi 才可以。

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

第 3 步：点击你当前所连接的 WiFi 网络

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

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

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

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

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

启动 spy-debugger

第 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:59365/client/

第 4 步：在京东 App 里随便找一个 H5 页面打开，或者在手机浏览器上打开 https://m.jd.com/

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

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

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

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

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