文档章节

WEB 调试利器:Fiddler 教程

大数据之路
 大数据之路
发布于 2012/12/27 23:37
字数 3229
阅读 5666
收藏 40

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助。

阅读目录

  1. Fiddler的基本介绍
  2. Fiddler的工作原理
  3. 同类的其它工具
  4. Fiddler如何捕获Firefox的会话
  5. Firefox 中使用Fiddler插件
  6. Fiddler如何捕获HTTPS会话
  7. Fiddler的基本界面
  8. Fiddler的统计视图
  9. QuickExec命令行的使用
  10. Fiddler中设置断点修改Request
  11. Fiddler中设置断点修改Response
  12. Fiddler中创建AutoResponder规则
  13. Fiddler中如何过滤会话
  14. Fiddler中会话比较功能
  15. Fiddler中提供的编码小工具
  16. Fiddler中查询会话
  17. Fiddler中保存会话
  18. Fiddler的script系统
  19. 如何在VS调试网站的时候使用Fiddler
  20. Response 是乱码的

Fiddler的基本介绍

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

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

Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统,并且能使用.net语言进行扩展

你对HTTP 协议越了解, 你就能越掌握Fiddler的使用方法. 你越使用Fiddler,就越能帮助你了解HTTP协议.

Fiddler无论对开发人员或者测试人员来说,都是非常有用的工具

Fiddler的工作原理

Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1, 端口:8888. 当Fiddler退出的时候它会自动注销,这样就不会影响别的程序。不过如果Fiddler非正常退出,这时候因为Fiddler没有自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler.

 

同类的其它工具

同类的工具有: httpwatch, firebug, wireshark

 

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如何捕获HTTPS会话

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

 选中checkbox, 弹出如下的对话框,点击"YES"

点击"Yes" 后,就设置好了

Fiddler的基本界面

 看看Fiddler的基本界面

 

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

 

Fiddler的HTTP统计视图

通过陈列出所有的HTTP通信量,Fiddler可以很容易的向您展示哪些文件生成了您当前请求的页面。使用Statistics页签,用户可以通过选择多个会话来得来这几个会话的总的信息统计,比如多个请求和传输的字节数。

选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间。从条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化

QuickExec命令行的使用

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

常见得命令有

help  打开官方的使用页面介绍,所有的命令都会列出来

cls    清屏  (Ctrl+x 也可以清屏)

select  选择会话的命令

?.png  用来选择png后缀的图片

bpu  截获request

 

Fiddler中设置断点修改Request

[作者:小坦克]  Fiddler最强大的功能莫过于设置断点了,设置好断点后,你可以修改httpRequest 的任何信息包括host, cookie或者表单中的数据。设置断点有两种方法

第一种:打开Fiddler 点击Rules-> Automatic Breakpoint  ->Before Requests(这种方法会中断所有的会话)

如何消除命令呢?  点击Rules-> Automatic Breakpoint  ->Disabled

第二种:  在命令行中输入命令:  bpu www.baidu.com   (这种方法只会中断www.baidu.com)

如何消除命令呢?  在命令行中输入命令 bpu

 

看个实例,模拟博客园的登录, 在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 如下图所示。
5. 结果是正确地登录了博客园

 

 

Fiddler中设置断点修改Response

当然Fiddler中也能修改Response

第一种:打开Fiddler 点击Rules-> Automatic Breakpoint  ->After Response  (这种方法会中断所有的会话)

如何消除命令呢?  点击Rules-> Automatic Breakpoint  ->Disabled

第二种:  在命令行中输入命令:  bpafter www.baidu.com   (这种方法只会中断www.baidu.com)

如何消除命令呢?  在命令行中输入命令 bpafter,

具体用法和上节差不多,就不多说了。

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中如何过滤会话

每次使用Fiddler, 打开一个网站,都能在Fiddler中看到几十个会话,看得眼花缭乱。最好的办法是过滤掉一些会话,比如过滤掉图片的会话. Fiddler中有过滤的功能, 在右边的Filters tab中,里面有很多选项, 稍微研究下,就知道怎么用。

 

Fiddler中会话比较功能

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

 

Fiddler中提供的编码小工具

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

Fiddler中查询会话

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

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 就会多了一个Fiddler Script tab, 如下图

在里面我们就可以编写脚本了, 看个实例 让所有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 就可以了

 

第二个办法就是在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使用技巧

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

4. fiddler命令

常用命令:

  1. 选择类:?text、>size、<size、=status、@host、
  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

fiddler

5.使用fiddler进行数据分析

fiddler

6.代码查看器-双击session(需下载插件,见后面)

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

7.请求构建器(Request Builder)

fiddler 
可以创建任意数据的请求,如上,输入url后点击Execute按钮

