天天看点

Fiddler实战深入研究(二)

fiddler实战深入研究(二)

阅读目录

<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4637771.html#_labe0">fiddler不能捕获chrome的session的设置</a>

<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4637771.html#_labe1">理解数据包统计</a>

<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4637771.html#_labe2">请求重定向(autoresponder)</a>

<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4637771.html#_labe3">composer选项卡</a>

<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4637771.html#_labe4">filters选项卡断点调式</a>

<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/4637771.html#_labe5">fiddler 中的stave插件</a>

fiddler不能捕获chrome的session的设置

    我家里的电脑是使用的是fiddler4,fiddler目前都可以捕获到chrome的session,但是我公司还是使用的是fiddler2,因为我是开发人员,很喜欢使用chrome调式代码,所以经常fiddler捕获不到chrome下session。所以对这个可以做个总结,为了自己以后忘记了或者即将和我一样对chrome下的session捕获不到的同学一个帮助;

   1.  建议装一个switchysharp的chrome插件,为fiddler创建一个规则,代理到本地的8888端口(fiddler所用的端口)。安装switchysharp步骤可以看我这篇博客,如下:

<a target="_blank" href="http://www.cnblogs.com/tugenhua0707/p/3999174.html">http://www.cnblogs.com/tugenhua0707/p/3999174.html</a>

   2. 安装好后,chrome右上角有一个图标,点击选择 “选项”如下:

Fiddler实战深入研究(二)

进入如下界面,进行如下设置即可!

Fiddler实战深入研究(二)

接着点击保存即可~ 这样在需要的时候可以切换到fiddler;

Fiddler实战深入研究(二)

如上设置就可以使用了~

理解数据包统计

    我们代开fiddler后开启左下角的 “capturing”,比如我现在在chrome浏览器下进入淘宝首页后,我们可以使用fiddler把客户端同服务器端的所有数据包都记录下来,现在我们可以切换到右侧的选项卡中的statistics中查看数据统计信息;如下所示:

Fiddler实战深入研究(二)

1 中的框含义是:请求总数,请求包大小,响应包大小。

2 中的框含义是:请求的起始时间,响应结束时间,等待时间,握手时间,路由时间,tcp/ip传输时间。

3 中的框含义是:http状态码统计。

4 中的含义是:返回各种类型数据大小统计以及拼图展现。

如下饼图是根据4中的来展现的;如下所示:

Fiddler实战深入研究(二)

请求重定向(autoresponder)

  所谓请求在我们前端就是一些基本的css,js,图片等请求,重定向是指页面请求资源文件替换成其他需要替换成的文件。

  比如我们现在需要调式线上一个js或者css文件等,我们可以使用fiddler捕获这个文件的请求,然后复制线上一份文件(比如js或者css)代码放到本地,然后在本地的文件(js或者css)修改完后,替换线上的文件来调式,当一切都好了话,我们可以直接把代码提交到服务器上即可;如下所示:

Fiddler实战深入研究(二)

如上:enable automatic responses复选框的含义是:控制是否激活autoresponder选项卡,如果没有选中该选项,选项卡上的其他选项就不可选。

unmatched  requests passthrough 复选框的含义是: 如果选中该选项,不匹配的请求会正常发送到服务器,如果没有选中该选项,fiddler会为所有和该规则完全不匹配的http请求生成http/404 not found响应,比如我现在不勾选它;如下所示:

Fiddler实战深入研究(二)

那么我现在再来访问淘宝网,就访问不了,提示如下所示:

Fiddler实战深入研究(二)

enable latency的含义是:控制匹配某个规则的请求时立即执行,还是延迟latency字段中所指定的毫秒数。如果没有选中该选项,latency字段就不会显示,使用这个选项可以更准确地模拟现实中的服务器响应,取消该选项可以提升性能。如下所示:

Fiddler实战深入研究(二)

我们也可以点击右键进行毫秒数设置它,如下:

Fiddler实战深入研究(二)

在下方的rule editor选项卡中可以调整上面的请求替换,如下:

Fiddler实战深入研究(二)

第一个下拉框是指 需要替换的文件,第二个下拉框a.js是替换上面的下拉框的文件;当然我们不一定要这样替换,如果我们正则非常好的话,我们可以使用正则替换需要替换的文件。当我们点击 save后即可替换。

Fiddler实战深入研究(二)

composer选项卡

