前端页面调试、抓包工具——spy-debugger

写在前面：

---

在以往的开发过程中，我所遇到的问题：公司项目是一个Hybird App，前端H5页面内嵌在APP里，完成开发后，进行联调的时候如果出现错误，很难定位到问题出现在哪里。因为在APP里，我不知道js代码执行到了哪里、看不到console.log输出、看不到接口的请求与相应。

以往联调遇到问题，我解决问题的思路：
(1)首先我会分析是接口问题，还是前端js代码的问题(有时候是真的不知道错在哪了)；
(2)如果是接口问题，就去找后台或者测试去查报文、日志，看看问题出现在哪里(但是别人也有忙的时候)；
(3)如果是js代码问题，自己会分析发生错误的代码大概是在哪一部分，然后会在那些代码里将一些相关的变量写入到页面或者使用弹出框弹出，然后逐一排查(老是改来改去、写入页面、弹出弹窗也很烦人的)；
(4)还有一种方法就是用PC端谷歌浏览器直接打开测试环境H5页面，用控制台来调试(一些与原生APP需要交互的内容无法调试、自己要生成一堆参数去拼接然后模拟登录状态，反正也不是很方便)。
总之，有时候遇到那种不好定位的问题，解决起来也是要费点功夫的。

本文的重点来了——spy-debugger：针对上面提出来的那些问题，我抱着试一试的心态在npm官网找了找，然后就看到了spy-debugger，介绍说是一站式页面调试、抓包工具。然后自己立马下载，上手使用，感觉比以往那种方式省事太多了。

---

1. 关于spy-debugger

一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。
spy-debugger详细介绍：https://www.npmjs.com/package/spy-debugger。

2. 安装

Windows 下(最好是使用管理员权限安装，npm安装包错的话，使用淘宝镜像cnpm安装)

npm install spy-debugger -g

3. 快速上手

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

第二步：在命令行输入spy-debugger，按命令行提示用浏览器打开相应地址，一般会自动打开浏览器；

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

Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动；

第四步：手机安装证书。注：手机必须先设置完代理后，再通过(非微信)手机浏览器扫码访问安装证书（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)；

(1) 扫码安装证书的网址:https://github.com/wuchangming/spy-debugger/blob/HEAD/demo/img/QRCodeForCert.png；

(2) 如果该链接无法正常安装，可以去 spy-debugger详细介绍：https://www.npmjs.com/package/spy-debugger里找安装证书的地址。

(3) 一定是设置完代理后，再去扫码安装。我是设置完代理后关掉了无线，使用流量去扫码安装，会进入到别的无关页面，无法进行安装；

(4) 安装完之后会有弹窗让你为该证书命名，随便写一个就行，有的手机还会弹出是否信任该证书，要选择信任，否则不能正常使用。

第五步：用手机浏览器访问你要调试的页面即可(或者说打开APP里你的H5页面就可以了)。

4. 界面介绍

页面调试：根据自身需求使用

请求抓包：根据自身需求使用

5. 继续探究

自定义选项等更多内容，请访问spy-debugger详细介绍：https://www.npmjs.com/package/spy-debugger。

写在最后：

spy-debugger这个工具上手简单，目前已经能满足我页面调试、抓包一些简单的操作了。这个工具更高大上的用法，或者说一些别的更好用的调试、抓包工具等后期开发过程中有需要了我再上手吧。