Fiddler中文使用教程-AutoResponder

本文介绍Fiddler这款强大而免费的web调试代理工具,详细解释其安装、使用方法及技巧,包括如何通过Fiddler修改HTTP请求以解决前端兼容性问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数据,fiddler包含了一个强大的基于事件脚本的子系统,并且能够使用.net框架

 

写这篇文章的目的何在:

1、 本人还算喜欢看书,JavaScript的相关书看过一些,书本上总能看见对JavaScript类似的评语或者评价 - “JavaScript调试困难”。可是事实却是随着互联网行业的的飞速发展,JavaScript调试难的问题已不像早年那样麻烦了,这里先不说各种IDE对JavaScript强力的支持,刚好因为工作需要,需要调试产品在主流浏览器中兼容问题,所以乘机做了点功课,来为大伙介绍这个在前端开发过程中异常给力的工具。

 

2、 文章的前部分介绍工具的具体细节,后部分介绍工具的使用技巧和具体的方法,针对个人需求选择阅读。


 

Fiddler是啥?

  百度百科里是这样介绍它的 - “Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数据,fiddler包含了一个强大的基于事件脚本的子系统,并且能够使用.net框架语言扩展。”

  所以无论你是从事什么开发,哪种语言,只要你想了解HTTP,这个工具就值得你去了解,而且更重要的一点,这个工具是免费的。

  Fiddler就是以代理服务器的方式,监听系统的网络数据流动。

  启动Fiddler后,所发生的网络数据流通过Fiddler进行中转,就可以看到HTTP/HTTPS数据流的信息,我们就可以通过对这些信息加以分析。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具,对前端开发工作很有价值。

  

Fiddler的安装与下载:

  Fiddler下载地址http://www.fiddler2.com/fiddler2/

 

 假如你是早期的XP版本的系统在安装的过程中会提示你下载.net framework 2.0或以上版本 。安装过程很简单,就不介绍了。
 


 

 


Fiddler的使用界面和功能介绍:
fiddler
 

 

 

监听开关 - 只有两种状态,用的时候就开着,不用就让丫休息。capturing表示捕捉状态

  监听类型 - 四种状态分别对应 监听所有请求;监听浏览器请求,监听非浏览器请求,和全部隐藏(Hide All)

  命令行 - 就不作介绍了,难者不会,会者不难。我就属于前者,悲剧呀...

  请求列表 - 请求列表的信息分别有 结果(Result),协议(Protocol),主机名(Host),网页地址(URL),内容大小(Body),缓存(Caching),响应的HTTP内容类型(Content-Type),请求所运行的程序(Process),注释(Comments),自定义(Custom)

  请求相关信息 - 右边这一大片都是数据流的相关信息的查看器,这些查看器提供很多查看形式,可以查看数据流的内容。



 

Fiddler请求列表的icon对应具体的数据类型和状态,其含义是:
  icon对应的数据请求的含义

 

 

 

 

Fiddler请求相关信息对应的主要功能:
 

  工具最右方的是请求相关信息的查看器,提供了数据多方面的查看方式。想了解?看图片。

  统计资料信息(Statistics)

  Statistics

 

强大的检查器(Inspectors) - 功能很多,等待你慢慢挖掘。

  Inspectors

  Inspectors

 

时间轴(Timeline)

  Timeline

  

自动回复器(autoResponder) - 一会就是介绍它的具体使用方法

  autoResponder


 

 

 

说说我在工作中为什么使用Fiddler,如何使用Fiddler
 

  前端工程师在工作中总会有那么一些要求,要求书写的代码具有优良的兼容性,要求考虑代码的高性能,要求方法要面向对象,要求...前端工程师总是和浏览器兼容有很多不得不说的事。

  条件1:在我们前端工程师开发的工作中,要调试服务器上某个HTML/CSS/JavaScript文件。一般情况下,我们都是将文件直接进行修改,然后重新发布再去做验证,这样就容易影响到测试环境或者生成环境的稳定性。更好的做法是,我们在本地开发环境中直接修改文件并进行验证,然后发布到测试环境,这样能保证测试环境的稳定,可是又比较繁琐。

  条件2:现在我的情况是需要调试上线产品的浏览器兼容性问题,且我没有本地环境或者生成环境去测试。假如有Bug发生在Firefox或者Chrome这种有控制台支持调试的浏览器下一切都好说,可是假如bug只发生在遨游,TT,世界之窗,搜狗...这种的没有调试功能的浏览器下,而且你还碰见了我目前的情况,那么如果没有Fiddler这种工具,只能说这就是一场灾难。

  Fiddler工具可以修改HTTP数据的特性,我们就非常便捷地基于生产环境修改并验证,确认后再发布。

  第一步,先定位调试文件且下载。假设发现页面中的某个文件有问题(HTML/CSS/JavaScript都行),那么我们需要做的是就把他先下载到本地(如果本地有这个本地那么可以跳过此步骤),下载到本地的文件偶尔会有乱码的情况,建议你先清理浏览器缓存或者调整注册表(Fiddler2中文乱码问题)。使用细节如下:

  save

 

  第二步,Fiddler - autoResponder出场,开启此功能。打开AutoResponder标签设置。可以看到界面上有三个选择框,第一个的作用是开启或禁用自动重定向功能,我们就可以在下面添加重定向规则了;第二个选择框被勾上时,不匹配的请求可以通过,不影响那些没满足我们处理条件的请求。

  自动回复器

 

  第三步,创建重定向规则,将目标是这个js的HTTP请求重定向到本地文件。选中刚刚定位的文件,通过“Add…”按钮增加规则,也可以直接拖动过来。

  selectResponder

 

 第四步,选择本地刚刚保存的文件或者替换的文件,作为替换这个请求的内容。

  selectFile

 

  第五步,你调试或者不调试,它就在那里 - 只会请求你本地的选择的那个文件。所以,想怎么修改都随便你了。刷新页面,就可以看见这个alert了。

  alert

 

  总结:虽然介绍时一共分为5个步骤,其实只要用习惯了很随意就可以调试了。快速前端调试其实很简单。

  