8.过滤器

fiddler 
过滤器可以对左侧的数据流列表进行过滤,我们可以标记、修改或隐藏某些特征的数据流。如上图,通过过滤只展现host为p.baidu.com的请求

9.AutoResponse功能

fiddler 
这个功能可以算的上是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 
提供了常用的一些文本编解码的转换。

11.模拟user-agent

在做mobile上的网页开发时,经常需要修改user-agents为iphone,如下图 
fiddler 
而通过fiddler可以直接修改所有请求的user-agents,这样很方便,默认没有iphone的user-agents,需要自己修改配置——可以编辑fiddler Rules来增加和变更(Rules->Customize Rules

12.模拟慢速网络

fiddler

13.对两个数据流进行比较

fiddler

14.Fiddler提供加载时间瀑布图

fiddler

15.Fiddler扩展插件安装

  1. 代码高亮插件 http://www.fiddler2.com/redir/?id=SYNTAXVIEWINSTALL

fiddler

  1. javascript代码格式化插件 http://www.fiddler2.com/dl/FiddlerJSFormatSetup.exe安装完毕后,在任何一条js请求后点击右键,选择Make Javascript Pretty
  2. 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)

OnBeforeRequest范例

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

fiddler

17.为啥有时捕获不到:

  1. 手动修改浏览器代理ip地址为:127.0.0.1:8888
  2. 检查fiddler捕获开关

fiddler

  1. 检查过滤器设置(filters)

fiddler


REF:http://www.lovesunlife.com/?p=127

本文转载自:http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html#yuanli

大数据之路
粉丝 1620
博文 514
码字总数 330489
作品 0
武汉
架构师
私信 提问
加载中

评论(1)

威哥
威哥
一直在用,但是具体理论还是不是很懂,很详细,应该理解了
Web/HTTP 调试利器(Fiddler)

简述 Fiddler 是一个 http 协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的 http 通讯,设置断点,查看所有的“进出”Fiddler 的数据(指 cookie、html、js、css 等文件,这些...

潘志闻
2016/05/23
0
0
认识Fiddler——Web调试利器

你好!我是猿教授。 今天为你介绍另一款神级工具……对,「Web调试利器Fiddler」! 官方下载地址:https://www.telerik.com/download/fiddler 1.Fiddler是什么? Fiddler是一个http协议调试代...

猿教授
2017/09/10
0
0
Web开发又一利器之 Fiddler 使用教程

1.引言 在当前web开发工具满天飞的年代,很难想象当时在没有这些工具的年代,我们是怎么挺过来的。既然时代已经赋予我们如此之多的精良工具,那么就在工作之中尽情享用吧。 在需要截获客户端...

不最醉不龟归
2016/11/21
64
0
web调试利器_fiddler

此文已由作者夏君授权网易云社区发布。 欢迎访问网易云社区,了解更多网易技术产品运营经验。 一、fiddler简介 直接引用官网介绍 The free web debugging proxy for any browser, system or ...

网易云
2018/10/23
0
0
Fiddler插件--Rosin

Rosin是一个Fiddler插件,协助开发者进行移动端页面开发调试,是移动端web开发、调试利器。 分支说明 由于Fiddler有2+和4+两种不同的版本,分别对应.Net Framework 2.0和.Net Framework 4.0。...

匿名
2016/03/22
795
0

没有更多内容

加载失败,请刷新页面

加载更多

加载JDBC驱动

我们平时在连接数据库时需要加载驱动,通常做法是将JDBC驱动程序放在类路径中的某个位置,然后用Class.forName()查找并加载驱动程序。 这也就意味着要么将驱动程序打包到jar中,要么将驱动程...

uknow8692
20分钟前
4
0
TCP三次握手详情

TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的、基于字节流的通信协议,数据在传输前要建立连接,传输完毕后还要断开连接。 客户端在收发数据前要使用 conn...

vinci321
22分钟前
4
0
适用于PDF文件的MIME媒体类型

使用PDF时,我遇到了MIME类型application/pdf和application/x-pdf等。 这两种类型之间是否存在差异,如果是这样,它是什么? 一个比另一个更受欢迎吗? 我正在开发一个必须提供大量PDF的网络...

技术盛宴
28分钟前
5
0
Docker数据挂载

Docker数据管理 在容器中管理数据主要有两种方式: 数据卷(Volumes) 挂载主机目录(Bind mounts) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,它绕过UFS,可以提供很多有用的特...

CodingDiary
40分钟前
6
0
jQuery获取特定的选项标签文本

好吧,说我有这个: <select id='list'> <option value='1'>Option A</option> <option value='2'>Option B</option> <option value='3'>Option C</option></select> 如果我想......

javail
44分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部