Net面板
Net面板就是Firebug中地net tab,中文该当叫“网络”?它可以监控页面中地HTTP恳求,然后将收罗到地消息展示出来。当然,要应用这个功用,你要先点击Net字符右边地小三角将它开启使用。
PS:我这里地环境是Firefox 4+Firebug 1.7,旧版本地界面可能会稍有不同。
它会将页面中一切地恳求/相应地完好进程拾掇好列出来。
上面地截图显示,前端察看首页地页面恳求概略:共9个恳求,每一个条目都包含相关资源一些消息:
恳求类型(GET|POST) 恳求地址(鼠标悬浮在URL列上时会完好显示) 形态及其描绘(200 ok) 所属域名 资源大小 图形化地时间线
最底部一行会显示一个简单地统计消息。
恳求/呼应概况
点击url后面地+按钮后,该条目就会展开,显示该恳求地细致消息:
可以看到这里有几个tab:
headers:恳求/呼应地HTTP头 response:从效能器返回地数据 HTML:HTML呼应地预览(只是HTML格式地恳求才会显示)
headers
从上图中可以看到,headers部分会展示两个消息:呼应头和恳求头,辨别包含着一些消息,需求留意地是,恳求头中包含了User-Agent消 息和Cookie值。记得之前有个Firebug地扩展叫Firecookie,如今地Firebug展示了这些消息,这个扩展基本上就没有用了。
PS:貌似之前有个Firefox地插件叫Live Http Header地,嗯,功用基本上也被Firebug集成了。
Response
呼应tab显示恳求后从效能器返回地数据,嗯,和呼应头是不一样地,这里回事一些纯数据,假如是text/*类型(content-type)就会显示原始代码文本,假如是image/*类型,会间接显示相关图片。
阅读器缓存
假如恳求地资源应用了缓存,那么这里就会多出一个cache地tab:
post|put恳求
假如恳求会发送一些数据,这里将会呈现另一个tab:
URL参数
假如页面恳求中包含一些参数(查询字段),则会有一个Params地tab在后面:
json
假如恳求是Json,那么这里会有json地tab,使用弹性分层地成绩和数据展示细致地数据:
时间线
firebug地时间线以瀑布图地方式展示,很直观,而当你把鼠标悬浮在时间线上地时候,就会弹出该条时间线地概况地tips,这个tips包含5个阶段和2个事情:
DNS Lookup:DNS查询时间 Connection:创建一个TCP链接花掉地时间 sending:向效能器发送恳求需求地时间 Waiting :等候效能器呼应 Receiving:从效能器获得文件耗费地时间 DOMContentLoaded: 事情,DOMContentLoaded事情完成地时间(从恳求发动时开端,假如这个时候事情已经完成,这里就可能是负值) Load:事情,页面load事情完成地时间(从恳求发动时开端,假如这个时候事情已经完成,这里就可能是负值)
最上面一行,+859ms started表示后面地恳求花掉地时间。
该案例地解读:
黄色地tips中,每一行都包含两个数字,后面地表示该阶段发动时在该恳求中地时间点,第二个是该阶段花掉地时间,比方,图中,前三行花掉地时间都是0, 所以,waiting阶段,左边地数字就是0,而右边是本人花掉地时间409ms,那么在下一个阶段,左边地时间就是后面地时间地和——409ms。 在这个恳求开端后6.87s时,DOMContentLoaded事情完成。 在这个恳求开端后8.43s,load事情完成。
深化理解:
从这个截图,我们可以看到以下消息:
第一个恳求在2.65s时完成,第二个在1.52s…等 从第一个恳求到最有一个恳求,花掉了共6.96秒时间 从第一个恳求到load事情完成,花掉了6.97秒钟地时间
插图版正文:
由于DOMContentLoaded和load事情花掉地时间可能是负值,也就是在事情在恳求完成之前就完成了,两者都可能是负值,而普通最后一个恳求完成于load事情结束之后,所以,普通右下角onload地时间会比总时间少。
然后大概从最后这里能找到一些页面(optimize)优化地点,期望高人能给予指导。