备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Fiddler 教程

2022-05-26 174
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Fiddler 教程

1. 简介

Fiddler（中文名称：小提琴）是一个HTTP的调试代理，以代理服务器的方式，监听系统的Http网络数据流动， Fiddler可以也可以让你检查所有的HTTP通讯，设置断点，以及Fiddle所有的“进出”的数据（我一般用来抓包）,Fiddler还包含一个简单却功能强大的基于JScript .NET事件脚本子系统，它可以支持众多的HTTP调试任务。


Fiddler官方网站提供了大量的帮助文档和视频教程,这是学习Fiddler的最好资料

  • Fiddler_官方网站
  • Fiddler_官方文档
  • Fiddler_官方视频
  • Fiddler_官方插件


2. 工作原理

f853d05a387171e3a09612d096f85eab.png

Fiddler是以代理WEB服务器的形式工作的,浏览器与服务器之间通过建立TCP连接以HTTP协议进行通信，浏览器默认通过自己发送HTTP请求到服务器，它使用代理地址:127.0.0.1, 端口:8888. 当Fiddler开启会自动设置代理， 退出的时候它会自动注销代理，这样就不会影响别的程序。不过如果Fiddler非正常退出，这时候因为Fiddler没有自动注销，会造成网页无法访问。解决的办法是重新启动下Fiddler.


3. HTTP协议简介

3.1 什么是HTTP协议

协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器，目前我们使用的是HTTP/1.1 版本。


3.2 URL详解

URL(Uniform Resource Locator) 地址用于描述一个网络上的资源, 基本格式如下


schema://host[:port#]/path/.../[?query-string][#anchor]

image.png


3.3 HTTP消息的结构

  • Request

image.png

先看Request 消息的结构, Request 消息分为3部分，第一部分叫Request line, 第二部分叫Request header, 第三部分是body. header和body之间有个空行

第一行中的Method表示请求方法,比如"POST","GET", Path-to-resoure表示请求的资源， Http/version-number 表示HTTP协议的版本号,当使用的是"GET" 方法的时候， body是为空的

84e88b914fc01c1a0e70ce00115d2fc6.png


  • Response

image.png

我们再看Response消息的结构, 和Request消息的结构基本一样。 同样也分为三部分,第一部分叫Response line, 第二部分叫Response header，第三部分是body. header和body之间也有个空行

f31e1735c1e9422c5583e46ff27bd23b.png


3.4 状态码

Response 消息中的第一行叫做状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成。

状态码用来告诉HTTP客户端,HTTP服务器是否产生了预期的Response.

HTTP/1.1中定义了5类状态码， 状态码由三位数字组成，第一个数字定义了响应的类别

image.png

  • 200 OK

最常见的就是成功响应状态码200了， 这表明该请求被成功地完成，所请求的资源发送回客户端

2e3de884c6c272e71f7782277db6ad7a.png

  • 302 Found

重定向，新的URL会在response 中的Location中返回，浏览器将会自动使用新的URL发出新的Request


例如在IE中输入， http://www.google.com. HTTP服务器会返回302， IE取到Response中Location header的新URL, 又重新发送了一个Request.

87786fa907b2cd4f371d244509c97762.png

  • 304 Not Modified

代表上次的文档已经被缓存了， 还可以继续使用，例如打开博客园首页, 发现很多Response 的status code 都是304

[提示：　如果你不想使用本地缓存可以用Ctrl+F5 强制刷新页面]

8926903d93480156a4ee40173d2f02e5.png

  • 400 Bad Request 客户端请求与语法错误，不能被服务器所理解
  • 403 Forbidden 服务器收到请求，但是拒绝提供服务
  • 404 Not Found

dbd903170f5308662df53c42de3606ef.png

  • 500 Internal Server Error 服务器发生了不可预期的错误
  • 503 Server Unavailable 服务器当前不能处理客户端的请求，一段时间后可能恢复正常


4. 界面操作

4.1 主界面

8b6076969cabbf6c1f94760eb433680b.png

