Fiddler工具使用教程

Fiddler工具简介

Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统,并且能使用.net语言进行扩展。使用Fiddler无论对开发还是测试来说,都有很大的帮助。
同类的工具有: httpwatch, firebug, wireshark

Fiddler工具下载

Fiddler的官方网站: www.fiddler2.com

Fiddler工作原理

Fiddler 以代理web服务器形式工作,它使用代理地址:127.0.0.1, 端口:8888。
当Fiddler退出时,它会自动注销,不会影响其他程序;但是当Fiddler非正常退出,Fiddler不会自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler。

Fiddler工具使用教程_第1张图片
image.png

Fiddler工具使用教程_第2张图片
image.png

Fiddler工具使用

Fiddler如何捕获Firefox会话

能够支持HTTP代理的任意程序的数据包,都能被Fiddler嗅探到。Fiddler的运行机制,其实就是本机上监听8888端口的HTTP代理。
Fiddler2启动时,默认IE的代理设为127.0.0.1:8888,而其他浏览器是需要手动设置,所以将Firefox的代理改为127.0.0.1:8888就可以监听数据。
Firefox 上通过如下步骤设置代理:
点击: Tools -> Options, 在Options 对话框上点击Advanced tab - > network tab -> setting.

Firefox中安装Fiddler插件

修改Firefox 的代理比较麻烦,不用fiddler的时候还需要去掉代理。
建议在firefox中使用fiddler hook 插件, 方便使用Fiddler获取firefox中的request 和response。
安装fiddler后,就已经装好Fiddler hook插件,只需要到firefox中去启用这个插件
打开firefox tools->Add ons -> Extensions启动FiddlerHook


Fiddler工具使用教程_第3张图片
image.png

Fiddler工具使用教程_第4张图片
image.png

Fiddler如何捕获HTTPS会话

默认下,Fiddler不会捕获HTTPS会话,需要打开Fiddler Tool->Fiddler Options->HTTPS tab。


Fiddler工具使用教程_第5张图片
image.png

选中checkbox, 弹出如下的对话框,点击"YES",设置成功。


Fiddler工具使用教程_第6张图片
image.png

Fiddler工具使用教程_第7张图片
image.png

Fiddler的基本界面

Fiddler工具使用教程_第8张图片
image.png

Inspectors tab下有很多查看Request或者Response的消息。 其中Raw Tab可以查看完整的消息,Headers tab 只查看消息中的header。


Fiddler工具使用教程_第9张图片
image.png

Fiddler的HTTP统计视图

通过陈列出所有的HTTP通信量,Fiddler可以很容易展示哪些文件生成当前请求的页面。使用Statistics页签,用户可以通过选择多个会话来得到这几个会话的总的信息统计,比如多个请求和传输的字节数。
选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间。从条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化。


Fiddler工具使用教程_第10张图片
image.png

QuickExec命令行的使用

Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令。
常见得命令有:
help 打开官方的使用页面介绍,所有的命令都会列出来
cls 清屏 (Ctrl+x 也可以清屏)
select 选择会话的命令
?.png 用来选择png后缀的图片
bpu 截获request


Fiddler工具使用教程_第11张图片
image.png

Fiddler中设置断点修改Request

Fiddler最强大的功能莫过于设置断点了,设置好断点后,你可以修改httpRequest 的任何信息包括host, cookie或者表单中的数据。
设置断点有两种方法:
第一种:打开Fiddler 点击Rules-> Automatic Breakpoint ->Before Requests(这种方法会中断所有的会话)
如何消除命令呢? 点击Rules-> Automatic Breakpoint ->Disabled
第二种: 在命令行中输入命令: bpu www.baidu.com (这种方法只会中断www.baidu.com)
如何消除命令呢? 在命令行中输入命令 bpu

Fiddler工具使用教程_第12张图片
image.png

举例,模拟博客园的登录, 在IE中打开博客园的登录页面,输入错误的用户名和密码,用Fiddler中断会话,修改成正确的用户名密码,这样就能成功登录。

  1. 使用IE打开博客园的登录界面 http://passport.cnblogs.com/login.aspx
  2. 打开Fiddler, 在命令行中输入bpu http://passport.cnblogs.com/login.aspx
  3. 输入错误的用户名和密码,点击登录。
  4. Fiddler 能中断这次会话,选择被中断的会话,点击Inspectors tab下的WebForms tab 修改用户名密码,然后点击Run to Completion,正确地登录了博客园。


    Fiddler工具使用教程_第13张图片
    image.png

