Filddler抓包
原因
在现实项目中,由于开发的经常调试,接口的不稳定,和接口文档的不及时更新,我们选择做接口测试,更多的需要自己抓包分析,接口。
为什么选择Fiddler
a.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大。模拟http请求的功能也不够,且firebug常常是需要“无刷新修改”,如果刷新了页面,所有的修改都不会保存。
b.Wireshark是通用的抓包工具,但是比较庞大,对于只需要抓取http请求的应用来说,似乎有些大材小用。
c.Httpwatch也是比较常用的http抓包工具,但是只支持IE和firefox浏览器(其他浏览器可能会有相应的插件),对于想要调试chrome浏览器的http请求,似乎稍显无力,
而Fiddler2 是一个使用本地 127.0.0.1:8888 的 HTTP 代理,任何能够设置 HTTP 代理为 127.0.0.1:8888 的浏览器和应用程序都可以使用 Fiddler。
【官方文档】(http://docs.telerik.com/fiddler/KnowledgeBase/Filters)
Fiddler的工作原理
Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888。它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据、设置断点、调试web应用、修改请求的数据,甚至可以修改服务器返回的数据,功能非常强大,是web调试的利器。当Fiddler退出的时候它会自动注销,这样就不会影响别的 程序。不过如果Fiddler非正常退出,这时候因为Fiddler没有自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler

Fiddler的基本界面
我使用的fiddler4

我们要开启抓包,要确保Capture Traffic是开启,在File –> Capture Traffic。开启后再左下角会有显示,当然也可以直接点击左下角的图标来关闭/开启抓包功能。

我们的Fiddler默认默认是没开启https支持的,当项目中的接口使用的是https协议时,需要打开该功能
- 打开fiddler配置Tools –> Options.... ->HTTPS(安装证书)

同时勾选“Decrypt HTTPS traffic”
如果需要监听不可信的证书的HTTPS请求的话,需要勾选“Ignore servercertificate errors”
- Fiddler开始工作了,抓到的数据包就会显示在列表里面

【#】----------------- 抓取HTTP Request的顺序,从1开始,以此递增
【Result HTTP】-- 状态码
【Protocol 】-------- 请求使用的协议,如HTTP/HTTPS/FTP等
【Host 】------------ 请求地址的主机名
【URL 】----------- 请求资源的位置
【Body 】----------- 该请求的大小
【Caching 】------- 请求的缓存过期时间或者缓存控制值
【Content-Type】--- 请求响应的类型
【Process】---------- 发送此请求的进程:进程ID
【Comments 】------ 允许用户为此回话添加备注
【Custom】----------- 允许用户设置自定义值

Fiddler 内置命令与断点

命令 | 对应请求项 | 介绍 | 示例 |
---|---|---|---|
? | All | 问号后边跟一个字符串,可以匹配出包含这个字符串的请求 | |
> | Body | 大于号后面跟一个数字,可以匹配出请求大小,大于这个数字请求 | >1000 |
< | Body | 小于号跟大于号相反,匹配出请求大小,小于这个数字的请求 | <100 |
= | Result | 等于号后面跟数字,可以匹配HTTP返回码 | =200 |
@ | Host | @后面跟Host,可以匹配域名 | @www.baidu.com |
select | Content-Type | select后面跟响应类型,可以匹配到相关的类型 | select image |
cls | All | 清空当前所有请求 | cls |
dump | All | 将所有请求打包成saz压缩包,保存到“我的文档\Fiddler2\Captures”目录下 | dump |
start | All | 开始监听请求 | start |
stop | All | 停止监听请求 | stop |
断点命令 | |||
bpafter | All | bpafter后边跟一个字符串,表示中断所有包含该字符串的请求 | bpafter baidu(输入bpafter解除断点) |
bpu | All | 跟bpafter差不多,只不过这个是收到请求了,中断响应 | bpu baidu(输入bpu解除断点) |
bps | Result | 后面跟状态吗,表示中断所有是这个状态码的请求 | bps 200(输入bps解除断点) |
bpv / bpm | HTTP方法 | 只中断HTTP方法的命令,HTTP方法如POST、GET | bpv get(输入bpv解除断点) |
g / go | All | 放行所有中断下来的请求 | g |
Fiddler的菜单栏

1. File菜单
File菜单中的命令主要支持完成通过Fiddler来启动和停止web流量的捕获(capture),也可以加载或存储捕获的流量。)

