善用工具提效之fiddler使用与安装

海阔凭鱼跃，天高任鸟飞。好久不见！我是猫力Molly

背景：

在我们日常开发中，对于线上bug或者移动设备问题（小程序，app，公众号...）因为环境问题，设备问题等并不方便进行本地调试，项目出现bug或疑难杂症对定位问题并不友好。所以这个时候我们需要通过抓包的形式来查看网络请求，资源加载来协助我们快速排查问题与修复。fiddler这个抓包工具可以为我们解决此问题。

一、fiddler安装

官网地址：www.telerik.com/fiddler

新版Fiddler Everywhere要收费，我们下载fiddler Classic（只支持window）

安装完成后，打开软件，界面如下

二、fiddler使用

1、汉化fiddler

fiddler原版是英文的，通过替换语言包可以实现汉化。

汉化语言包：FiddlerTexts.txt

汉化配置文件：FdToChinese.dll

1. 打开fiddler安装目录，在根目录下面将FiddlerTexts.txt文件放进去
2. 打开fiddler安装目录的Scripts，将FdToChinese.dll文件放进去
3. 重启fiddler

2、设置https拦截

fiddler默认只支持http的请求抓包，要支持https还需要另外配置

1. 工具>选项>https

勾选ecrypt HTTPS CONNECTs第一次会弹出证书安装提示，若没有弹出提示，勾选Actions -> Trust Root Certificate

如果要监听的程序访问的HTTPS站点使用的是不可信的证书，把下面的Ignore server certificate errors勾选上

1. 证书安装

安装成功后，点击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或前端交流群和众多优秀的前端攻城狮一起交流技术，一起玩耍！