记一次Fiddler移动端抓包排查线上接口问题

一、背景

1.1、问题发生了

今天中午发现小程序端有一个属性设值错误问题，到线上查了一下已经有20条问题数据产生了。

于是乎，联系相关业务员修复数据，然后定位问题所在，修复并趁着中午业务员吃饭时间紧急部署上线。

1.2、上线后测试

问题修复后我们首先在测试环境做了操作回显，确认整个模块OK后部署线上，

然后使用线上测试账号再走一遍完整流程。

1.3、奇怪的问题发生了

一个获取客户地址数据列表的接口直接请求异常！

1.4、问题排查

由于是一个简单的数据请求接口，所以没有做Sys_log

异常信息也被全局异常处理吞掉了。所以插起来比较费事儿。

二、是问题终归要解决的

2.1、问题解决思路

① 首先，请求能够接收到回应，所以排除请求不通的推测

② 单元测试，放入我们mock的数据也能正常请求，所以推测后端出现问题的可能性不大

③ 小程序预览，真机调试也没有发现问题，故而推测，目前的小程序代码也问题不大

④ 那为什么联调没问题，到线上就有问题呢？说微信小程序环境问题也是比较滑稽

2.2、问题最终定位

首先前端OK，后端也OK，联调也没问题，但是一放到线上就出问题了。

那么真相只有一个，线上的小程序的整个操作链路和我们线下的测试操作不一致！！！

2.3、解决方案

按照正常的web端调试，我们按出F12查一下就可以直观查到了，但是线上小程序我还不能按F12调出控制台哈

那我们就只能是手机抓包了！！！

三、手机抓包解决问题

3.1、fiddler

之前在做中控考勤机驱动开发的时候也有操作过手机抓包，但是那时候用的是Wireshark来进行网卡抓包的。

那放到移动端我这边就选择使用Fiddler了。

3.2、关于fiddler

fiddler普遍适用于移动端数据抓包解决方案。关于fiddler的一些信息及下载，

建议参见其官网：https://www.telerik.com/fiddler

四、Fiddler使用全过程(V1.5.0为例)

4.1、下载并安装

这个没什么特别的说明，直接安装就可以了。

4.2、Fiddler中Https配置

PS: 可能会提醒你安装证书，这个直接点击安装即可

4.3、端口监听及连接配置

4.4、网关及代理配置

4.5、手机端安装fiddler的证书

PS: 电脑必须和手机在同一个网络环境下！

也就是说电脑要连接和手机相同的WiFi网络，台式机可使用无线网卡！

① 使用ipconfig命令查询到自己的IP。如：192.168.1.123

② 手机浏览器打开地址：电脑的IP地址 + 监听的端口号。

以上述为例，就是：http://192.168.1.123:8888

③ 手机下载并安装证书（注意：每个型号的手机在进行该操作时都不尽相同），如下图：

4.6、手机设置网络代理

PS: 在手机中点击连接的网路信息，开启手动代理并做以下配置

4.7、手机数据抓包成功展示

① 手机浏览器访问百度首页

② 手机App访问京东APP

五、解决线上问题

5.1、准备工作

上述准备工作已经做好，可以开始操作了！

5.2、遇到问题

无法抓取微信小程序的请求！！！

网上查了一下资料发现并不是我这边的问题，猜测是微信的安全机制

或证书验证导致无法被抓取（这个这里暂时不做过多考虑）

5.3、无法抓取小程序的解决方案

虽说此路不通，但是问题终归是要解决的！

查了一些资料最终找到了一个解决方案：在电脑端打开微信小程序就可使用fiddler进行抓包了

5.4、抓包操作概览

5.5、问题最终解决

是前后端做了接口修改，但是线上没有部署上去导致的。

那知道问题后后续的解决也就简单了很多了，这里就不赘述了！

六、后记

通过这件事，也暴露了一些问题，比如：

① 没做好版本控制

② 异常处理不够完善

...

这个就放在后续完善之中，到时有必要也会给出分享...

更多精彩请持续关注： guangmuhua.com