(1)Capture Traffic是个开关,可以控制是否把Fiddler注册为系统代理。当把Fiddler注册为系统代理时,所有依赖于WinINET代理的应用(如IE浏览器和其他浏览器)会把Web请求发送给Fiddler.
(2)New Viewer是用来打开一个新的fiddler窗口
(3)Load Archive用于重新加载之前捕获的以SAZ文件格式保存的流量。
(4)Save子菜单中的选项支持以多种方式把流量保存到文件中;该菜单选项和Web Session列表中的上下文菜单中的选项相同。
(5)Import Sessions...支持导入从其他工具捕获的流量,也支持导入以其他格式存储的流量。
(6)Export Sessions...支持把Fiddler捕捉到的Session以多种文件格式保存
(7)Exit菜单命令会取消把Fiddler注册为系统代理,并关闭工具栏
2. Edit菜单
Edit菜单中的绝大多数命令都需要作用于Web Session中当前选中的Session,因此除非选中一个或多个Session,否则大多数命令都不可用

(1)Copy下面的几个子菜单分别支持复制选中Session的某些信息。
(2)Remove下面的子菜单分别支持从Web Session列表中删除全部、选择或未选中的Session
(3)Select All命令选择Sessions列表的所有内容。
(4)Paste as Session命令会基于剪贴板上的内容,生成一个或多个模拟的Web Session.
(5)Mark子菜单支持选择一种颜色来标记Web Session列表中选中的Session.
(6)Unlock for Editing 菜单命令会对某个选中的Web Session解锁,支持使用Inspectors编辑Session的所有请求和响应。
(7)Find Session...命令会打开Find Session窗口,搜索捕获到的数据流。
3.Rules菜单

(1)Hide Image Request触发器控制是否在Web Session列表中显示图像类Session.
(2)Hide CONNECTS触发器控制是否在Web Session列表中显示使用CONNECT请求方法的Session.
(3)Automatic Breakpoints子菜单控制Fiddler是否会自动在Before Requests或After Responses处设置断点。Ignore Image触发器控制这些断电是否作用于图片请求
(4)Customize Rules...菜单命令会使用配置的脚本编辑器打开当前的FiddlerScript文件
(5)如果选中Require Proxy Authentication菜单项,所有未提交Proxy-Authorization请求头的请求会返回HTTP/407响应,要求客户端安装证书
该规则可以用于测试HTTP客户端,确保这些规则在有证书的客户端服务器上可以正常工作。
(6)如果选中Apply GZIP Encoding菜单项,只要请求包含具有gzip标识的Accept-Encoding请求头,就会对除了图片以外的所有响应使用GZIP HTTP进行压缩。
该规则用于测试使用GZIP选项支持的客户端是否真正对内容进行压缩。该选项还支持性能调优,并且计算传输的压缩后的数据流的字节数。
(7)如果选中Remove All Encoding,会删除所有请求和响应的HTTP内容编码和传输编码
(8)Hide 304s选项会隐藏包含HTTP/304 Not Modified状态的响应的所有Session.
(9)Request Japanese Content选项会把所有请求的Accept-Encoding请求头设置或替换为ja 标识,表示客户端希望响应以日语形式发送
(10)User-Agents子菜单支持把所有请求的User-Agent请求头设置或替换成指定值。
(11)performance子菜单提供影响Web性能的简单选项:

4.Tools菜单

(1)Fiddler Options...打开Fiddler Options窗口
(2)WinINET Options...打开IE的Internet Options窗口
(3)Clear WinINET Cache选项会清空IE和其他应用中所使用的WinINET缓存中的所有文件
(4)Clear WinINET Cookies选项会清空IE和其他应用中所发送的WinINET Cookie. Session的Cookies还是保持不变
(5)TextWizard...选项会启动TextWizard窗口,支持对文本进行编码和解码
(6)Compare Session选项只有当选中Web Session列表中的两个Session时才有效。
(7)Reset Script
(8)Sandbox,打开http://webdbg.com/sandbox/
(9)View IE Cache
(10)HOSTS...选项会打开Fiddler的Host Remapping工具
(11)New Session Clipboard..打开一个Session的剪贴板
5.View菜单

