1. Fiddler 是什么?
Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅。
Fiddler是以代理服务器的方式,监听系统的网络数据流动。运行Fiddler后,就会在本地打开8888端口,网络数据流通过Fiddler进行中转时,我们可以监视HTTP/HTTPS数据流的记录,并加以分析,甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具,对前端开发工作很有价值。
2. 主要功能
- 分析页面性能
- 分析http请求/响应数据
- 设置断点,调试线上错误
- 伪造数据请求,调试数据接口
3. Fiddler的界面
4. fiddler命令
常用命令:
- 选择类:?text、>size、<size、=status、@host、
- blod text、select、allbut、keeponly
- 断点类:bpafter、bps、bpv、bpm、bpu
- 控制类:hide、start、stop、show、quit
- 其他:cls/clear、dump、g/go、help、urlreplace
5.使用fiddler进行数据分析
6.代码查看器-双击session(需下载插件,见后面)
利用查看器提供的很多形式,我们可以查看数据流的内容。
7.请求构建器(Request Builder)
可以创建任意数据的请求,如上,输入url后点击Execute按钮
8.过滤器
过滤器可以对左侧的数据流列表进行过滤,我们可以标记、修改或隐藏某些特征的数据流。如上图,通过过滤只展现host为p.baidu.com的请求
9.AutoResponse功能
这个功能可以算的上是Fiddler最实用的功能,可以让我们修改服务器端返回的数据,例如让返回都是HTTP404或者读取本地文件作为返回内容。我们将在实例中介绍利用AutoResponse功能。
10.文本编码和解码
开启Tools -> Text Encode/Decode,支持编码:
- Base64编码解码
- URL Encode/Decode
- 十六进制编码
- Unicode编码解码
- HTML实体化编码解码
- UTF-7编码解码
- Deflated 编码解码
提供了常用的一些文本编解码的转换。
11.模拟user-agent
在做mobile上的网页开发时,经常需要修改user-agents为iphone,如下图
而通过fiddler可以直接修改所有请求的user-agents,这样很方便,默认没有iphone的user-agents,需要自己修改配置——可以编辑fiddler Rules来增加和变更(Rules->Customize Rules)
12.模拟慢速网络
13.对两个数据流进行比较
14.Fiddler提供加载时间瀑布图
15.Fiddler扩展插件安装
- 代码高亮插件 http://www.fiddler2.com/redir/?id=SYNTAXVIEWINSTALL
- javascript代码格式化插件 http://www.fiddler2.com/dl/FiddlerJSFormatSetup.exe安装完毕后,在任何一条js请求后点击右键,选择Make Javascript Pretty
- 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类两个最重要的事件:
- OnBeforeRequest(oSession: Session)
- OnBeforeResponse(oSession: Session)
OnBeforeRequest范例
通过上面代码,可以将js和css的session分别标示为红色和绿色,效果如下:
17.为啥有时捕获不到:
- 手动修改浏览器代理ip地址为:127.0.0.1:8888
- 检查fiddler捕获开关
- 检查过滤器设置(filters)