firebug net面板细致讲解

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)优化地点，期望高人能给予指导。