日常小计-spy-debugger调试工具

github 地址

QQ图片20181220135454.png

背景：日常开发中，写的页面在开发工具和浏览器中显示正常但是到真机上就会出现各种问题，但是真机上又看不到报错信息，所以调试工具成了必不可少的工具。之前用的charles是挺好用的，可惜只能用来抓包，而spy-debugger除了抓包，还能直接在真机上调试页面，很是方便，

QQ图片20181220095827.png

但是在安装的时候遇到了很多问题（主要是ios遇到的），在这里记录一下。

安装--跟官网一样

Windows 下

npm install spy-debugger -g

Mac 下

sudo npm install spy-debugger -g

三分钟上手

第一步：手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）

本人的做法是：电脑连接无线网络（因为用的是台式电脑，所以要准备一个无线网卡，笔记本电脑的话请忽略）

QQ图片20181220100735.png
QQ图片20181220101929.png

手机也是

QQ图片20181220101135.png
微信图片_20181220101811.jpg

并保证电脑能够ping通手机

QQ图片20181220102038.png

第二步：命令行输入spy-debugger，按命令行提示用浏览器打开相应地址。

QQ图片20181220101344.png

第三步：设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)。

• Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
• iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动

设置的ip地址是上图中启动代理时看到的地址，端口也是

QQ图片20181220102257.png

第四步：手机安装证书。注：手机必须先设置完代理后再通过(非微信)手机浏览器访问http://s.xxx(地址二维码)安装证书（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)。iOS新安装的证书需要手动打开证书信任

这一步，主要，手机一定要设置代理后再扫描，否则无效。如果这一步发现设置了代理无法上网的情况，请检查手机和电脑是不是在同一网段（之前用电脑ping通手机ip就是为了防止这一情况）。本人安卓手机扫描二维码后可以正常下载证书，ios则会出现广告页。此时，ios可以复制http://spydebugger.com/cert地址用safari打开地址，安装证书，安装好后要在设置->通用->关于本机->证书信任设置-> 找到node-mitmproxy CA（打开）

QQ图片20181220134716.png

第五步：用手机浏览器访问你要调试的页面即可。

自定义选项--请移步官网