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工具使用
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"，设置成功。
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中断会话，修改成正确的用户名密码，这样就能成功登录。
- 使用IE打开博客园的登录界面 http://passport.cnblogs.com/login.aspx
- 打开Fiddler, 在命令行中输入
bpu http://passport.cnblogs.com/login.aspx - 输入错误的用户名和密码，点击登录。
-
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
具体用法和上节差不多。
Fiddler中创建AutoResponder规则
Fiddler 的AutoResponder tab允许从本地返回文件，而不用将http request 发送到服务器上。
举例：
- 打开博客园首页，把博客园的logo图片保存到本地，并且对图片做些修改。
- 打开Fiddler，找到logo图片的会话，http://static.cnblogs.com/images/logo_2012_lantern_festival.gif，把这个会话拖到AutoResponer Tab下。
- 选择Enable automatic reaponses 和Unmatched requests passthrough
- 在下面的Rule Editor 下面选择 Find a file... 选择本地保存的图片，最后点击Save 保存下。
-
再用IE博客园首页, 你会看到首页的图片用的是本地的。
image.png
image.png
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被压缩了，可以通过两种方法去解压缩。
- 点击Response Raw上方的"Response is encoded any may need to be decoded before inspection. click here to transform"。
- 选中工具栏中的"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
