使用spy-debugger调试移动端webview

日常的web开发过程中，有时页面空白了，我们要看看是不是页面代码报错了导致渲染中断或有时样式不符合预期效果，我们又要看看是否受到附近的元素影响，这个时候把安卓设备连接电脑debug往往是一个有效快捷的好方法。
然而，并非每次问题都能通过上面这种方法解决，因为偶尔会有些ios设备上的特殊问题（大部分是样式上的）在安卓无法重现，在Mac上可以用Xcode或Safari调试，但是这些在Windows上就行不通了，这个时候最直接暴力就是用虚拟机装个MacOS，然后按Mac的调试方法进行，可Windows装MacOS的虚拟机还有很多准备工作要做，很耗费时间且装好的虚拟机对CPU和内存等配置要求高，亲测流畅度不算高，对调试体验也不太好，只好另辟蹊径。试着搜索其他方法（例如使用ios-webkit-debug-proxy）后，发现很多方法已经不兼容ios10+了，但现在常见的ios版本都到ios11了，又行不通。最终找到标题所写的spy-debugger这个工具。

安装spy-debugger首先要有node环境，不过既然有调试的需求了，node环境一般也有了。在有node的环境下，命令行执行

npm install spy-debugger -g

安装成功后，把需要调试的手机和电脑连到同一网络环境下，在命令行执行spy-debugger，此时会显示：

正在启动代理
本机在当前网络下的IP地址为：xxx.xxx.xx.xx
node-mitmproxy启动端口: 9888
浏览器打开 ---> http://127.0.0.1:50094

如浏览器没有自动打开最后一行提示的地址（本例中的http://127.0.0.1:50094），可自行复制到浏览器打开，打开后界面如下：
spy-debugger

此时给手机设置HTTP代理（这里为ios的方法，安卓类似）：设置 - Wi-Fi - 在连接的Wi-Fi右边点击感叹号进入 - HTTP代理 - 手动，填入调试的PC的IP地址以及上一步中命令行返回的node-mitmproxy启动端口: 9888
在确保代理填写正确后，在手机上使用safari访问http://s.xxx或扫描下方二维码安装SSL证书（调试https的网页需要）

安装完证书后，调试前的工作就基本完成了，此时打开需要调试的app（webview）或网页，可以看到spy-debugger的界面已经实时检测到：

当有多个webview时，可以选择需要调试的页面（高亮变成绿色）后，点击工具栏的Elements即可和浏览器中的查看元素的操作一致，同样支持实时修改样式等功能。

此外，工具栏上的剩余几个按钮与浏览器调试功能中的tab基本一致，例如Console页面同样支持输入输出指令等，就不赘言了。
除了页面调试，该页面左侧还有请求抓包页面可供切换，与Charles、Fiddler等抓包工具用法相近。值得一提的是，请求抓包页面其实是spy-debugger集成了AnyProxy（而页面调试页面则是集成了weinre），如果要单独使用及配置AnyProxy（例如AnyProxy默认不对https请求做处理，所以响应数据会是乱码显示，如需看到明文信息，需要配置证书），可以访问其官网了解并单独安装使用。
以上为简要介绍如何使用spy-debugger调试页面，实际上它可配置的地方还有不少，本文几乎没做任何配置上的修改，如果要关注更新或做更深入的了解，可以访问其github：https://github.com/wuchangming/spy-debugger