Fiddler中设置断点修改Response

Fiddler中,修改Response:
第一种:打开Fiddler 点击Rules-> Automatic Breakpoint ->After Response (这种方法会中断所有的会话)
如何消除命令呢? 点击Rules-> Automatic Breakpoint ->Disabled
第二种: 在命令行中输入命令: bpafter www.baidu.com (这种方法只会中断www.baidu.com)
如何消除命令呢? 在命令行中输入命令 bpafter

Fiddler工具使用教程_第14张图片
image.png

具体用法和上节差不多。

Fiddler中创建AutoResponder规则

Fiddler 的AutoResponder tab允许从本地返回文件,而不用将http request 发送到服务器上。
举例:

  1. 打开博客园首页,把博客园的logo图片保存到本地,并且对图片做些修改。
  2. 打开Fiddler,找到logo图片的会话,http://static.cnblogs.com/images/logo_2012_lantern_festival.gif,把这个会话拖到AutoResponer Tab下。
  3. 选择Enable automatic reaponses 和Unmatched requests passthrough
  4. 在下面的Rule Editor 下面选择 Find a file... 选择本地保存的图片,最后点击Save 保存下。
  5. 再用IE博客园首页, 你会看到首页的图片用的是本地的。


    Fiddler工具使用教程_第15张图片
    image.png

    Fiddler工具使用教程_第16张图片
    image.png

Fiddler中如何过滤会话

Fiddler中有过滤的功能, 在右边的Filters tab中,里面有很多选项, 稍微研究下,就知道怎么用。

Fiddler中会话比较功能

选中2个会话,右键然后点击Compare,就可以用WinDiff来比较两个会话的不同了 (当然需要你安装WinDiff)


Fiddler工具使用教程_第17张图片
image.png

Fiddler中提供的编码小工具

点击Fiddler工具栏上的TextWizard, 这个工具可以Encode和Decode string。


Fiddler工具使用教程_第18张图片
image.png

Fiddler中查询会话

用快捷键Ctrl+F 打开 Find Sessions的对话框,输入关键字查询你要的会话。
查询到的会话会用黄色显示:


Fiddler工具使用教程_第19张图片
image.png

Fiddler中保存会话

保存会话的步骤如下:
选择想保存的会话,然后点击File->Save->Selected Sessions,即可。

Fiddler的script系统

Fiddler最复杂的莫过于script系统,官方帮助文档: http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp
首先先安装SyntaxView插件,Inspectors tab->Get SyntaxView tab->Download and Install SyntaxView Now... ,如下图:

Fiddler工具使用教程_第20张图片
image.png

安装成功后,Fiddler就会多了一个Fiddler Script tab。
Fiddler工具使用教程_第21张图片
image.png

此时,就可以在图示位置编写脚本。
举个例子,让所有cnblogs的会话都显示红色。
把这段脚本放在OnBeforeRequest(oSession: Session) 方法下,并且点击"Save script"。

if (oSession.HostnameIs("www.cnblogs.com")) {
            oSession["ui-color"] = "red";
        }

这样,所有的cnblogs的会话都会显示红色。

如何在VS调试网站的时候使用Fiddler

在用visual stuido 开发ASP.NET网站时,也需要用Fiddler来分析HTTP, 默认Fiddler是不能嗅探到localhost的网站。不过只要在localhost后面加个点号,Fiddler就能嗅探到。
例如:原本ASP.NET的地址是http://localhost:2391/Default.aspx,加个点号后,变成 http://localhost.:2391/Default.aspx 就可以了。

Fiddler工具使用教程_第22张图片
image.png

第二个办法就是在hosts文件中加入 127.0.0.1 localsite。
当你访问 http://localsite:端口号。这样,Fiddler也能截取到了。

Response 是乱码的

