为何开始使用spy-debugger？
在开发过程中，我们的项目都是根据功能需求键一个开发的分支，等到了提测的时候，把分支合并到测试环境，测试通过再上线。基本这是一个统一的流程，
但是做移动端混合开发的时候，H5页面我们在本地开发的时候，在chrome中开启了移动端模式，基本上到手机上也不会有太大的问题。
但是上测试环境后，产品有的时候会需要改一些文案样式，每次遇到这种情况，临时改些东西都会先在本地的分支上改好，再合并到test分支然后编译上测试。
往往很多时候，在浏览器的移动模式下改的东西，上到真机上并不是完全一样，会出现很多适配等问题，spy-debugger调试工具，既能调试真机的页面，又能调试JS，还能抓包分。只需要给设备配置好本地的代理，然后我就可以在浏览器上修改真机的代码，还能看在真机上的效果，这样就大大提升了修改的效率。
关于spy-debugger
一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。
特性：
1.页面调试＋抓包
2.操作简单，无需USB连接设备
3.支持HTTPS。
4.spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5.自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
6.可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)
安装
Windows下
npm install spy-debugger -g
Mac下
sudo npm install spy-debugger -g
配置
第一步：手机和PC保持在同一网络下（比如同事连到一个Wi - Fi 下）。
第二步：命令行输入spy-debugger,按命令行提示用浏览器打开相应地址。
第三步：设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口（默认端口：9888）。
*Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
*IOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP手动代理
第四步：手机安装证书。注：手机必须先设置完代理后再通过(非微信)手机浏览器访问 http://s.xxx(地址二维码)安装证书（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)。iOS新安装的证书需要手动打开证书信任
第五步：用手机浏览器访问你要调试的页面即可。
调试
* 此时打开需要调试的app（webview）或网页，可以看到spy-debugger的界面已经实时检测到：
* 当有多个webview时，可以选择需要调试的页面（高亮变成绿色）后，点击工具栏的Elements即可和浏览器中的查看元素的操作一致，同样支持实时修改样式等功能。
此外，工具栏上的剩余几个按钮与浏览器调试功能中的tab基本一致，例如Console页面同样支持输入输出指令等。
