使用Fiddler做抓包分析-前端进阶之旅

# 一、Fiddler简介

Fiddler是位于客户端和服务器端的HTTP代理，也是目前最常用的http抓包工具之一。它能够记录客户端和服务器之间的所有 HTTP请求，可以针对特定的HTTP请求，分析请求数据、设置断点、调试web应用、修改请求的数据，甚至可以修改服务器返回的数据，功能非常强大，是web调试的利器

客户端的所有请求都要先经过Fiddler，然后转发到相应的服务器，反之，服务器端的所有响应，也都会先经过Fiddler然后发送到客户端
使用了Fiddler之后，web客户端和服务器的请求如下所示

主界面中主要包括四个常用的块

Fiddler的菜单栏，上图绿色部分。包括捕获http请求，停止捕获请求，保存http请求，载入本地session、设置捕获规则等功能。
Fiddler的工具栏,上图红色部分。包括Fiddler针对当前view的操作（暂停，清除session,decode模式、清除缓存等）。
web Session面板，上图黄色区域，主要是Fiddler抓取到的每条http请求（每一条称为一个session）,主要包含了请求的url，协议，状态码，body等信息，详细的字段含义如下图所示

# 二、HTTP请求图标说明

# 三、Statistic

关于HTTP请求的性能和其他数据分析

我们可以从中看出一些基本性能数据：如DNS解析的时间消耗是8ms,建立TCP/IP连接的时间消耗是8ms等等信息

# 四、Inspectors

分为上下两个部分，上半部分是请求头部分，下半部分是响应头部分。对于每一部分，提供了多种不同格式查看每个请求和响应的内容。

JPG 格式使用 ImageView 就可以看到图片
HTML/JS/CSS 使用 TextView可以看到响应的内容。
Raw标签可以查看原始的符合HTTP标准的请求和响应头。
Auth则可以查看授权Proxy-Authorization 和 Authorization的相关信息。
Cookies标签可以看到请求的cookie和响应的set-cookie头信息

# 五、Composer

老版本的fiddler中叫request-builder.顾名思义，可以构建相应的请求，有两种常用的方式构建请求

Parsed 输入请求的url之后executed即可，也可以修改相应的头信息（如添加常用的accept, host, referrer, cookie，cache-control等头部）后execute`.
Raw。使用HTTP头部信息构建http请求。与上类似

# 六、fiddler过滤会话

问题：每次使用Fiddler, 打开一个网站，都能在Fiddler中看到几十个会话，看得眼花缭乱。

期望：只想抓取自己想要的请求

# 七、Response乱码时的处理方法

问题：有时候我们看到Response中的HTML是乱码的，这是因为HTML被压缩了，我们可以通过两种方法去解压缩

方法二：选中工具栏中的"Decode"。这样会自动解压缩

# 八、反向代理-AutoResponder

原理：利用fiddler作為反向代理。意思就是将外界的request请求端口修改掉！改写返回数据，最实用的功能

用浏览器随意输入一个网址，如http://www.baidu.com/
选中序号16记录，右击-勾选“Unlock fo Editing”,选择Fiddler右侧reponse块下的TextView，这里修改title,如图：

选择Fiddler右侧reponse块下的TextView，这里修改title,如图：

去掉“Unlock for Editing”，再选择右侧上方的AutoResponder,勾选下方的checkbox选框，并将序号16托到下方，同时，里面会多条记录，如下图：

回到浏览器，刷新页面，如图，标题变为上面改的内容

# 一、Fiddler简介

Fiddler是位于客户端和服务器端的HTTP代理，也是目前最常用的http抓包工具之一。它能够记录客户端和服务器之间的所有 HTTP请求，可以针对特定的HTTP请求，分析请求数据、设置断点、调试web应用、修改请求的数据，甚至可以修改服务器返回的数据，功能非常强大，是web调试的利器

客户端的所有请求都要先经过Fiddler，然后转发到相应的服务器，反之，服务器端的所有响应，也都会先经过Fiddler然后发送到客户端
使用了Fiddler之后，web客户端和服务器的请求如下所示

主界面中主要包括四个常用的块

Fiddler的菜单栏，上图绿色部分。包括捕获http请求，停止捕获请求，保存http请求，载入本地session、设置捕获规则等功能。
Fiddler的工具栏,上图红色部分。包括Fiddler针对当前view的操作（暂停，清除session,decode模式、清除缓存等）。
web Session面板，上图黄色区域，主要是Fiddler抓取到的每条http请求（每一条称为一个session）,主要包含了请求的url，协议，状态码，body等信息，详细的字段含义如下图所示

# 二、HTTP请求图标说明

# 三、Statistic

关于HTTP请求的性能和其他数据分析

我们可以从中看出一些基本性能数据：如DNS解析的时间消耗是8ms,建立TCP/IP连接的时间消耗是8ms等等信息

# 四、Inspectors

分为上下两个部分，上半部分是请求头部分，下半部分是响应头部分。对于每一部分，提供了多种不同格式查看每个请求和响应的内容。

JPG 格式使用 ImageView 就可以看到图片
HTML/JS/CSS 使用 TextView可以看到响应的内容。
Raw标签可以查看原始的符合HTTP标准的请求和响应头。
Auth则可以查看授权Proxy-Authorization 和 Authorization的相关信息。
Cookies标签可以看到请求的cookie和响应的set-cookie头信息

# 五、Composer

老版本的fiddler中叫request-builder.顾名思义，可以构建相应的请求，有两种常用的方式构建请求

Parsed 输入请求的url之后executed即可，也可以修改相应的头信息（如添加常用的accept, host, referrer, cookie，cache-control等头部）后execute`.
Raw。使用HTTP头部信息构建http请求。与上类似

# 六、fiddler过滤会话

问题：每次使用Fiddler, 打开一个网站，都能在Fiddler中看到几十个会话，看得眼花缭乱。

期望：只想抓取自己想要的请求

# 七、Response乱码时的处理方法

问题：有时候我们看到Response中的HTML是乱码的，这是因为HTML被压缩了，我们可以通过两种方法去解压缩

方法二：选中工具栏中的"Decode"。这样会自动解压缩

# 八、反向代理-AutoResponder

原理：利用fiddler作為反向代理。意思就是将外界的request请求端口修改掉！改写返回数据，最实用的功能

用浏览器随意输入一个网址，如http://www.baidu.com/
选中序号16记录，右击-勾选“Unlock fo Editing”,选择Fiddler右侧reponse块下的TextView，这里修改title,如图：

选择Fiddler右侧reponse块下的TextView，这里修改title,如图：

去掉“Unlock for Editing”，再选择右侧上方的AutoResponder,勾选下方的checkbox选框，并将序号16托到下方，同时，里面会多条记录，如下图：

回到浏览器，刷新页面，如图，标题变为上面改的内容