Fiddler2中文乱码问题

       作者Eric Lawrence后来推出了一个威力加强版--Fiddler,大概是目前最好用的HTTP分析软件了。作为免费软件,很多方面比收费的HttpWatch、HTTP Analyzer还出色。当然商业软件也有Fiddler不具备的好处,本文主旨不是比较优劣。只说Fiddler,优点主要是:

  1. 除了能篡改request,还能篡改response;
  2. 能设置各种过滤器;
  3. 以独立的方式运行,不仅能用于IE;
  4. 有很好的扩展性,支持脚本和插件。

 

       网上的介绍文章很多,在这不多说了。但是这些文章都没提到一个问题:对于有些中文网站,POST请求中的中文参数不能被Fiddler正确处理。具体表现是:这些网站是用GB2312/GBK/GB18030编码的,比如POST请求中含有"中文"二字,在Fiddler的TextView Inspector中显示为“%D6%D0%CE%C4”("中文"的GBK编码),到了WebForms Inspector中就显示为乱码了,因为Fiddler把它们按照UTF-8解码。反过来,在WebForms Inspector中将参数设置为中文值,会被Fiddler用UTF-8编码发送出去导致错误。其实这不是Fiddler的错,是这些土鳖网站没有在 HEADER中指定字符集。

 

      给作者发信询问,很快得到了答复:打开注册表编辑器,找到HKCU\Software\Microsoft\Fiddler2\,在里面添加一个字符串值,名叫HeaderEncoding,值设置为默认编码。建议设成GB18030。然后要记得重启Fiddler才能生效。

 

win7 

1、windows按钮+R 

2、输入regedit  +回车+是

3、HKEY_CURRENT_USER\Software\Microsoft\Fiddler2

4、右键新建,选字符串值  加上HeaderEncoding  然后值输入  GBK

Fiddler Classic 是一个功能强大的 Web 调试工具,能够捕获和分析 HTTP(S) 请求与响应,帮助开发者调试网络请求、优化性能以及排查问题。以下是针对 Fiddler Classic 的入门教程使用方法。 ### 安装 Fiddler Classic 1. 访问 Telerik 官网的 Fiddler 页面,选择适用于 Windows 系统的 **Fiddler Classic** 版本进行下载。 2. 运行安装程序,按照提示完成安装过程。默认情况下,Fiddler 会自动配置系统代理设置以捕获流量 [^1]。 ### 启动与界面介绍 启动 Fiddler Classic 后,主界面主要由以下几个部分组成: - **左侧会话列表(Web Sessions)**:显示所有捕获到的 HTTP(S) 请求和响应。 - **右侧详情面板(Inspector)**:展示选中请求的详细信息,包括请求头、响应头、正文内容等。 - **底部命令行(QuickExec)**:可用于输入命令快速执行操作。 ### 捕获 HTTPS 流量 为了捕获 HTTPS 流量,需要在首次使用时安装 Fiddler 的根证书: 1. 在菜单栏中点击 **Tools > Options > HTTPS**。 2. 勾选 **Decrypt HTTPS traffic**。 3. 点击 **Export Root Certificate to Desktop**,将证书导出到桌面。 4. 双击证书文件,选择“安装证书”,并在向导中选择“受信任的根证书颁发机构”存储位置完成安装 [^2]。 5. 重启 Fiddler 以使配置生效。 ### 常用功能与操作 #### 过滤请求 可以通过以下方式过滤会话列表中的请求: - 在顶部工具栏的 "Filters" 标签页中设置条件,如过滤特定域名或状态码。 - 使用 QuickExec 命令,例如 `cls` 清空会话列表,`bpafter <URL>` 设置断点等。 #### 修改请求与响应 Fiddler 支持在请求发送前或响应返回前对其进行修改: - 在 **Inspectors** 面板中选择 **Request Builder** 或 **Response Viewer** 来编辑请求或响应内容。 - 使用 **AutoResponder** 功能模拟服务器响应,用于测试不同场景下的前端行为。 #### 性能分析 Fiddler 提供了 **Timeline** 视图,可以查看每个请求的时间线,帮助识别性能瓶颈。通过 **Statistics** 面板可获取整体请求的汇总信息,如总请求数、传输数据大小等。 #### 导出与分享 可以将捕获的会话保存为 `.saz` 文件,便于后续分析或与团队成员共享。此外,Fiddler 还支持导出为多种格式,如 HAR、CSV 等。 ### 示例:抓取并分析网页请求 1. 打开浏览器并访问任意网站,例如 `https://example.com`。 2. 在 Fiddler 中观察左侧会话列表,可以看到该页面加载过程中发起的所有请求。 3. 选择某个请求,在右侧 Inspectors 面板中查看其详细的请求头、响应头及响应内容。 4. 使用 Timeline 视图分析各请求的加载时间,识别可能的性能问题。 ```http GET / HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding: gzip, deflate, br Connection: keep-alive ``` ### 结语 Fiddler Classic 是一款非常实用的网络调试工具,掌握其基本使用方法可以帮助开发者更高效地进行 Web 开发和调试工作。随着对工具的熟悉,还可以探索更多高级功能,如自定义脚本编写(使用 FiddlerScript)、扩展插件等。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值