WEB调试神器：Fiddler快速入门

Fiddler是什么？

Fiddler是一个可以监控所有http(s)流量的WEB调试代理。

Fiddler是如何工作的？

图中的WinINet其实是一个API借口，允许应用程序通过FTP，HTTP协议去访问网络资源。

而我们在IE下的那个connections中的LAN设置，可以说是WinINet的UI吧。

Fiddler是一个web代理。它并不关心网络流量的来源和去处，这意味着你让很多的设备，应用程序连接到Fiddler上。

Getting started

主界面

web sessions

关键字段列表：

• #ID# - Fiddler自动生成的ID
• Result - HTTP响应状态码
• Protocol - session所使用的协议(HTTP/HTTPS/FTP)
• Host - 主机名
• URL - 请求路径

session中左侧的icon

请求信息监视器(Inspectors)

自动响应（AutoResponder）

官方文档：AutoResponder Reference

1. 字符串直接量（String Literals）

示例RULE（规则中的字符串不区分大小写）

strexample

示例Action

http://ted.me/fiddler/match_string_response.txt

javascript代码

$.getJSON( 'http://ted.me/fiddler/strexample.html',function( serverData ){
    console.log( 'AutoResponder match string rule' )
    console.log( serverData );
} );

当然我们还可以在字符串直接量前面添加NOT进行匹配

NOT:"string to match"

2. URL精确匹配（Exact Match）

格式

EXACT:http://www.example.com/path

示例RULE

EXACT:http://ted.me/fiddler/exact.html

示例Action

http://ted.me/fiddler/exact_url_response.txt

javascript代码

$.getJSON( 'http://ted.me/fiddler/exact.html',function( serverData ){
    console.log( 'exact match' )
    console.log( serverData );
} );

3. 正则表达式（Regular Expressions）

regex:.+

示例RULE

regex:.+before\.css.*$

示例Action

http://ted.me/fiddler/after.css

Fiddler支持的快捷指令

• ?sometext
• >size
• <size
• =status
• =method
• @host
• bpafter
• bpm
• bps
• cls
• go
• ...

断点（Break Point）

缘起

首先看看之前为了调试一个IE浏览器下的CSS样式的BUG：z-index

我接手这个问题的时候，本机并没有任何开发环境以及项目的代码。这个问题虽然不紧急，但是我并不希望在本地搭建一次项目，然后用Visual Studio设一下断点，然后傻乎乎地运行。

于是我思考应该有办法使用Fiddler进行调试。当时我使用了AutoResponder，也就是我不区分任何的URL，都进行断点。然后在IE的开发者工具一步一步调试。

如何使用

Fiddler断点分两种情况，一种是在请求送达服务器之前断点，此时，我们无法访问服务器响应；

另外一种则是在请求送达服务器，并且服务器已经做出响应后，再设置断点。这时候，我们可以完整访问当服务器的响应。

这两种断点对应的快捷指令，分别是bpm以及bpafter。

自动断点(auto breakpoint)

自动响应(auto responder)

参考文档

1. 正则表达式（RegEx）——快速参考
2. Fiddler In Action - Part 1
3. Fiddler In Action - Part 2
4. Using QuickExec
5. User Interface Guide