前端必会的抓包工具【收藏+关注】

抓包工具有哪些

比较熟悉的是
Mac上用Charles,Windows上用Fiddler。
关于这两者的安装使用教程实在太多了，本文不做赘述，今天我给大家介绍一款集合了抓包和H5页面调试的工具spy-debugger。

关于spy-debugger

一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。

安装

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

npm install spy-debugger -g

快速上手

第一步：手机和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页面就可以了)。

继续探究

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