Fiddler的主界面分为 工具面板、会话面板、监控面板、状态面板，下面进行一一介绍。


4.2 工具面板

e37727056a3a5d478e03ad1c1cfc1fba.png

  • 说明

注释、重新请求、删除会话、继续执行、流模式/缓冲模式、解码、保留会话、监控指定进程、寻找、保存会话、切图、计时、打开浏览器、清除IE缓存、编码/解码工具、弹出控制监控面板、MSDN、帮助


  • 两种模式

缓冲模式（Buffering Mode）

Fiddler直到HTTP响应完成时才将数据返回给应用程序。可以控制响应，修改响应数据。但是时序图有时候会出现异常


流模式（Streaming Mode）

Fiddler会即时将HTTP响应的数据返回给应用程序。更接近真实浏览器的性能。时序图更准确。但是不能控制响应。

1751bf3c762b5a0ffba086b7abee0c73.png


4.3 会话面板

3c64bdb481a11fccb26553a6ddc5943b.png

bd8692073fdc8829b96f85acd078a9f1.png

4.4 监控面板

b3fab09d50045360bd6d43fdb9eddd62.png

  • 统计报表

(1) 请求总数、请求包大小、响应包大小；

(2) 请求起始时间、响应结束时间、握手时间、等待时间、路由时间、TCP/IP传输时间；

(3) HTTP状态码统计；

(4) 返回的各种类型数据的大小统计以及饼图展现。

33a62062b83b5452b57aafc24f885ff9.png


  • 时间轴

每个网络请求都会经历域名解析、建立连接、发送请求、接受数据等阶段。把多个请求以时间作为 X 轴，用图表的形式展现出来，就形成了瀑布图。在Fiddler 中，只要在左侧选中一些请求，右侧选择Timeline标签，就可以看到这些请求的瀑布图

cd0561d8063b18c3bc8cbe504ac64e6e.png


看到这张图，你是否可以回答这些问题：

  1. 图标的 Y 轴上显示的是简化后的 URL。为什么有些是绿色的，有些是黑色的？
  2. 为什么第一个请求用阴影线来表示，其它请求却都是实心的？
  3. 请求条的不同颜色分别代表什么？
  4. 每个请求中的黑色竖线表示什么？
  5. 请求后面的图标（如闪电和软盘）代表了什么？
  6. 每个请求前面两个小圆圈是什么，为什么有的是红色，有的是绿色？


下面将一一揭晓。

  1. 绿色的请求表示这是一个“有条件的请求”。HTTP 协议定义了 5 个条件请求头部，最常见的两个是“If-Modified-Since”和“If-None-Match”。服务器根据这两个头部来验证本地缓存是否过期，如果过期则正常返回资源的最新版本；否则仅返回 304 Not Modified，浏览器继续使用本地缓存。包含条件请求头部的请求用绿色显示，否则用黑色。
  2. 有阴影线的请求是缓冲模式下的请求，实心的是流模式下的请求。Fiddler 提供了缓冲（Buffering）和流（Streaming）两种抓包模式：缓冲模式下，Fiddler 会在响应完成时才将数据返回给应用程序（通常是浏览器），这种模式下可以控制响应，方便地修改响应内容；流模式下，Fiddler 会实时返回响应数据给浏览器，但没办法控制响应。一般使用流模式，瀑布图会更真实一些。这两种模式可以通过 Fiddler 的工具栏选择。特别的，通过 Fiddler 的“AutoResponder”功能返回的响应，只能是缓冲模式。
  3. 请求条的不同颜色对应着不同类型的响应，根据响应头的 MIME Type 来归类。如浅绿色表示图片类型的响应；深绿色是 JavaScript；紫色是 CSS；其它都是蓝色。
  4. 请求中的黑色竖线，表示的是浏览器收到服务端响应的第一个字节这一时刻。这个时间受 DNS 解析、建立连接、发送请求、等待服务端响应等步骤的影响。
  5. 请求条后面的图标表示响应的某些特征。如软盘图标表示这个响应正文从本地获得，也就是说服务端返回了 304；闪电表示这是 Fiddler 的“AutoResponder”的响应；向下的箭头表示响应是 302，需要重定向；红色感叹号说明这个请求有错误发生（状态码是 4XX 或 5XX）。特别的，如果请求条后面有一个红色的X，说明服务端响应完这个请求之后，断开了连接。出现这种情况一般有两种可能：HTTP/1.0 的响应中没有 Connection: Keep-Alive；或者是 HTTP/1.1 的响应中包含了 Connection: close。使用持久连接可以省去建立连接的开销，也可以减小 TCP 慢启动和其它拥塞控制机制带来的影响，总之是好处多多。
  6. 请求前面的红色圆圈表示这个连接是新建的，绿色表示是复用的。上面的圆圈表示的是浏览器到 Fiddler 的连接，下面的圆圈是 Fiddler 到服务端的连接。


