1. Fiddler 是什么?

Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。

Fiddler是以代理服务器的方式,监听系统的网络数据流动。运行Fiddler后,就会在本地打开8888端口,网络数据流通过Fiddler进行中转时,我们可以监视HTTP/HTTPS数据流的记录,并加以分析,甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具,对前端开发工作很有价值。

2. 下载和安装Fiddler

  1. 安装.net framework 2.0以上版本
  2. 官方网站免费下载Fiddler。

Firefox中用Fiddler,可以下载一个插件:Fiddler开关

3. Fiddler的界面和功能

列表

左侧是数据列表,以不同的图标区分数据类型和状态,以下是图标对应的含义:
正在将请求数据发往服务器
正在从服务器下载返回数据
请求过程中暂停
返回过程中暂停
请求中使用了HTTP HEAD方法; 返回中应该没有body内容
请求中使用了HTTP CONNECT方法,建立HTTPS连接通道
返回的内容类型是HTML
返回的内容类型是图片
返回的内容类型是Javascript
返回的内容类型是CSS
返回的内容类型是XML
普通的成功的返回
返回内容为 HTTP/300,301,302,303 or 307 跳转
返回内容为HTTP/304: 使用本地缓存
返回内容为一个证书请求
返回内容是服务器错误
请求被客户端、Fiddler或服务器中断

查看器

利用查看器提供的很多形式,我们可以查看数据流的内容。

请求构建器(Request Builder)

可以创建任意数据的请求

过滤器

过滤器可以对左侧的数据流列表进行过滤,我们可以标记、修改或隐藏某些特征的数据流。

AutoResponse功能

这个功能可以算的上是Fiddler最实用的功能,可以让我们修改服务器端返回的数据,例如让返回都是HTTP404或者读取本地文件作为返回内容。我们将在实例中介绍利用AutoResponse功能。

文本编码和解码

提供了常用的一些文本编解码的转换。

此外,还可以对两个数据流进行比较

Fiddler可以保存和打开“SAZ”格式的文件,这样就可以将监听到的数据流保存下来,下次再重新打开分析。可以利用FiddlerCap——一个专门用来录制保存SAZ的小工具——保存SAZ文件。SAZ文件可以设置密码保护,比较贴心。

延升阅读:使用Fiddler提高前端工作效率 (实例篇)

Category: 前端

TAG , ,

20 responses

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. […] 使用Fiddler提高前端工作效率 (介绍篇) […]

  2. xdfnet says:

    页面游戏外挂也用这个朴拙数据

  3. […] 在上一篇(介绍篇)中, 我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解 Fiddler的神奇魔法。 […]

  4. Gio says:

    前几天发现好文章没时间看,今天空了想起过来看看,图挂了~~~

  5. cnbo says:

    图标区最后一个:
    请求被客户端、Fiddler或服务器中断
    ——————————————
    假设有如下代码:

    在div容器上做一个click监听,发送一个google统计的请求
    问题:当点击A后,当前页跳转,在fiddler中发现该google统计的请求 是 中断的图片。请问这次统计是否有效?

  6. 优惠券 says:

    还不知道是做什么用的

  7. […] 在上一篇(介绍篇)中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法。 […]

  8. […] 原文:http://www.aliued.cn/?p=2567 上一篇: 写给应聘页面重构的同学 标签: 开发工具 本文链接: 使用Fiddler提高前端工作效率 (介绍篇) 版权所有: WEB前端技术分享, 转载请注明本文出 cT="1";nc="#0033CC";nBgc="#FFEEE6";nBorder="#FF9966";tc="#FFFFFF";tBgc="#FE1923";tBorder="#B11418";tDigg="";tDugg="";defaultItemUrl="WEB_URL";defaultFeedUrl ="http://feed.bbon.cn/"; […]

  9. 祈福 says:

    不错呀

  10. I am going to go ahead and bookmark this page for my brother for a study project for class. This is a pretty website by the way. Where do you find the template for this website?

  11. 见天 says:

    学习了,转走了

  12. […] 在上一篇(介绍篇)中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法。 […]

  13. […] 不过对于iframe中需要访问top窗口的javascript代码,还有那些在页面载入和初始化时运行的代码,上面的方法就不适用了。在这个时候,我们需要使用Fiddler,让它在读取相应文件的时候就载入我们修改过的文件。Fiddler的使用方法可以参见这里,这里也有一篇类似的文章。 此条目是由 raphaelzhang 发表在 编程 分类目录的。将固定链接加入收藏夹。 […]

  14. […] Fiddler是web前端不可或缺的调试利器,它是一个调试代理,它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数据,fiddler包含了一个强大的基于事件脚本的子系统,并且能够使用.net框架语言扩展。但是这方面的教程详细的比较少,最近在淘宝的交互网站上看到这个教程,感觉比较详细实用。原文地址:http://www.aliued.cn/2010/04/18/use-fiddler-to-improve-efficiency-of-front-development-introduction…. […]

  15. […] 在上一篇(介绍篇)中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法。 […]

  16. […] 在上一篇(介绍篇)中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法。 […]

  17. […] 在上一篇(介绍篇)中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始 […]

  18. […] 好文章: 使用Fiddler提高前端工作效率 (介绍篇) […]