与后端数据通信是前端日常开发的重要一环,在与后端接口联调的时候往往需要通过查看后端返回的数据进行调试。如果在PC端,Chrome自带的DevTools就已经足够用了,Network面板可以记录所有网络请求,查看接口数据非常方便。但是在移动端就不能这样干了,手机上是无法直接查看网络请求数据的,这时候就需要一个能记录网络通信的工具,也就是抓包工具。来来回回尝试了好几个,Fiddler算是用起来最爽的了:)
Fiddler是一个免费的web调试代理,它能够记录、查看和调试所有连接上的终端和远程服务器之间的http/https通信。闲话少叙,直接说如何调试手机上的页面。
在电脑上安装Fiddler之后,需要进行一些简单的配置才能对手机上的网络通讯进行捕获。
如果想要捕获手机上的通信数据,首先需要手机连接上Fiddler代理,而Fiddler默认是不允许其他设备进行连接的,点击 Tools > Options...,在 Connections 面板选中 Allow remote computers to connect 允许其他设备连接(此操作需重启Fiddler生效),
然后在手机上连上Fiddler代理,贴上一张IOS配置代理截图:
好了,现在Fiddler已经可以捕获手机页面上的http通信了。但是会发现捕获了很多 Tunnel to 的会话,这是怎么回事呢?原来这些都是https请求,而https是加密传输的,Fiddler默认是不对https进行解密的,如果想对https进行捕获,需要继续进行配置。
首先配置Fiddler对https进行解密,点击 Tools > Options...,在 HTTPS 面板选中 Decrypt HTTPS traffic 解密https通信(此操作需重启Fiddler生效),
然后在手机上需要安装Fiddler根证书,因为Fiddler是通过自己生成的证书对网络请求重新签名进行https会话解密的。证书的安装方法就是在手机自带浏览器中访问FiddlerServer地址(比如10.200.8.155:8888),会出现 Fiddler Echo Service 页面,下载并安装 FiddlerRoot certificate,
经过这两步设置之后,Fiddler就可以捕获手机与服务器之间的所有http/https通信了。