4.5 状态面板

66ede5ad0e303c9c2bad545a70d40a56.png

  • 控制台

Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令。

常见得命令有

image.png


5. 常用功能

5.1 监听HTTPS

Fiddler不仅能监听HTTP请求而且默认情况下也能捕获到HTTPS请求，Tool -> Fiddler Option -> HTTPS下面进行设置，勾选上“Decrypt HTTPS traffic”，如果不必监听服务器端得证书错误可以勾上“Ignore server certification errors”，也可以跳过几个指定的HOST来缩小或者扩大监听范围。


HTTPS例子：

https://pay.tenpay.com/main/app/v1.0/trans_manage.cgi?OutPutType=JSON

image.png


5.2 HOST切换

image.png


5.2 模拟各类场景

  • 通过GZIP压缩，测试性能
  • 模拟Agent测试，查看服务端是否对不同客户端定制响应
  • 模拟慢速网络，测试页面的容错性
  • 禁用缓存，方便调试一些静态文件或测试服务端响应情况
  • 根据一些场景自定义规则

image.png

  • 低网速模拟

有时出于兼容性考虑或者对某处进行性能优化，在低网速下往往能较快发现问题所在也容易发现性能瓶颈，可惜其他调试工具没能提供低网速环境，而强大的Fiddler考虑到了这一点，能够进行低网速模拟设置Rules > Performance > Stimulate Modem Speeds。


5.3 Compare（对比文本）

image.png


5.4 Composer（构造器）

请求构造顾名思义就是我们可以模拟请求，也就是说我们可以借助Fiddler的Composer 在不改动开发环境实际代码的情况下修改请求中的参数值并且方便的重新调用一次该请求，然后相比较2次请求响应有何具体不同。任何一个请求参数只要是合法的取值再次调用后都会有相应的响应，那么你想要的任意一个合法请求组合自然也能够按照你的意愿构造出来，然后再次调用以及查看返回数据，十分方便！


下面举一个交易查询请求构造的例子。首先进入交易查询页面抓包找到目标请求https://pay.tenpay.com/main/app/v1.0/trans_manage.cgi?OutPutType=JSON，双击该包在Inspectors标签下查看返回数据为JSON格式，而XML格式一栏为空：

image.png

将该请求鼠标左键单击拖入Fiddler右侧Request Builder标签内并修改原请求参数OutPutType=JSON为OutPu tType=XML，然后点击Execute按钮再次触发调用请求，

image.png

双击这次请求包在Inspectors标签下查看返回数据为XML格式，而JSON格式一栏为空：

image.png


5.5 Filters(过滤监控)

对一个重新载入的页面进行抓包，如果包的条目过多而你需要关注的就那么几项的话，可以使用Fiddler的过滤器Filters进行抓包，那么抓包时只会抓取你希望抓到的那些包。切换到Filters标签勾选Use filter，以便激活过滤器，这样下面的各种过滤方式就可以进行选择了。

(1).

image.png

(2).

image.png

image.png

image.png


5.5 AutoResponder(请求重定向)

所谓请求无非就是需要调用到的一些资源(包括JS、CSS和图片等)，所谓重定向就是将页面原本需要调用的资源指向其他资源(你能够控制的资源或者可以引用到的资源)。


