2
如果你是一名前端开发或者测试人员,那么fiddler绝对是最值得掌握的工具之一。fiddler是最强大的web调试工具之一,他能记录所有客户端和服务器的http/https请求以及响应,允许你监视,允许你设置断点调试,甚至篡改请求和响应。

一、Fiddler的工作原理

Fiddler在浏览器与服务器之间建立一个代理服务器。Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1, 端口:8888. 当Fiddler退出的时候它会自动注销,这样就不会影响别的程序。

工作原理

二、Fiddler的使用场景

1、开发环境的host配置;

2、前后端接口联调

3、定位线上bug——将发布文件代理到本地,快速定位线上bug;

4、性能分析和优化——Inspectors 、Timeline

三、Fiddler的安装及配置

fiddler没有手机客户端,都是安装在PC上,要实现对手机上的程序抓包,则需要对PC上的fiddler和手机端做一些配置。步骤如下:

前提条件:

1).测试手机需要支持Wifi

2).测试手机与电脑需要同一网络

### (1) 电脑下载Fiddler

官网: http://www.telerik.com/feddler

下载地址: https://www.telerik.com/download/fiddler

Fiddler下载

(2) PC端Fiddler配置

允许监听https

打开Fiddler Tool->Fiddler Options->HTTPS 。

勾选上Capture HTTPS CONNECTs(捕获 HTTPS 连接)、 Decrypt HTTPS traffic (HTTPS 请求解密)和 ignore server certificate errors(忽略服务器证书错误

允许监听https

安装证书(首次使用无证书,会弹出是否信任fiddler证书和安全提示,直接点击yes就行),重启Fiddler生效。

安装证书

注意:

有时候没有弹窗安装证书或根本就没有提示,这种情况一般在Win7中较多出现,Win7的系统https方面 在.net Framework4.0上有bug

解决方案是:

cmd 命令行   找到fiddler的安装目录  如:

cd C:\Users\JayshSoft\AppData\Local\Programs\Fiddler   //fiddler的安装目录

然后执行以下命令

makecert.exe -r -ss my -n "CN=DO_NOT_TRUST_FiddlerRoot, O=DO_NOT_TRUST, OU=Created by http://www.fiddler2.com" -sky signature -eku 1.3.6.1.5.5.7.3.1 -h 1 -cy authority -a sha1 -m 120 -b 22/11/2020

 
注意:这个命令最后的日期 22/11/2020  一定要大于现在的日期 否则创建证书是过期的
 
这样执行完之后 再去重新配置一次 就可以正确安装证书了。


#### 允许手机远程连接

点击 Fiddler->Tools -> Options,在 Connections 面板选中 Allow remote computers to connect 允许其他设备连接(此操作需重启Fiddler生效)。

“fiddler listens on port:”默认为8888,如你本机电脑的端口8888已被占用,那填写一个未被占用的端口

允许手机远程连接

查看电脑ip地址

通过cmd命令行输入ipconfig查询

查看电脑ip地址

或者将鼠标置于fiddler右上角的online中即可显示电脑的ip地址。

查看电脑ip地址

(2) 手机端配置

将 Fiddler 代理服务器的证书导到手机上才能抓这些 APP 的包。

导入的过程:打开浏览器,在地址栏中输入代理服务器的 IP 和端口(即电脑的IP加fiddler的端口),会看到一个Fiddler 提供的页面,然后确定安装就好了

代理服务器的证书

打开手机的 设置 —> WlAN ,选择连接的wifi(必须保证PC端与移动端在同一个网段中)。

长按该wifi,然后选择“修改网络”,然后勾选“显示高级选项”,选择手动代理设置,主机名填写Fiddler所在电脑的ip,端口填写Fiddler端口,默认8888,保存即可。

手机端配置

配置完发现手机浏览器其他网址不可上网,可以在“对以下网址不使用代理” 处填写相关网址 及可对相关网址上网

四、Fiddler的使用

(1) 视图功能区域

会话的概念:一次请求和一次响应就是一个会话。

  • fiddler主界面

fiddler主界面

快捷功能区中常用几项解释

快捷功能区

  • 快捷功能区

1:给会话添加备注信息

2:重新加载当前会话

3:删除会话选项

4:放行,和断点对应,后面详细讲解

5:响应模式。也即是,当Fiddler拿到远程的response后是缓存起来一次响应给客户端还是以stream的方式直接响应。

6:解码。有些请求是被编码的,点击这个按钮后可以根据响应的编码格式自动解码。

7:查找会话。

8:保存会话。

9:截屏。截屏后,会以会话的方式返回一个截图。

  • 会话列表

会话列表

会话列表

#栏图标说明

栏图标说明

(2) 篡改请求

在测试时,你一定会遇到这样的情况,请看下面的表单(使用“http://ip.360.cn/#/ipquery”网页进行说明):

ip错误

这个表单我现在输入了一个错误的ip地址,结果前端就已经抛出了ip地址错误的问题,限制我点击“查询”按钮,但我还就想知道当前端不做限制时,直接给服务端提交一个错误的ip,看看服务端能不能处理,那我该怎么办呢?

用fiddler。首先打开fiddler,选中Rules->Automatic Breakpoints->Before Requests,或者直接点击fiddler左下角,直到出现红色的向上箭头(表示请求过程中设置了断点,客户端发出的请求被fiddler拦截了),如下图:

红色的向上箭头

红色的向上箭头

然后,我们把表单改成正常的ip地址如“202.106.212.255”,然后点击查询。
查询后发现页面没有响应,这时候看fiddler,发现ip.360.cn/IPQuery/ipquery这个请求的签名也有一个红色的上传箭头,表示我们已经成功拦截了这个请求。这时候,我们在左侧点击这个请求,在右侧Inspectors->TextView或者Inspectors->WebForms界面下会看到请求发送的具体内容:

发送的具体内容

我们点击红框标注的value地方,把ip修改成“202.106.212.256”,然后点击另一个红框标注的“Run to Completion”,这时候可以看刚才的页面了:

发送的具体内容

发送的具体内容

选择json看后端返回的内容

发送的具体内容

这时候我们就可以说,不仅前端,原来服务端对ip地址也是有校验的。

在fiddler的“Run to Completion”按钮的左边,还有一个按钮叫“Break on Response”,这个按钮是干什么的呢?

顾名思义,刚才的“Run to Completion”指的是直接运行到这个session结束,而“Break on Response”是指在返回时再次截获返回数据。

好了,这就是基本的篡改请求的小例子,希望大家看了后可以在工作中用到。

可能有同学会问了,你这样操作,直接截获了所有的请求,如果我只需要截获一个特定请求,而其他请求我都放行,这该怎么办呢?这就属于fiddler的命令行高级用法了,先透漏一下,使用bpu命令就可以,后续我们再介绍。

(2) 篡改返回

刚才咱们篡改的是请求内容,那能不能篡改返回内容呢?比如说,刚才ip查询输入框的下面是它的返回,标明了这个ip的地址以及运营商,那如果我想构造一个很长的返回,用来看看当返回数据很长时前端页面会不会变形呢?

还用刚才的例子,我们先把fiddler设置成这样:选中Rules->Automatic Breakpoints->After Responses,或者点击fiddler左下角,直到出现向下的红色箭头(向下箭头表示返回过程中被fiddler拦截),如下:

向下的红色箭头

然后,我们提交一个正常的ip,如“202.106.212.255”,然后点击查询。

现在,前端页面仍然没有响应,这时候我们打开fiddler,看到了这个请求的返回值如下:

返回值

可以看到,返回的是一个json数据结构,其中的data的值就是要显示在页面上的数据。修改下这个data值为很长的数据:

<!-- 修改返回值 -->

发现前端页面把我返回的很长的数据给截断显示了。

以上就是篡改返回的一个小例子,同样希望读者能用到实际工作中。

(3) 命令行

fiddler的命令行用于筛选以及操作所有的session,功能非常强大。命令行的位置就在左下角的黑框。下面我们就来介绍一下有哪些好用的命令。

  • ?sometext命令

当您在命令行键入?再跟上一个字符串后回车,fiddler会高亮显示当前session列表中url包含该字符串的session。该命令用于查找特定请求或响应非常方便。比如:

?.png
该命令会选择所有后缀为png的图片的会话。

  • 选择会话列表中大于或小于特定大小的会话

例如,查找会话列表中大于10k的session:>10k或者>10000
如果不带k,则单位是字节。查找小于的时候,只需要把大于号替换为小于号即可。

  • 查找特定返回状态码的session

键入=200,则查找所有返回码为200的session

  • 查找使用了特定方法的session(例如GET或POST)

键入=get,高亮显示get请求和响应。

  • 选择特定host的session

键入@image.baidu.com,则查找fiddler界面中Host栏为image.baidu.com的session

  • 预先设置会话加粗

我们可以使用bold sometext命令来预先设置之后的url中出现了sometext的session。

如:bold image.baidu.com设置该命令后,以后url中包含image.baidu.com的session将全部加粗加黑显示。想要清除该指令,只需再次键入bold,即不带参数的bold即可。

  • bpu somestring命令

bpu命令对包含指定字符串的URI创建请求断点,每次设置一次就会把之前设置的全部清除,并且如果不带参数,则会清除所有请求断点。
举例如下:

bpu /index.php

该命令会在每个/index.php请求发生时设置断点。还记得之前说的“只截获部分请求”的需求吗?就用这个命令就可以了。

  • bpafter somestring命令

bpafter命令对包含指定字符串的URI创建响应断点,每次设置一次就会把之前设置的全部清除,并且如果不带参数,则会清除所有响应断点,用法如下:

bpafter /favicon.ico

在返回favicon.ico资源时会设置断点。

  • bps命令

即“breakpoint status”,会中断与设置的状态码相匹配的响应,如:

bps 404

fiddler的命令基本都是带参数时设置,不带参数时取消设置。

  • bpv或者bpm命令

这两个命令都是对指定的http方法创建断点,没有任何区别,如:

bpm get

会对所有get请求设置断点。

  • clear命令

该命令清楚所有session列表中的session,与‘Ctrl+x’功能相同,建议大家还是用快捷键。

  • dump命令

保存当前所有session到本地

  • urlreplace oldStr newStr

该命令可以把url中oldStr替换为newStr,例如:

有一个session,url为“www.haosou.com/?src=so.com”,

我执行以下命令:

urlreplace src=so.com src=baidu.com

再次刷新页面,则发现url变成了“www.haosou.com/?src=baidu.com”。至于使用场景,可以自己想象以下。

  • select MIME

选择Content-Type头中包含指定字符串的session,这个命令可以用来选择文件格式,如:

select image

该指令会高亮所有图片session;

select js

该指令会高亮所有js请求响应。

(4) 模拟慢网速

有时候,我们想看一下在网速慢的情况下,我们的web页面到底表现如何,页面的一个渲染情况如何,但无奈公司网络太快,怎么办?这时候,fiddler也绝对可以满足你的需求。因为fiddler是一个代理,咱们之前介绍过fiddler可以截获请求和返回,那也绝对可以延迟请求数据的上传过程或者延长返回数据的下载过程,从而达到限制网速的作用。下面我们就来一步一步看下怎样限制网速。

首先点击Rules->Customize Rules,搜索找到“m_SimulateModem”这个地方,代码如下:

if (m_SimulateModem) {
    // Delay sends by 300ms per KB uploaded.
    oSession["request-trickle-delay"] = "300"; 
    // Delay receives by 150ms per KB downloaded.
    oSession["response-trickle-delay"] = "150"; 
}

第一个数值设置的是请求上传过程中的延迟;第二个数值是返回下载过程中的延迟,比如,我把第一个数值的300(单位是毫秒)换成2000,然后保存,保存后,点击Rules->Performance->Simulate Modem Speeds进行勾选,然后就可以随便打开一个网页测测到底有没有变慢了。是不是确实变慢了呢,哈哈。

(5) 作为接口测试工具

fiddler的另外一个强大作用就是,可以当成接口测试工具,来发送任意形式的请求。我们就以一个最简单的GET请求为例来看看。

fiddler右侧有一个Composer选项卡,这个功能就可以用来发送http请求。如下图:

fiddler发送请求

我们发送一个GET请求,url是https://api.github.com/events,并且在发送的header中输入

User-Agent: Fiddler
然后点击右侧的Execute,就可以发送成功了。发送后,在左侧的session列表会有我们刚才发送的请求,双击该session后,在右侧下方的response窗口就可以看到返回内容啦!

(6) session过滤器:Filters

有时候,我们只需要关注某一个域名下,或者某一个软件的请求与响应,但是fiddler如果不做任何设置的话,是默认抓取本机所有软件与服务器的交互情况的,为了不让无关的session分散我们的注意力,我们可以设置fiddler只抓取某种特定的session

session过滤器

首先我们点击fiddler窗口右侧的“Filters”,勾选标2位置的“Use Filters”,然后在标3位置的下拉列表中选择“Show only the following Hosts”并输入“*.360.cn;”,表示我们只想关注域名后缀是360.cn的session,保存后,我们可以测试一下,打开百度,发现fiddler并没有记录任何session,但是打开360.com,发现session就出来了。

Filter功能很强大,刚才只是通过域名举个小例子,它还可以完成诸如只展现内网ip的请求响应、只展现特定软件的请求响应、header匹配任意规则的请求响应等等等等,等待你去探索。

(7) 自定义session列

fiddler左侧的session列有Result、Protocol、Host、URL、Content-Type等等,但有时候我们可能会遇到这样的场景:我需要知道当前请求与应答服务器的ip,那么,如果给fiddler添加一列“ServerIP”,每一个session都会显示ip,那自然是再好不过了。恰好fiddler就提供这样的功能:

打开Rules->Customize Rules,然后查找字符串static function Main(),在其方法体的最后添加如下一行:

FiddlerObject.UI.lvSessions.AddBoundColumn("ServerIP", 120, "X-HostIP");

整个方法的代码就变为如下:

static function Main() {
        var today: Date = new Date();
        FiddlerObject.StatusText = " CustomRules.js was loaded at: " + today;

        // Uncomment to add a "Server" column containing the response "Server" header, if present
        // UI.lvSessions.AddBoundColumn("Server", 50, "@response.server");

        // Uncomment to add a global hotkey (Win+G) that invokes the ExecAction method below...
        // UI.RegisterCustomHotkey(HotkeyModifiers.Windows, Keys.G, "screenshot"); 
        FiddlerObject.UI.lvSessions.AddBoundColumn("ServerIP", 120, "X-HostIP");
}

设置完毕,重启fiddler,随便访问一个网址看看效果吧!

自定义session列

(8) 文本编码转码工具TextWizard

有时候,我们想知道类似“u5317u4eac”这样的unicode字符串是什么含义,也可以用fiddler把他们翻译一下:
打开Tools->TextWizard,会出现输入框,如下:

textwizard.png

翻译得知,这是“北京”两个字。

还可以进行URLEncode与Decode,例如“https://www.baidu.com/s?wd=%E...”可以被URLDecode为
https://www.baidu.com/s?wd=你好”。

textwizard

当然,还可以进行Base64的编解码以及其他加密解密算法。

(9) AutoResponder替换响应

有时候,我们可能会有这样的需求:线上的某个js有问题,需要修复一下,那么修复后,我需要验证正确后才能上线,怎样验证呢?我可以用fiddler设置一个规则,当线上请求a.js的时候,我把a.js用本地已经修复过的b.js来代替,看看是不是正确修复了,测试正确后,我就可以直接把该修复后的js推上线就可以了;或许,您还可能遇到这样的问题:一个手机app中有一个按钮,点击按钮后会跳转到“http://www.baidu.com”,但我测试时,可能需要改变这个跳转地址为“http://www.haosou.com”,怎么办呢?同样可以用fiddler的AutoResponder功能把访问的链接替换掉就可以了。

接下来,我要访问360好搜的url,然后让它打开的却是百度。

首先,我们在fiddler右侧选中“AutoResponder”选项卡,进行如下的设置:

textwizard
可以看到,我们在AutoResponder选项卡的界面中添加了一条规则(Rules),界面中是这样显示的:

If request matches “http://www.haosou.com” , then respond with “http://www.baidu.com”,只要匹配到了好搜的url,那么就替换为百度来作为响应。接下来,可以访问下好搜试试了,出来的绝对是百度。

五、参考资料

[ 1 ] https://www.cnblogs.com/chaseHard/articles/5743705.html


Yushia
11 声望3 粉丝

努力努力再努力,