前端抓包指南

背景

h5 页面与原生 app 的交互需要与原生打通登录态，以及调用原生app 的接口。跟微信小程序开发不同，本地开发时微信有提供微信开发者工具，可以本地模拟调用。但这边h5需要每次都打包静态文件，上传服务器才能调试，非常麻烦。通过抓包工具比如 whistle 就可以做到拦截线上页面请求数据，再响应本地代码，本文主要讲述抓包的原理和抓包工具 whistle 使用。

PC端准备工作

1.运行以下命令安装whistle

sudo npm install -g whistle

2.安装后，运行

w2 help

如果有如下提示说明whistle安装成功

以下是whistle常用的几个命令

开始：w2 start
重新开始：w2 restart
停止：w2 stop
调试方式：w2 run

3.启动whistle

运行以下命令启动whistle

w2 start

4.在浏览器输入以下地址

http://127.0.0.1:8899/

切换到network面板，这里待会就是我们查看http请求的地方

到这里，PC端的准备工作就做好了，接下来我们要在手机上做一些处理

手机端准备工作

手机端根据IOS和Android的不同，处理过程会稍微有些不同，但大体操作过程是一样的，都是由两个步骤组成：

1. 设置代理
2. 安装证书

下面就来分别介绍下

注意：代理开启后浏览器的功能可能无法使用了，如果有网络应用（如小程序）需要下载的话，在代理开启前需要提前下载好并且打开

IOS

1.设置代理

先点击自己连接的WiFi

再点击配置代理

进入配置详情页后选择手动，在服务器一栏输入本机IP地址，端口输入8899，然后点击存储

2.安装证书

进入我们之前打开的whistle页面，点击HTTPS，会弹出证书，用手机扫描它然后安装二维码

http://127.0.0.1:8899/#network

扫码下载证书

必须要配置代理后，才能扫码下载，否则会提示你网页无法访问哦。

点击设备管理

安装它

3.抓个包看看

OK,准备工作到此结束，下面我们只要在我们自己开发的手机应用中进行操作，http请求就可以被桌面的whistle界面补获啦

注意：配置代理会影响浏览器浏览网页的功能，如果你有应用需要下载需要提前下载并打开

Android

Android机器的操作也是类似的，同样是分两步：配置代理和安装证书

这里我只简单描述过程，具体大家自行操作了

1. 连wifi，右击，修改网络
2. http代理，选择手动，服务器填写电脑本机IP（ipconfig,ifconfig），端口填写8899
3. 在whistle交互界面点击https下载证书，手机扫码下载，然后安装（可在设置搜索框中搜索证书）
4. 在手机端操作应用发出请求，在PC端whistle界面就可以看到捕获的请求