当看到Response中的HTML是乱码,这是因为HTML被压缩了,可以通过两种方法去解压缩。

  1. 点击Response Raw上方的"Response is encoded any may need to be decoded before inspection. click here to transform"。
  2. 选中工具栏中的"Decode"。这样会自动解压缩。
    Fiddler工具使用教程_第23张图片
    image.png

    附:fiddler使用技巧
    (1)Fiddler 是什么?
    Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。
    Fiddler是以代理服务器的方式,监听系统的网络数据流动。运行Fiddler后,就会在本地打开8888端口,网络数据流通过Fiddler进行中转时,可以监视HTTP/HTTPS数据流的记录,并加以分析,甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具,对前端开发工作很有价值。
    (2)主要功能
    1、分析页面性能
    2、分析http请求/响应数据
    3、设置断点,调试线上错误
    4、伪造数据请求,调试数据接口
    (3)Fiddler的界面
    Fiddler工具使用教程_第24张图片
    image.png

    (4)fiddler命令
    常用命令:
    1、选择类:?text、>size、 2、blod text、select、allbut、keeponly
    3、断点类:bpafter、bps、bpv、bpm、bpu
    4、控制类:hide、start、stop、show、quit
    5、其他:cls/clear、dump、g/go、help、urlreplace
    image.png

    (5)使用fiddler进行数据分析
    Fiddler工具使用教程_第25张图片
    image.png

    (6)代码查看器-双击session(需下载插件,见后面)
    Fiddler工具使用教程_第26张图片
    image.png

    利用查看器提供的很多形式,我们可以查看数据流的内容。
    (7)请求构建器(Request Builder)
    Fiddler工具使用教程_第27张图片
    image.png

    可以创建任意数据的请求,如上,输入url后,点击Execute按钮。
    (8)过滤器
    Fiddler工具使用教程_第28张图片
    image.png

    过滤器可以对左侧的数据流列表进行过滤,可以标记、修改或隐藏某些特征的数据流。如上图,通过过滤只展现host为p.baidu.com的请求。
    (9)AutoResponse功能
    Fiddler工具使用教程_第29张图片
    image.png

    这个功能。可以算的上是Fiddler最实用的功能,可以修改服务器端返回的数据,例如让返回都是HTTP404或者读取本地文件作为返回内容。具体将在实例中介绍利用AutoResponse功能。
    (10)文本编码和解码
    开启Tools -> Text Encode/Decode,支持编码:
    1、Base64编码解码
    2、URL Encode/Decode
    3、十六进制编码
    4、Unicode编码解码
    5、HTML实体化编码解码
    6、UTF-7编码解码
    7、Deflated 编码解码
    Fiddler工具使用教程_第30张图片
    image.png

    提供了常用的一些文本编解码的转换。
    (11)模拟user-agent
    在做mobile上的网页开发时,经常需要修改user-agents为iphone,如下图 :
    Fiddler工具使用教程_第31张图片
    image.png

    而通过fiddler,可以直接修改所有请求的user-agents,这样很方便,默认没有iphone的user-agents,需要自己修改配置——可以编辑fiddler Rules来增加和变更(Rules->Customize Rules)。
    (12)模拟慢速网络
    Fiddler工具使用教程_第32张图片
    image.png

    (13)对两个数据流进行比较
    Fiddler工具使用教程_第33张图片
    image.png

    (14)Fiddler提供加载时间瀑布图
    Fiddler工具使用教程_第34张图片
    image.png

    (15)Fiddler扩展插件安装
    1、代码高亮插件
    http://www.fiddler2.com/redir/?id=SYNTAXVIEWINSTALL
    Fiddler工具使用教程_第35张图片
    image.png

    2、javascript代码格式化插件
    http://www.fiddler2.com/dl/FiddlerJSFormatSetup.exe安装完毕后,在任何一条js请求后点击右键,选择Make Javascript Pretty。
    3、Gallery
    http://www.fiddler2.com/dl/FiddlerGallerySetup.exe展现图片
    更多插件可以到官网下载。
    Fiddler插件官网下载:http://www.fiddler2.com/fiddler2/extensions.asp
    (16)Fiddler的扩展机制
    Fiddler 支持 Jscript.NET 引擎,可以很方便的修改 CustomRules.js 来扩展。修改后立即生效。
    开启:Rules -> Customize Rules…
    Handles类两个最重要的事件:
    1、OnBeforeRequest(oSession: Session)
    2、OnBeforeResponse(oSession: Session)
    3、OnBeforeRequest范例
    image.png

    通过上面代码,可以将js和css的session分别标示为红色和绿色,效果如下:
    image.png

    (17)为何有时捕获不到:
    1、手动修改浏览器代理ip地址为:127.0.0.1:8888。
    2、检查fiddler捕获开关。
    image.png

    3、检查过滤器设置(filters)。
    Fiddler工具使用教程_第36张图片
    image.png

你可能感兴趣的:(Fiddler工具使用教程)