移动端调试和抓包，支持HTTP/HTTPS

为何开始使用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页面同样支持输入输出指令等。

除了页面调试，该页面左侧还有请求抓包页面可供切换，与Charles、Fiddler等抓包工具用法相近。值得一提的是，请求抓包页面其实是spy-debugger集成了AnyProxy（而页面调试页面则是集成了 weinre），如果要单独使用及配置AnyProxy（例如AnyProxy默认不对https请求做处理，所以响应数据会是乱码显示，如需看到明文信息，需要配置证书），可以访问其 官网了解并单独安装使用。