移动端调试一直是个痛点，因为移动端对我们来说是一个黑盒子，不能像PC端那样，通过F12developer就可以轻松调用出来工具。开发中经常遇到同样的代码在某款手机上跑错，而其他手机没问题，开发时在Chrome上没有报错。如果没有调试工具，我们很难定位到问题所在。下一篇介绍如何使用spy-debugger+Charles进行手机调试。安装第一步：全局安装spy-debuggernpminstallspy-debugger-gspy-debuggerCertificate实际上，spy-debugger的代理是基于node-mitmproxy模块实现的。这里安装的证书其实是node-mitmproxy的证书，标题写成spy-debugger证书是为了和Charels证书区分开来，避免混淆。电脑安装证书第一步：在命令行中执行spy-debugger，启动spy-debugger服务。启动成功后查看你的用户目录（home目录），你会发现多了一个node-mitmproxy文件夹。这个文件夹里面放置了代理需要的证书。我的Mac电脑完整路径为：/Users/jameswain/node-mitmproxy步骤二：在启动spy-debugger服务的电脑上安装证书，双击node-mitmproxy.ca.crt文件步骤三：双击-点击node-mitmproxyCA选择始终信任第四步：输入你电脑的用户密码，出现这个+号，说明证书已经安装成功。IOS手机安装证书第一步：首先需要将node-mitmproxy.ca.crt上传到手机，可以通过live-server在node-mitmproxy.ca.crt文件所在目录启动服务位于。如果没有live-server命令，可以通过以下命令安装：npmi-glive-server在/Users/jameswain/node-mitmproxy目录下执行live-server命令步骤二：访问这个在你的手机浏览器服务上，输入我电脑的IP地址和端口即可访问，??手机和电脑必须连接到同一个WiFi网络才能访问。点击node-mitmproxy.ca.crt文件下载安装第三步：在手机的设置>通用>描述和设备管理中找到node-mitmproxyCA证书，点击安装输入手机锁屏密码：选择安装第4步：在“设置”>“通用”>“关于本机”>“证书信任设置”中，打开node-mitmproxyCA。至此，spy-debugger的准备工作已经完成。Charles证书这里简单介绍一下Charles证书的安装。如果你已经是Charles老手，可以直接跳过。如果Charles不安装证书，他将无法捕获https请求。电脑安装证书第一步：点击Charles'Help>SSLProxying>InstallCharlesRootCetificate会弹出证书安装页面，将Charles的证书设置为始终信任：第二步：点击Charles'Proxy>AccessControlSettings配置手机时手机连接到座席，无需点击允许连接确认操作。以上配置表示允许任何IP的设备连接代理服务，不会出现连接确认对话框。IOS手机安装证书第一步：点击Charles'Help>SSLProxying>InstallCharlesRootCetificateonaMobileDeviceorRemoteBrowser然后会弹出一个对话框，告诉你要在手机上设置的代理IP地址和端口手机，??注意：手机一定要和电脑连接同一个wifi。Step2：根据提示在手机上配置Wi-Fi网络代理，点击手机设置>无线局域网Step3：点击您当前连接的WiFi网络Step4：向下滑动，点击配置代理，选择手动，服务器和端口，输入Charles对话框中显示的IP和端口号，配置完成后记得点击保存。第五步：在Safari浏览器中输入chls.pro/ssl下载并安装证书。第六步：在手机的设置>通用>配置文件和设备管理中找到CharlesProxyCA证书，点击安装。第七步：在手机的设置>通用>关于本机>证书信任设置中启用CharlesProxyCA至此，Charles的所有准备工作就完成了，接下来我们就可以启动spy-debugger进行手机H5调试了。启动spy-debugger第一步：启动命令//启动spy-debugger服务spy-debugger也可以使用-e参数设置Charles为外部代理服务//启动spy-debugger服务并设置外部代理为Charles的服务spy-debugger-ehttp://127.0.0.1:8888上面命令的意思是启动spy-debugger调试服务，将所有资源请求转发给Charles的代理服务。其实我们打开Charles程序的时候其实是在本地启动了一个http服务，监听8888端口。第二步：在手机上设置代理服务器和端口为spy-debugger的IP和端口：第三步：打开浏览器http://127.0.0.1:59365/client/第四步：在京东App随便找一个H5页面打开，或者手机浏览器打开https://m.jd.com/。第五步：此时在浏览器的Remote选项卡上可以看到，连接的终端已经连接上了。第六步：我们可以在Elements选项中选择和调试页面元素。我们可以发现，当我们将鼠标放在元素上时，选中的效果会在手机端实时看到。第七步：我们还可以在Console选项卡Information下查看代码的控制台输出，我们也可以在这里输入页面要执行的代码。第八步：至此，我们发现所有的请求都已经转发给了Charles。OK，手机调试的spy-debugger+Charles的接入流程介绍到这里。关于spy-debugger的更多功能和使用，请参考spy-debugger官方README