(1)Show Toolbar控制Fiddler工具栏是否可见
(2)Default Layout、Stacked Layout、Wide Layout三种界面布局
(3)Minimize to Tray或按下CTRL+M可以最小化Fiddler到系统托盘中
(4)Squish Session List控制Web Session列表是否水平收缩
(5)AutoScroll Session list选项控制当添加新的Session时,Fiddler是否会自动滚动到Session列表的底部
6.Help菜单

Fiddler的工具快捷栏

1.勾选电脑端口

2.增加备注

选择需要添加备注的请求地址,点击左上角第二个按钮即可添加备注
添加成功后将会在Comments栏下查看到该备注
3.回放按钮(Ctrl + R)

当我们需要再一次对某个请求进行发送的时候,Fiddler提供了回放的功能可以再一次发送请求。
4.清空监控面板(Ctrl + X)

可以清楚面板上全部或某些请求。
5.调试bug

通过结合状态栏中的按钮,可以调试时请求的状态进行拦截,上图状态栏处的箭头向上,表示拦截该请求发送时候。

该状态栏箭头乡下,表示Fiddler拦截请求回来的时候。放行断点的时候单机上方的GO的按钮即可
6.模式切换

Fiddler有两种模式,默认是缓冲模式
7.解压请求

将http请求的东西解压出来,方便阅览
8.会话保存

Fiddler默认保存 All sessions,需要注意的是Fiddler保存的会话状态越多,占用的内存越大
9.过滤请求

该功能可以只捕获某个客户端发送的请求,点击Any Process拖动鼠标到指定客户端上。
10.查找

一般的工具都有的功能,选择以什么颜色显示可以更方便查看相应的内容
11.会话保存


选中需要保存会话的请求们,点击保存,下次需要在查看的时候打开即可。
***12.截屏 **

该截屏还有计时器的功能。
13.计时器

计时功能,右击清空
14.快速启动浏览器

**15.清楚缓存 **

将ie浏览器的缓存清空的功能。
16.编码/解码

当浏览器的某些路径被编码后,利用这个工具可以得到相应解码后的路径,别的文本信息也可以
17.窗体分离

Filddler会话详情

1. Statistic
关于HTTP请求的性能和其他数据分析:

我们可以从中看出一些基本性能数据:如DNS解析的时间消耗是8ms,建立TCP/IP连接的时间消耗是8ms等等信息
2. Inspectors
分为上下两个部分,上半部分是请求头部分,下半部分是响应头部分。
对于每一部分,提供了多种不同格式查看每个请求和响应的内容。JPG 格式使用 ImageView 就可以看到图片,HTML/JS/CSS 使用 TextView 可以看到响应的内容。Raw标签可以查看原始的符合HTTP标准的请求和响应头。Auth则可以查看授权Proxy-Authorization 和 Authorization的相关信息。Cookies标签可以看到请求的cookie和响应的set-cookie头信息。


3. AutoResponder
Fiddler比较重要且比较强大的功能之一。可用于拦截某一请求,并重定向到本地的资源,或者使用Fiddler的内置响应。可用于调试服务器端代码而无需修改服务器端的代码和配置,因为拦截和重定向后,实际上访问的是本地的文件或者得到的是Fiddler的内置响应。
请将 Enable automatic responses和Unmatched requests passthrough打勾。
RuleEditor填写本地指向文件。

Fiddler支持的拦截重定向的方式:

因此,如果要调试服务器的某个脚本文件,可以将该脚本拦截到本地,在本地修改完脚本之后,再修改服务器端的内容,这可以保证,尽量在真实的环境下去调试,从而最大限度的减少bug发生的可能性。
不仅是单个url,Fiddler支持多种url匹配的方式:
I. 字符匹配
如 example可以匹配 http://www.example.com和http://example.com.cn
II. 完全匹配
以EXACT开头表示完全匹配,如上边的例子EXACT:http://blog.csdn.net/ohmygirl
III. 正则表达式匹配
以regex: 开头,使用正则表达式来匹配URL
如:regex:(?insx).*.(css|js|php)$ 表示匹配所有以css,js,php结尾的请求url
4. Composer
可模拟向服务器发送数据的过程