(1)你可以将前台服务器的诸多或者某个资源在本地做个副本，如果正常网络访问环境下该资源出现了BUG而导致开发环境崩溃时，可以先将这个资源的请求重定向到本地副本，这样就可以继续进行开发调试你的页面，从而大量节省资源维护的等待时间。


(2)你也可以将多人同时维护的某个JS文件复制一份出来在本地，当你的开发调试收到他人调试代码干扰时，可以将这个JS的调用重定向到本地无干扰的JS文件，进行无干扰开发，功能开发完成并调试OK之后再将你的代码小心合入到开发环境中，这样就可以避免受到他人干扰专心搞你的模块开发，也就是说能够将JS文件脱离开发环境却不影响线上调试。


(3)你还可以将样式文件或者图片指向本地如果需要的话。开发过程中的很多页面其实都是惨不忍睹的，究其原因很大程度上是因为缺少对应的样式文件或者没有图片资源，所以样式文件和图片的重定向会对美感稍有要求的开发人员带来福音。

image.png


6. 插件介绍

6.1 Format

a66431dd88eff01c089167cd4fbc5b9e.png

a3837b10762a64e6b34c399368f88603.png


6.2 Script

  • Fiddler Script 是用JScript.NET语言写的，

JScript.NET

  • 在这个方法中修改Request的内容， 我们用得最多,
static function OnBeforeRequest(oSession: Session)
  • 在这个方法中修改Response的内容，
static function OnBeforeResponse(oSession: Session)
  • 添加IP Main方法中添加
FiddlerObject.UI.lvSessions.AddBoundColumn("HostIP", 50, "x-hostIP");
  • 请求，响应延迟 在OnBeforeRequest 添加
oSession["request-trickle-delay"]  = "3000"; 
oSession["response-trickle-delay"] = "3000";
  • 我们可以控制Session在Fiddler中显示的样式，把这段脚本放在
• OnBeforeRequest(oSession: Session) 方法下，并且点击"Save script", 这样所有的cnblogs的会话都会显示红色.
  if (oSession.HostnameIs("www.cnblogs.com")) {
        oSession["ui-color"] = "red";
    }
  • Fiddler Script中修改Cookie

Cookie其实就是request 中的一个header,注意:FiddlerScript不能直接删除或者编辑单独的一个cookie， 你需要用replace方法或者正则表达式的方法去操作cookie的string