composer选项卡支持手动构建和发送http,https和ftp请求,我们还可以从web session列表中拖曳session,把它放到composer选项卡中,当我们点击execute按钮,把请求发送到服务器端。

composer选项卡是由4个子选项卡组成的,如下所示:

Fiddler实战深入研究(二)

其中scratchpad选项卡不用的;

我们先来看看options选项卡中 request options的复选框中的含义如下:

inspect  session  请求执行后,inspectors选项卡会被激活,可以查看请求结果。

fix content-length header*  该选项控制composer是否会自动添加或修改content-length请求头,表示请求体的大小。在很多情况下,缺少适当的content-length头的请求会导致http请求响应出错。

follow redirects*  该选项控制composer是否会自动使用响应的location头,遵循http/3xx重定向,如果选中该选项,composer在失败之前最多会执行10次重定向。

automatically authenticate*  该选项控制composer是否会自动响应服务器的http/401或http/407认证需求。

tear off button  该按钮会从主fiddler窗口删除composer,并把它作为独立的悬浮窗口打开。如果选中inspect   session选项,该选项就非常有用,因为它支持同时查看composer和inspector选项卡;如下所示:

Fiddler实战深入研究(二)

上面的以*标示的选项只适用于使用parsed选项卡发送的请求,从raw选项卡发送的请求不支持这些选项。

raw选项卡一般很少使用。

比如我现在获取到淘宝首页的请求,我们可以使用fiddler中的composer选项卡来重新调用一次该请求,如下所示:

Fiddler实战深入研究(二)

我们双击该左侧的请求,到右侧inspectors选项卡来查看如下:

Fiddler实战深入研究(二)

我们可以点击下面的2个按钮,一个是展开,一个是收缩来查看json数据,如下所示:

Fiddler实战深入研究(二)

composer选项卡总体介绍如下:

Fiddler实战深入研究(二)

composer使用场景如下:

比如我们开发想测试post请求接口,我们都知道浏览器请求只能是get请求,所以无法使用浏览器来测试,因此我们可以使用composer构造post请求,点击execute发送请求。

filters选项卡断点调式

首先我们可以使用一下左侧的session,我有时候觉得filter很好玩,我就不经意间选中左侧任意一条session,然后右键也看到有filter这个选项,然后看到他们的子菜单也有很多项,我就好奇分别点击某一项后;如下所示:

Fiddler实战深入研究(二)

做完hide所有子菜单后呢,我就再刷新淘宝页面,或者百度页面或者博客园或者任何一个页面,结果fiddler都捕获不到请求,但是偶尔会出现几条请求,但是这明显不是我们想要的,如下所示:

Fiddler实战深入研究(二)

这是什么情况呢?我们接着再看下fiddler左侧的底部如下:

Fiddler实战深入研究(二)

看到我们之前的右键点击子菜单后的每一项,现在我们只需要选择某一项后右键即可删除当前选中的项,我现在一个个右键,就把所有的删除掉后,我再刷新淘宝页面,就可以捕获到所有的请求了,如下所示:

Fiddler实战深入研究(二)

下面让我们来系统的学习filters选项卡吧!界面图如下所示:

Fiddler实战深入研究(二)

选中filters选项卡左上方的use  filters复选框后,就可以使用其中随后给出的过滤器对流量进行过滤了;

选项卡右上方的actions按钮支持把当前选中的过滤器作为过滤集,加载之前保存的过滤集,并对之前扑捉到的数据流应用当前过滤规则,如下:

Fiddler实战深入研究(二)

host filter下拉框支持标示或隐藏在随后的文本框中指定的域名下的数据流;比如如下下拉框如下:

Fiddler实战深入研究(二)

not host filter 的含义是不过滤host的请求;

hide the following hosts的含义是:隐藏下面文本框中指定的域名下的数据流;如下所示:

Fiddler实战深入研究(二)

show only the following hosts的含义是:只显示下面文本框指定的域名的数据流,如下所示:

Fiddler实战深入研究(二)

如上我访问的是淘宝网,那么只会显示对a.tbcdn.cn和g.alicdn.cn的数据流;如上所示:

Fiddler实战深入研究(二)

我们需要添加通配符  *.alicdn.com,就可以看到所有子域名下的数据流;如下所示:

Fiddler实战深入研究(二)

