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。

image.png
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

image.png
image.png

Fiddler如何捕获HTTPS会话

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

image.png

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

image.png
image.png

Fiddler的基本界面

image.png

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

image.png

Fiddler的HTTP统计视图

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

image.png

QuickExec命令行的使用

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

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

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，正确地登录了博客园。

   
   image.png

Fiddler中设置断点修改Response

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

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博客园首页, 你会看到首页的图片用的是本地的。

   
   image.png
   image.png

Fiddler中如何过滤会话

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

Fiddler中会话比较功能

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

image.png

Fiddler中提供的编码小工具

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

image.png

Fiddler中查询会话

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

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... ，如下图：

image.png
安装成功后，Fiddler就会多了一个Fiddler Script tab。
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 就可以了。

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"。这样会自动解压缩。
   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的界面
   image.png
   （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
   image.png
   （5）使用fiddler进行数据分析
   image.png
   （6）代码查看器-双击session（需下载插件，见后面）
   image.png
   利用查看器提供的很多形式，我们可以查看数据流的内容。
   （7）请求构建器（Request Builder）
   image.png
   可以创建任意数据的请求，如上，输入url后，点击Execute按钮。
   （8）过滤器
   image.png
   过滤器可以对左侧的数据流列表进行过滤，可以标记、修改或隐藏某些特征的数据流。如上图，通过过滤只展现host为p.baidu.com的请求。
   （9）AutoResponse功能
   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 编码解码
   image.png
   提供了常用的一些文本编解码的转换。
   （11）模拟user-agent
   在做mobile上的网页开发时，经常需要修改user-agents为iphone，如下图 ：
   image.png
   而通过fiddler，可以直接修改所有请求的user-agents，这样很方便，默认没有iphone的user-agents，需要自己修改配置——可以编辑fiddler Rules来增加和变更（Rules->Customize Rules）。
   （12）模拟慢速网络
   image.png
   （13）对两个数据流进行比较
   image.png
   （14）Fiddler提供加载时间瀑布图
   image.png
   （15）Fiddler扩展插件安装
   1、代码高亮插件
   http://www.fiddler2.com/redir/?id=SYNTAXVIEWINSTALL
   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）。
   image.png