看懂 Fiddler 的瀑布图
最近准备给组内的新同学们分享下 Fiddler 这枚神器,可以讲的地方太多,我打算把一节课讲不完的内容写在博客上,大家可以随便看看。今天先介绍下 Fiddler 的瀑布图。
每个网络请求都会经历域名解析、建立连接、发送请求、接受数据等阶段。把多个请求以时间作为 X 轴,用图表的形式展现出来,就形成了瀑布图。在 Fiddler 中,只要在左侧选中一些请求,右侧选择“Timeline”标签,就可以看到这些请求的瀑布图,如下(点击查看大图):
看到这张图,你是否可以回答这些问题:
- 图标的 Y 轴上显示的是简化后的 URL。为什么有些是绿色的,有些是黑色的?
- 为什么第一个请求用阴影线来表示,其它请求却都是实心的?
- 请求条的不同颜色分别代表什么?
- 每个请求中的黑色竖线表示什么?
- 请求后面的图标(如闪电和软盘)代表了什么?
- 每个请求前面两个小圆圈是什么,为什么有的是红色,有的是绿色?
如果其中一个或者多个你不知道答案也没关系,下面将一一揭晓。
1、绿色的请求表示这是一个“有条件的请求”。HTTP 协议定义了 5 个条件请求头部,最常见的两个是“If-Modified-Since”和“If-None-Match”。服务器根据这两个头部来验证本地缓存是否过期,如果过期则正常返回资源的最新版本;否则仅返回 304 Not Modified,浏览器继续使用本地缓存。包含条件请求头部的请求用绿色显示,否则用黑色。
2、有阴影线的请求是缓冲模式下的请求,实心的是流模式下的请求。Fiddler 提供了缓冲(Buffering)和流(Streaming)两种抓包模式:缓冲模式下,Fiddler 会在响应完成时才将数据返回给应用程序(通常是浏览器),这种模式下可以控制响应,方便地修改响应内容;流模式下,Fiddler 会实时返回响应数据给浏览器,但没办法控制响应。一般使用流模式,瀑布图会更真实一些。这两种模式可以通过 Fiddler 的工具栏选择。特别的,通过 Fiddler 的“AutoResponder”功能返回的响应,只能是缓冲模式。
3、请求条的不同颜色对应着不同类型的响应,根据响应头的 MIME Type 来归类。如浅绿色表示图片类型的响应;深绿色是 JavaScript;紫色是 CSS;其它都是蓝色。
4、请求中的黑色竖线,表示的是浏览器收到服务端响应的第一个字节这一时刻。这个时间受 DNS 解析、建立连接、发送请求、等待服务端响应等步骤的影响。
5、请求条后面的图标表示响应的某些特征。如软盘图标表示这个响应正文从本地获得,也就是说服务端返回了 304;闪电表示这是 Fiddler 的“AutoResponder”的响应;向下的箭头表示响应是 302,需要重定向;红色感叹号说明这个请求有错误发生(状态码是 4XX 或 5XX)。
特别的,如果请求条后面有一个红色的X,说明服务端响应完这个请求之后,断开了连接。出现这种情况一般有两种可能:HTTP/1.0 的响应中没有 Connection: Keep-Alive;或者是 HTTP/1.1 的响应中包含了 Connection: close。使用持久连接可以省去建立连接的开销,也可以减小 TCP 慢启动和其它拥塞控制机制带来的影响,总之是好处多多。
6、请求前面的红色圆圈表示这个连接是新建的,绿色表示是复用的。上面的圆圈表示的是浏览器到 Fiddler 的连接,下面的圆圈是 Fiddler 到服务端的连接。
现在,再看到 Fiddler 的瀑布图就一目了然了吧。最后再来两张瀑布图自己练习下:
(在浏览器输入 imququ.com 的请求)
(刷新后的请求)
看懂 Fiddler 的瀑布图的更多相关文章
- HTML+CSS使用swiper快速生成最简单、最快捷、最易看懂的轮播图
1. 在网页顶部输入swiper.com.con,进入swiper官网 2. 点击" API文档",获取轮播图代码的地方 3. 点击左侧"swiper初始化&q ...
- 零基础入门Python数据分析,只需要看懂这一张图,附下载链接!
摘要 在做数据分析的过程中,经常会想数据分析到底是什么?为什么要做数据数据分析?数据分析到底该怎么做?等这些问题.对于这些问题,一开始也只是有个很笼统的认识. 最近这两天,读了一下早就被很多人推荐的& ...
- [转]看懂UML类图
这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图所表达的含义和最终的代码 ...
- 一张图看懂ANSYS17.0 流体 新功能与改进
一张图看懂ANSYS17.0 流体 新功能与改进 提交 我的留言 加载中 已留言 一张图看懂ANSYS17.0 流体 新功能与改进 原创2016-02-03ANSYS模拟在线模拟在线 模拟在线 ...
- 看懂UML类图
这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图所表达的含义和最终的代码 ...
- 看懂UML类图与时序图
看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...
- 一篇文章一张思维导图看懂Android学习最佳路线
一篇文章一张思维导图看懂Android学习最佳路线 先上一张android开发知识点学习路线图思维导图 Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级 ...
- 看懂UML类图和时序图
看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...
- 看懂UML图
看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...
随机推荐
- HTML5将<video>视频设置为页面动态背景
<!DOCTYPE html><html><head> <title>Operation Aborted Example</title> & ...
- Ubuntu下面的docker开启ssh服务
选择主流的openssh-server作为服务端: root@161f67ccad50:/# apt-get install openssh-server -y Reading package lis ...
- jquery 滚动条位置的
$('#fixedHead').width()//div的宽度 $('#fixedHead')[0].scrollWidth//滚动条的宽度 两者的差为滚动条的宽度 var b1=$("#d ...
- 02_数据库基础之(二)sql语句入门
1.基本增删改查操作 #一. 数据类型 常用的3中 # .字符串 例如:你的名字 我是中国人 在数据库中要使用 ‘’引起来 '苹果手机' # .整数类型 例如: 你的年龄 ,办公室的人数 个 ,直接使 ...
- linux安装jdk以及tomcat
一.卸载旧jdk 1.检测原OPENJDK版本 java -version 查看是否安装了jdk,并且是什么版本 2.进一步查看JDK信息 rpm -qa|grep java tzdata-java- ...
- Real Time Rendering 2
[Real Time Rendering 2] 1.The light vector l is usually defined pointing in a direction opposite to ...
- Emulating private methods with closures
[Emulating private methods with closures] JavaScript does not provide a native way of doing this, bu ...
- Python调用sqlAlchemy
import logging from sqlalchemy import Column, String, create_engine from sqlalchemy.ext.declarative ...
- 外购半成品报SHORT问题(非验货客户)
外购半成品报SHORT问题(验货客户)https://www.cnblogs.com/Snowfun/p/8660646.html 下面看非验货客户: 1.检查采购类型是否为F(SAP_MARC),为 ...
- js 创建对象的几种方法
1. 使用object创建 var person = new Object(); person.name = "Tom"; person.age = "29"; ...