如果我们想查看根目录下alicdn.com下的数据流,可以把通配符改成如下 *alicdn.com即可,这样就可以包含所有域名以alicdn.com结束的数据流。前面不要加点;如下所示:

Fiddler实战深入研究(二)

客户端进程(client process)

进程过滤器控制显示那个进程的数据流。正在运行的应用进程和fiddler在相同的主机时,fiddler才能判断出是那个进程发出的哪个请求;

下拉框 show only traffic from的列表中包含了系统中当前正在运行的所有进程,如下所示:

Fiddler实战深入研究(二)

如果我们选中上面的某个进程的话,就会只显示该进程下的数据流,比如我现在选中的是淘宝进程;

Fiddler实战深入研究(二)

show only internet explorer 选项只显示进程名称以ie开头或请求的user-agent头包含compatible;msie的数据流;

hide traffic from service host选项会隐藏来自进程svchost.exe的数据流,svchost.exe进程是个系统进程,会同步rss feeds以及执行其他后台网络活动。其选项一般用的不多。

请求头request headers

通过这个选项,你可以添加或删除http请求头,也可以标示包含某些请求头的请求。

Fiddler实战深入研究(二)

show  only  if url contains:的含义是支持基于url显示某些请求;可以使用前缀exact来限定大小写敏感;

hide if url contains 和上面的是相反的含义,也就是隐藏的意思;

flag  requests with header选项支持指定某个http请求头名称,如果在web session列表中存在该请求头,会加粗显示该session;

delete request header 支持指定某个http请求头名称,如果包含该请求头,会删除该请求头;

set request header选项支持创建一个指定了名称和取值的http请求头,或将http请求头更新为指定取值。

断点breakpoints

fiddler提供了断点调式功能,session在执行过程中,有2个可能执行中断的时间点;

从客户端读到请求后,在请求被发送到服务器端之前。

在服务器端返回响应之后,在响应返回客户端之前。

当程序在请求中断点停止执行时,你可以任意修改该请求,包括url,headers或body,我们还可以不发送该请求到服务器端,我们可以直接自定义数据返回给客户端,同样,当程序在响应断点停止执行时,我们也可以任意修改响应的内容,包括headers或body。我们先来操作一下如下:

一: 菜单栏 rules –》 automatic breakpoints –》 before requests(请求被发送到服务器端之前);或者 after responses(响应返回客户端之前)

Fiddler实战深入研究(二)
Fiddler实战深入研究(二)

比如我现在后台系统,我点击查询按钮,需要发送一个post请求,如下:

Fiddler实战深入研究(二)

现在我们再来看看fiddler中截取请求,如下所示:

Fiddler实战深入研究(二)

如上,红色的小图标是被中断的会话,我们可以左键双击两下,进入inspectors选项卡,如下所示:

Fiddler实战深入研究(二)

我们在inspectors –》 webforms选项卡中可以看到请求中携带的参数如上,我们可以任意修改参数名值对,我们也可以任意添加参数,或者增加cookies或者headers等等,现在我们来看看浏览器中请求响应了没有?如下所示:

Fiddler实战深入研究(二)

现在我们可以再点击黄色小图标 break on response 小按钮,如下所示:

Fiddler实战深入研究(二)

可以看到,请求直接返回数据,现在黄色小图标是不能点击的按钮,现在我们可以来修改响应的内容,模拟请求返回,我们也可以自定义返回的json数据,或者我们以后来模拟get或者post请求,我们不需要服务器端(比如php)返回对应json数据,我们完全可以使用fiddler来模拟数据,发送一个空的请求,然后使用fiddler来截取,自己自定义返回json数据,我们可以自定义返回的数据,如下所示,我是修改返回的内容如下所示:

Fiddler实战深入研究(二)

当我们点击run to completion按钮后,在浏览器端可以响应数据,接着如下:

Fiddler实战深入研究(二)

然后我们在页面上可以看到修改返回的数据内容如下:

Fiddler实战深入研究(二)

如上是整个断点调式的过程。

如下所示:

当然我们可以在filters里面的选项勾选也可以进行调式如下:

Fiddler实战深入研究(二)

断点选项框支持对包含给定属性的请求或响应设置断点;

break request on post选项含义是:会为所有post请求设置断点;

break request on get with query string的含义是:会为所有方法为get且url中包含了给定查询条件的请求设置断点。

