常见的filter过滤属性可参考下表
文本版:
domain:筛选出指定域名的请求,不仅支持自动补全,还支持*匹配。
has-response-header:筛选出包含指定响应头的请求。
is:通过is:running找出WebSocket请求。
larger-than:筛选出请求大于指定字节大小的请求,其中1000表示1k。
method:筛选出指定HTTP方法的请求,比如GET请求、POST请求等。
mime-type:筛选出指定文件类型的请求。
mixed-content:筛选出混合内容的请求(不懂啥意思)。
scheme:筛选出指定协议的请求,比如scheme:http、scheme:https。
set-cookie-domain:筛选出指定cookie域名属性的包含Set-Cookie的请求。
set-cookie-name:筛选出指定cookie名称属性的包含Set-Cookie的请求。
set-cookie-value:筛选出指定cookie值属性的包含Set-Cookie的请求。
status-code:筛选出指定HTTP状态码的请求。
(1)filter使用方法1:我们想筛选网页中来自于不同域名的请求资源,就可以在过滤框中输入 [domain:] ,Chrome 会帮我们自动补齐相关的域名信息。
(2)打开的网页中,如何查看哪些请求使用了缓存?使用命令 [is:from-cache],对应的还有[is:runing]
三、快照区 和 四、时间轴区
这两个区域主要对网页整理的加载情况进行一个分解性的展示
快照区可以更直观的看到浏览器打开网页的流程,和打开整个网页所用时间
而时间轴区可以滑动鼠标滚轮看查看不懂时间加载文件的情况,对找出网页中加载慢的文件还是很有帮助的
五、主显示区
1.主显示区包含了 name(姓名),status(状态),Type(类型),Initiator(发起者),Size(大小),Time(时间),Waterfall(瀑布分析)
Name:请求资源的名称
Status HTTP:状态码
Type:请求资源的 MIME 类型
Initiator:发起请求的对象或进程
Size:服务器返回的响应大小(包括头体和包体),可显示解压后大小
Time:总持续时间,从请求的开始到接收响应中的最后一个字节
Waterfall:各请求相关活动的直观分析图
2.请求列表默认是按照资源请求发起的时间升序排列的,我们也可以选择按指定列排序,点击相关列表头即可
3.通过点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:
Headers 该资源的HTTP头信息。
Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
Response 显示HTTP的Response信息。
Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
针对上面4个Tab进行详细讲解一下各个功能:
① 查看资源HTTP头信息
在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers 、Request Headers以及Query String Parameters或者Form Data等信息。
② 查看资源预览信息
在Preview标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。
③ 查看资源HTTP的Response信息
在Response标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应资源的Response响应内容(纯字符串)。下图显示的是当选择的资源是CSS格式时的响应内容。
④ 查看资源Cookies信息
如果选择的资源在Request和Response过程中存在Cookies信息,则Cookies标签会自动显示出来,在里面可以查看所有的Cookies信息。
Name:cookie的名称。
Value:cookie的值。
Domain:cookie所属域名。
Path:cookie所属URL。
Expire/Max-Age:cookie的存活时间。
Size:cookie的字节大小。
HTTP:表示cookie只能被浏览器设置,而且JS不能修改。
Secure:表示cookie只能在安全连接上传输。
⑤ 分析资源在请求的生命周期内各部分时间花费信息
在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:
Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)、服务器不可用、超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6).
Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间,如果有已经建立好的连接,这个时间还包括等待已建立连接被复用的时间。
Proxy Negotiation 与代理服务器连接的时间花费。
DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0。
Initial Connection / Connecting 建立连接的时间花费,包含了TCP握手及重试时间。
SSL 完成SSL握手的时间花费。
Request sent 发起请求的时间。
Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。
Content Download 获取Response响应数据的时间花费。
TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了,可以参见网络性能优化方案及里面的相关参考文档。
如何查看资源的发起者(请求源)和依赖项(按住Shift)
通过按住Shift并且把光标移到资源名称上,可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。
在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源),有可能会有第二个标记为绿色的资源是该资源的发起者的发起者,以此类推。
在该资源的下方标记为红色的资源是该资源的依赖资源。
六、信息汇总区
信息汇总区中显示[请求数],[数据传输量],[加载时间信息]等信息
DOMContentLoaded事件是在页面上DOM完全加载并解析完毕之后触发,不会等待CSS、图片、子框架加载完成。DOMContentLoaded事件在Overview上用一条蓝色竖线标记,并且在Summary以蓝色文字显示确切的时间。
load事件是在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。load事件同样会在Overview和Requests Table上用一条红色竖线标记,在Summary也会以红色文字显示确切的时间。
结合DOM文档加载的加载步骤,DOMContentLoaded事件/Load事件触发时机如下:
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。// 部分脚本会阻塞页面的加载
DOM树构建完成。//DOMContentLoaded 事件
加载图片等外部文件。
页面加载完毕。//load 事件
七、console控制区
这个区本来是F12里面单独为一列的,但是因为和network有着紧密的联系,所以集合成一个了,后续单做一个版块来介绍
道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题!
如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服!
如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!