Parsed和Raw两种编辑方式
(1)Parsed 输入请求的url之后executed即可,也可以修改相应的头信息(如添加常用的accept, host, referrer, cookie,cache-control等头部)后execute.把Request分成3部分:Request line,Request Headesr,Request Body,很容易创建一个Request
(2)Raw。使用HTTP头部信息构建http请求。与上类似,需要一行一行手动写一个Request
5. Filter
Fiddler另一个比较强大的功能。Fiddler提供了多维度的过滤规则,Fiddler的过滤器非常强大,可以过滤特定http状态码的请求,可以过滤特定请求类型的http请求(如css请求,image请求,js请求等),可以过滤请求报文大于或则小于指定大小(byte)的请求:

1.是否启用filters。
2.我们可以维护多套filters,在不同的情形下加载不同的filter,在Actions中可以把当前的filter保存起来,也可以加载以前保存的filter

3.根据主机名信息的filter。其中第一个下拉框是只显示内网或者外网选项,

另一个是下拉框结合它下面的输入框来完成根据主机名信息显示或者隐藏或者标记指定请求

下图是一个例子,可以简单理解为隐藏对本机的请求。

4.根据进程信息的filter,第一个checkbox选上就可以选择进程了,那么fiddler将只显示该进程发出的请求,另外两个一个是指关心IE,另一个是隐藏来自service host的请求

5.根据request header的filter。
Show only if URL contains 和 Hide if URL contains 使用方法类似 功能相反。都是url中包含某些字符的filter,多种情况空格分隔。支持正则表达式和完全匹配,如下是个例子,可以简单理解为隐藏所有js和css请求

6.这个部分是各种各样的断点,fiddler是有断点功能的,可以在请求发送时断住,之后修改请求,再发送。当然也可以在响应的时候断住,做修改。而且fiddler还可以模拟响应,根本不发送给server端,在项目开发阶段,server端没有准备好API这个就特别有用了,或者用了复现一些问题
7.如果server端的响应代码属于或者不属于哪一类就隐藏
8.这部分是根据响应类型和大小的filter,前一半是显示隐藏的filter,后block的filter。block的filter也挺有意思,如果你选中了block css那么浏览器就加载不到css了

9.是对response header的flag和修改。比较有用的是如果你想知道哪些请求修改了cookie那么就可以选中第一个checkbox
5.Timeline
显示session请求到响应的时间表,横向为时间轴,纵向为session列表,鼠标移到timeline页签上,在底部会显示四个数据:session编号和URL、session的响应类型、发送字节数和接收字节数

6.Fiddler的script系统
Fiddler最复杂的莫过于script系统了,官方的帮助文档: http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp。

把这段脚本放在OnBeforeRequest(oSession: Session) 方法下,并且点击"Save script"
if (oSession.HostnameIs("www.cnblogs.com")) {
oSession["ui-color"] = "red";
}
这样所有的cnblogs的会话都会显示红色。
7.log

Fiddler断点和代理
代理

有两种方法设置断点
1.fiddler菜单栏->rules->automatic Breakpoints->选择断点方式,这种方式下设定的断点会对之后的所有HTTP请求有效。
有两个断点位置:
a. before response。也就是发送请求之后,但是Fiddler代理中转之前,这时可以修改请求的数据。
b.after response。也就是服务器响应之后,但是在Fiddler将响应中转给客户端之前。这时可以修改响应的结果。
2.命令行下输入。Bpafter xxx或者bpv,bpu,bpm等设置断点。这种断点只针对特定类型的请求。
设置响应后断点(after response breakpoint),可以通过命令行设置:bpafter localhost。键入回车之后,web再次访问文件,通过Fiddler的web session界面可以看到,请求已经被挂起来了,而web浏览器也一直处于加载的状态。观察右侧的inspector面板下,也出现了新的东西:

切换到textView子面板,选择需要修改的部分,然后点击 “run to complete“,便可回送修改后的响应。假设我们修改后的内容如下:

终止断点的方式有:
-
在inspector界面点击“run complete“即会终止本次HTTP请求的断点。
-
输入go命令,也会使得当前的请求跳过断点。
-
在rules->auto breakpoint中disabled断点即可。
总结
写FIddler写太多了,参考别人资料,写一个大集合,同时也可以加深自己的理解,方便自己往后的回顾。