H5调试工具spy-debugger使用方法

背景：web端h5可使用浏览器自带的工具进行页面样式 布局等调试，但是移动端h5无法使用此方法。

应用场景：
移动端H5测试，Android/ios/ipad。

工具简介:spy-debugger 移动端h5调试工具（浏览器/嵌入app都可调试）内部集成了weinre、node-mitmproxy、AnyProxy； 无需usb连接 ；支持http/https；
安装：
本地需安装npm，新版NodeJS已经集成了npm 通过npm -v测试是否成功安装。

Windows 下npm install spy-debugger -g；Mac下sudo npm install spy-debugger -g；安装成功后，可看到spy-debugger文件夹。默认在哪个文件夹下运行npm，npm就在当前目录创建一个文件夹node_modules。

使用：
电脑wifi跟手机wifi同一个，电脑可以ping通手机。已尝试无线tal可以。最好确认电脑只有一个ip，关掉虚拟机和teamviewer等工具。
cmd里运行spy-debugger命令后，浏览器自动打开http://127.0.0.1:60551/，如图：

手机wifi里设置代理，ip为电脑ip，端口一般是9888。Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动；iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动。
手机安装证书： 手机浏览器访问http://s.xxx安装证书后信任，具体步骤同charles安装证书过程。注意：某些Android手机下载证书后，需手动安装：设置-其他设置-安全与隐私-从存储设备安装证书，搜索刚下载的证书安装即可；ios高版本手机需要在关于本机-证书信任设置 打开开关。手机连不同的电脑后，要重新安装证书。
用手机访问h5，浏览器访问h5后者app内嵌的h5，都可以调试。 手机连接成功后，浏览器里顶部菜单栏,：Remote可看到当前已连接的设备；Elements可查看前端html以及错误日志。
选中element后，手机会标识对应的元素。

还可以配合AnyProxy获取后端接口的请求，（同charles抓包）。

步骤b中运行命令spy-debugger -w true后，h5页面内容可编辑，进行页面样式展示测试。