前端页面调试、抓包工具——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
1
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这个工具上手简单，目前已经能满足我页面调试、抓包一些简单的操作了。这个工具更高大上的用法，或者说一些别的更好用的调试、抓包工具等后期开发过程中有需要了我再上手吧。
————————————————
版权声明：本文为CSDN博主「W-三斤」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_37856861/article/details/83384098