海阔凭鱼跃，天高任鸟飞。好久不见！我是猫力Molly
背景：
在我们日常开发中，对于线上bug或者移动设备问题（小程序，app，公众号...）因为环境问题，设备问题等并不方便进行本地调试，项目出现bug或疑难杂症对定位问题并不友好。所以这个时候我们需要通过抓包的形式来查看网络请求，资源加载来协助我们快速排查问题与修复。fiddler这个抓包工具可以为我们解决此问题。
一、fiddler安装
新版Fiddler Everywhere要收费，我们下载fiddler Classic（只支持window）
安装完成后，打开软件，界面如下
二、fiddler使用
1、汉化fiddler
fiddler原版是英文的，通过替换语言包可以实现汉化。
汉化语言包：FiddlerTexts.txt
汉化配置文件：FdToChinese.dll
ps：掘金不能上传文件，想要的同学可以私信我
- 打开fiddler安装目录，在根目录下面将FiddlerTexts.txt文件放进去
- 打开fiddler安装目录的Scripts，将FdToChinese.dll文件放进去
- 重启fiddler
2、设置https拦截
fiddler默认只支持http的请求抓包，要支持https还需要另外配置
- 工具>选项>https
勾选ecrypt HTTPS CONNECTs 第一次会弹出证书安装提示，若没有弹出提示，勾选Actions -> Trust Root Certificate
如果要监听的程序访问的HTTPS站点使用的是不可信的证书，把下面的Ignore server certificate errors勾选上
- 证书安装
安装成功后，点击Actions -> open windows certificate Manager查看证书
3、移动端抓包配置
a、设置远程连接
fiddler默认端口是8888，我们可以自由设置
勾选Allow remote computers to connect，允许远程设备连接；为了减少干扰，可以去掉Act as system proxy on startup
b、手机上安装fiddler代理证书
- 这里需确保手机和电脑处于同一个网络下
-
- 手机和电脑连接同一个wifi
- 电脑打开热点，手机连接电脑热点
- 手机上设置手动代理，主机名是电脑的ip，端口是fiddler设置的端口
- 完成以上步骤之后，手机上打开浏览器访问代理的主机名+端口（例如：192.168.137.1:10001）,会看到fiddler提供的一个页面，然后点击证书下载并安装即可
- 重启fiddler，开始抓包调试
三：一些常用的功能介绍
1、界面一览
2、请求统计
通过该功能我们可以查看各个资源文件，请求的加载时长，通过饼图可以可以查看的更清晰，可以针对性的对一些长耗时的资源做出优化
3、请求编辑
可以模拟发送请求，支持更改接口入参，设置请求头，请求协议等，对于调试线上问题特别方便
4、时间轴
支持选中查看接口或资源从服务端到客户端的整体耗时，已瀑布流的方式呈现出来
5、排查wss连接问题
websocket发出的请求前面会有一个"ws"的图标，右侧选择"websocket"栏目可查看到请求的上行和下行反馈。一旦长连接断开重新建联，会话列表则会多一条新的ws会话
6、自动转发
该功能可以允许将网络资源代理到本地或者网络资源相互替换。如下图，配置好规则，将宜宾B2C登录页面的背景图通过代理换成了本地图片
四：tips
- 不知道设置什么ip代理地址的话，可以右上角看"网络信息"
感谢
欢迎关注我的个人公众号前端有猫腻每天给你推送新鲜的优质好文。回复 "福利" 即可获得我精心准备的前端知识大礼包。愿你一路前行，眼里有光！
感兴趣的小伙伴还可以加我微信：猫力molly或前端交流群和众多优秀的前端攻城狮一起交流技术，一起玩耍！