break on xmlhttprequest的含义是:对所有能够确定是通过xmlhttprequest对象发送的请求设置断点,由于从数据流上无法判断该请求是否通过xmlhttprequest对象发送,因此该方法是通过查找请求头是否为x-requested-with实现的。

break response on content-type选项的含义是:会为所有响应头content-type中包含了指定文本的响应设置响应断点。

响应状态码 response status code

Fiddler实战深入研究(二)

我们可以通过这些选项,基于响应状态码来过滤session;含义如下:

hide success(2xx)的含义是:会隐藏状态码在200到299之间(包含200和299)的响应。

hide non-2xx的含义是:会隐藏状态码不在200到299之间的响应。

hide authentication demands(401,407)的含义是:会隐藏状态码是401和407的响应,这些响应需要用户进一步确认证书。

hide redirects的含义是:会隐藏对请求进行重定向的响应。

hide not modified(304) 会隐藏状态条件中状态码为304的响应。

响应类型和大小

Fiddler实战深入研究(二)

通过如上选项,我们可以控制在web sessions列表中显示那些类型的响应,并堵塞符合某些条件的响应。

我们先来看看上面的下拉框有哪些选项;如下所示:

Fiddler实战深入研究(二)

show all content-types的含义是 不过滤;

show only image/* 的含义是 显示content-type头是图像类型的session。

show  only html 的含义是 隐藏content-type头不是html类型的session。

show only text/css 含义是 隐藏content-type头不是text/css类型的session。

show only scripts 含义是 隐藏content-type头不是scripts类型的session。

show only xml 含义是 隐藏content-type头不是xml类型的session。

show only json 含义是 隐藏content-type头不是json类型的session。

hide image/*  含义是 隐藏content-type头不是图像类型的session。

hide smaller than选项隐藏响应体小于指定的字节数的响应。

hide larger than选项隐藏响应体大于指定字节数的响应。

time heatmap复选框会基于服务器返回给定响应所需要的时间为每个session设置背景颜色。

下面的不一一介绍具体的含义了,一般情况下我们是用不到的,具体的含义看英文也大概知道点,对此这边不一一介绍了;

fiddler 中的stave插件

stave是一个fiddler扩展插件,让fiddler能将url映射到本地目录,实现批量文件自动响应。

fiddler自带的autoresponder每条自动响应规则只能对应一个本地文件, 在文件数目较多的时候,使用起来很不方便,往往需要部署到本地web服务,有了stave插件(扩展),一个url匹配可以对应一个本地目录,url规则也支持通配符,前端调试方便多了。

除支持url映射到目录之外,还支持url到url的替换。

stave扩展并不影响原本的autoresponder功能,两者可以共同起作用。

一:首先安装stave插件:

<a target="_blank" href="http://files.cnblogs.com/files/tugenhua0707/stave.zip">下载stave </a>

安装完成后重新启动下fiddler,可以看到右侧tab选项卡多了一个stave选项如下:

Fiddler实战深入研究(二)

我们先可以看看本身的实列如上2个,第一个是替换目录的,第二个是替换单个文件;我们接下来看看他们的如何配置的,我们点击右键 —》 编辑  打开如下编辑页面:

Fiddler实战深入研究(二)

可以看到如上配置;我们先来实践下吧!

比如我现在的项目,通过fiddler截取请求如下:

Fiddler实战深入研究(二)

现在我需要的是 我想把 172.16.28.183:8080/jgz/statics/easyui 这个路径下的所有js文件批量替换成我本地文件中的js,如下我本地的目录文件:

Fiddler实战深入研究(二)

现在我们来看看配置如下:

  1. 首先点击右侧 右键 -&gt; 添加

Fiddler实战深入研究(二)

弹出添加规则如下:

Fiddler实战深入研究(二)

把要匹配的目录填到匹配输入框里面去,替换为 填写本地的文件目录 如上面的;点击“确定”按钮即可;

现在的js文件都替换掉了,但是有时候我们需要替换单独的css文件,或者单独的js文件,我们可以在autoresponder选项卡中进行替换,如下所示:

Fiddler实战深入研究(二)

如上即可~ stave插件和autoresponder选项卡搭配使用批量替换目录;

如上:总结了一些基本常用到fiddler插件及知识点,以后有机会还会更多的分享自己了解这方面的东西,还会有下文的,如果分享不好,请多多理解!如果有帮助的话,可以点击下面的推荐按钮~ 不胜感谢~~