WEB调试神器:Fiddler快速入门

原创
2013/10/17 00:01
阅读数 2K

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
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
5 收藏
1
分享
返回顶部
顶部