使用Fiddler抓包和调试移动web页面
轩枫发表于 2015-10-25 05:17:18
前言
本文将介绍如果通过Fiddler，将移动端访问的请求代理至PC机（即抓包），便于开发和调试移动web页面。
常用于：查看请求、使用本地资源文件直接调试线上网页、更改页面参数、H5开发及bug调试。
原理图
简单说明
- 手机和PC接入同一个网络，通常是同一个wifi（可以用PC创建一个wifi，工具如：全民wifi、无线网卡）
- 打开Fiddler中的网络监听，端口设为8888
- 将手机的网络代理服务器设置为PC的IP，端口设为8888
- 通过手机的http请求都会经过Fiddler，于是我们可以根据需要设置该请求是用本地文件代理或者直接请求服务器，并能看到http请求
具体教程
设置Fiddler
- 打开Fiddler，执行菜单栏 Tools -> Fiddler Options 打开设置界面
- 切换到Connections选项卡，如图设置和勾选
- 如果要捕获https的请求，切换到HTTPS选项卡，勾选对应的选项
获取PC的IP地址
方法一
鼠标hover至Fiddler右上角的网络图标，查看本机IP，如图：192.168.1.107。注意，连上同一wifi后，需手机和PC在同一IP段内才能正常抓包。
方法二
- 打开命令行工具，运行 ipconfig
- 无线局域网的IP地址，即我们需要的地址，这里是 172.27.23.1
设置iPhone代理
- 设置 -> 无线局域网，点击当前连接的wifi
- 滚动到HTTP代理栏，选择 “手动”，服务器填写PC的IP地址，端口号填写在Fiddler中设置的端口号，即8888
设置Android代理
- 设置 -> WLAN，长按当前连接的wifi，点击修改网络
- 勾选“显示高级选项”，代理选择手动，代理服务器主机名填写PC的IP地址，代理服务器端口设为8888，点击保存
运行截图
如果一切顺利的话，通过手机访问网页，就能在Fiddler看到访问的请求。
抓HTTPS的数据包
对于特别注意信息安全的企业，可能会用到 HTTPS 的方式来加载网页。比如手机上访问 企业号官网 抓包效果如图：
只能看到请求，但是看不到具体的内容，需要做以下配置：
- 安装 CertMaker for iOS and Android 用来抓HTTPS的数据包；
- 打开Fiddler，点击菜单栏上的 Tools – Fiddler Options – HTTPS,勾选上Decrypt HTTPS traffic ，然后重启Fiddler；
- 打开手机，访问本机IP+8888，例如：192.168.1.107:8888, 点击 You can download the FiddlerRoot certificate 按照提示，在手机上安装证书，重启手机浏览器。
再访问企业号官网：https://qy.weixin.qq.com，完成！