static function OnBeforeRequest(oSession: Session) 
{ 
 if (oSession.HostnameIs('www.example.com')
   && oSession.uriContains('pagewithCookie') 
   && oSession.oRequest.headers.Contains("Cookie")) 
 { 
     var sCookie = oSession.oRequest["Cookie"]; 
     // 用replace方法或者正则表达式的方法去操作cookie的string
     sCookie = sCookie.Replace("cookieName=", "ignoreme="); 
     oSession.oRequest["Cookie"] = sCookie; 
}
  • 删除所有的cookie
oSession.oRequest.headers.Remove("Cookie");
  • 新建cookie
oSession.oRequest.headers.Add("Cookie", "username=testname;testpassword=P@ssword1");
  • Fiddler Script中修改Request 中的body
static function OnBeforeRequest(oSession: Session) 
{ 
if(oSession.uriContains("http://www.cnblogs.com/"))
{
    // 获取Request 中的body字符串
    var strBody=oSession.GetRequestBodyAsString();
    // 用正则表达式或者replace方法去修改string
    strBody=strBody.replace("1111","2222");
    // 弹个对话框检查下修改后的body               
    FiddlerObject.alert(strBody);
    // 将修改后的body，重新写回Request中
    oSession.utilSetRequestBody(strBody);
}
}

VS插件：https://visualstudiogallery.msdn.microsoft.com/872d27ee-38c7-4a97-98dc-0d8a431cc2ed


6.3 三方插件

  • .NET可以开发
  • 插件管理

image.png


7. 浏览器抓包方式

7.1 IE

image.png

7.2 Firefox

image.png

7.3 Chrome

image.png

7.4 VS

我们在用visual stuido 开发ASP.NET网站的时候也需要用Fiddler来分析HTTP， 默认的时候Fiddler是不能嗅探到localhost的网站。

在localhost后面加个点号，Fiddler就能嗅探到。


例如：原本ASP.NET的地址是 http://localhost:2391/Default.aspx， 加个点号后，变成 http://localhost.:2391/Default.aspx 就可以了

image.png



8. 移动端抓包

Fiddler不但能截获各种浏览器发出的HTTP请求, 也可以截获各种智能手机发出的HTTP/HTTPS请求。

Fiddler能捕获IOS,Andriod,WinPhone,设备发出的请求，同理，也可以截获IPad, MacBook的等设备发出的HTTP/HTTPS。

前提条件是：安装Fiddler的机器，跟Iphone 在同一个网络里， 否则IPhone不能把HTTP发送到Fiddler的机器上来。


具体操作步骤如下：

  • Fiddler设置

打开Fiddler, Tools-> Fiddler Options。（配置完后记得要重启Fiddler）.

选中"Allow remote computers to connect". 是允许别的机器把HTTP/HTTPS请求发送到Fiddler上来

image.png

  • 获取Fiddler所在机器的IP
  • 安装Fiddler证书

这一步是为了让Fiddler能捕获HTTPS请求。 如果你只需要截获HTTP请求， 可以忽略这一步


首先要知道Fiddler所在的机器的IP地址：　假如我安装了Fiddler的机器���IP地址是:192.168.1.104

打开IPhone 的Safari, 访问 http://192.168.1.104:8888， 点"FiddlerRoot certificate" 然后安装证书

image.png

image.png

  • 打开IPhone, 找到你的网络连接， 打开HTTP代理， 输入Fiddler所在机器的IP地址(比如:192.168.1.104) 以及Fiddler的端口号8888

image.png


9. 推荐书籍

  • 《Fiddler调试权威指南》是Fiddler的开发者Eric Lawrence编写的一本权威的参考指南。全书分为10章和4个附录，从认识Fiddler开始，介绍了基本技巧和概念、配置选项、Inspectors、扩展、数据流导入导出、FiddlerScript和FiddlerCore等主题；附录部分还给出了故障排除和命令行等有用的参考信息。


  • 《Fiddler调试权威指南》适合Web开发人员和Web测试人员阅读参考，也适合想要学习和掌握Fiddler的读者阅读。通过《Fiddler调试权威指南》，你将学会如何利用Fiddler调试Web相关的应用，掌握如何调试HTTPS数据流，学会如何在流行的设备上使用Fiddler，甚至掌握更多高级的扩展功能。


10. 其他抓包工具

同类的工具有 : HttpWatch, Firebug,Chrome自带调试工具，WireShark


11. 总结

通过以上的介绍，你应该已经发现fiddler其它强大的功能。fiddler绝对是开发利器。

  • Fiddler能记录所有客户端和服务器的HTTP和HTTPS请求，允许你监视、设置断点，甚至修改输入输出数据，Fiddler包含了一个强大的基于事件脚本的子系统，并且能使用.NET语言进行扩展；
  • 你对HTTP协议越了解，你就能越掌握Fiddler的使用方法，你越使用Fiddler,就越能帮助你了解HTTP协议，两者关系紧密、相辅相成；
  • 强大图形呈现，拖拽操作，丰富的插件。
  • 使用Fiddler无论对Coder还是Tester来说，都是非常有用的工具。


文章标签：
JavaScript
前端开发
iOS开发
监控
网络协议
Web App开发
数据格式
缓存
JSON
XML
爱笑的架构师
目录
相关文章
游戏测试学习
|
8月前
|
API Android开发 数据安全/隐私保护
《协议测试》抓包工具Fiddler实战教程 2
《协议测试》抓包工具Fiddler实战教程
游戏测试学习
139 0
游戏测试学习
|
8月前
|
Web App开发
《协议测试》抓包工具Fiddler实战教程 1
《协议测试》抓包工具Fiddler实战教程
游戏测试学习
69 0
1506241726713852
|
9月前
|
小程序
fiddler系列之-fiddler对手机测试版本的小程序进行抓包
fiddler对手机测试版本的 http 请求的小程序进行抓包
1506241726713852
100 0
1506241726713852
|
9月前
fiddler系列之-免费版本的fiddler下载
下载免费版本的fiddler
1506241726713852
382 0
爱躺平的威威
|
JSON 缓存 数据格式
抓包工具简单介绍和 fiddler 安装
抓包工具，是个特殊的软件，相当于一个 “代理程序”，浏览器给服务器发的请求就会经过这个代理程序，进一步的就能分析出请求和响应的结果如何。
爱躺平的威威
281 0
抓包工具简单介绍和 fiddler 安装
双木Palin
|
缓存 前端开发 JavaScript
入门兵器谱，测试相关软件系列——Fiddler抓包工具使用教程
Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件）。Fiddler 要比其他的网络调试器要更加简单，因为它不仅仅暴露http通讯还提供了一个用户友好的格式。
双木Palin
225 0
入门兵器谱，测试相关软件系列——Fiddler抓包工具使用教程
前端修罗场
|
JavaScript 前端开发 Linux
【工具】Fiddler使用教程
【工具】Fiddler使用教程
前端修罗场
385 0
Lux_Sun
|
缓存 监控 JavaScript
Fiddler - 快速入门（抓包）
Fiddler - 快速入门（抓包）
Lux_Sun
176 0
Fiddler - 快速入门（抓包）
给你一页白纸
|
数据安全/隐私保护
Fiddler抓包常用功能
通过上一篇文章Fiddler移动端抓包，我们知道了Fiddler抓包原理以及怎样进行移动端抓包，接下来介绍Fiddler中常用的功能。 Fiddler中常用的功能如下： • 停止抓包 • 清空会话窗内容 • 过滤请求 • 解码 • 设置断点
给你一页白纸
208 0
Fiddler抓包常用功能
小博测试成长之路
|
前端开发 测试技术
Fiddler Everywhere之AutoResponder功能详解
AutoResponder主要用来mock接口的数据，在web调试的时候非常方便，比如你想验证前端列表展示有没有取错字段，你就可以mock接口返回结果，然后刷新页面后看看列表的数据是否变化。
小博测试成长之路
306 0
Fiddler Everywhere之AutoResponder功能详解

热门文章

最新文章

  • 1
    疑犯追踪第一季/全集Person Of Interest迅雷下载
  • 2
    【直播系列之一】1篇文章看懂峰值带宽、流量、转码、连麦、截图五大直播计费方式
  • 3
    理解事务的4种隔离级别
  • 4
    阿里云网站域名备案流程全过程讲解(图文)
  • 5
    在服务器的raid1中安装windows server系统（踩坑记录）
  • 6
    如何用Vue实现简易的富文本编辑器，并支持Markdown语法
  • 7
    怎么才能快速提高小程序留存率！
  • 8
    程序员请放下浮躁的心
  • 9
    如何解决域中普通用户只限于10台客户机加入域的数量问题
  • 10
    博客园模板 样式优化
  • 1
    未来技术纵横谈：区块链、物联网与虚拟现实的融合与创新
    34
  • 2
    软件体系结构 - 缓存技术（9）缓存穿透
    30
  • 3
    提升Android应用性能的实用技巧
    31
  • 4
    工具变量法(两阶段最小二乘法2SLS)线性模型分析人均食品消费时间序列数据和回归诊断（下）
    32
  • 5
    软件体系结构 - 缓存技术（8）缓存雪崩
    35
  • 6
    软件体系结构 - 缓存技术（7）Redis持久化方法
    36
  • 7
    Python用KShape对时间序列进行聚类和肘方法确定最优聚类数k可视化
    24
  • 8
    软件体系结构 - 缓存技术（6）淘汰策略
    31
  • 9
    基于R语言股票市场收益的统计可视化分析
    33
  • 10
    软件体系结构 - 数据分片（2）一致性哈希分片
    35

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）