Firebug网络监视详解

Firebug是一个非常强大的Firefox附加组件，可以查看、编辑HTML，CSS，JavaScript，Cookies，是开发者必不可少的工具，现在Firebug的发行版本是1.3.3。

Firebug中有一个叫“网络”的面板，在这里我们可以看到各个元素的详细信息。

从左往右分别是

• 请求部分
• http状态码
• 域名
• 文件大小
• timeline

请求部分

这个地方是可以展开的，里面包括了请求的地址，请求的方法（是GET还是POST），请求的参数，Headers等等。

http状态码

如果是成功，就是200，404就是请求资源部存在，具体可以看这里

域名

查看该资源所属的域名，其实在请求部分中已经有这个信息了，不过在这里列出来会方便查找某些域名下在资源

文件大小

没什么可解释的

timeline

这里是重点。在Firebug 1.3.3中，timeline如下图所示：

有2个时间信息是让人比较迷惑的。

Queuing：这个Queuing一开始我以为是从浏览器发送请求，到服务器返回第一个字节的时间；后来我发现我的瞎猜是错的，Queuing是Firefox浏览器的一种机制，就例如如果一个页面上有很多个图片元素，那么其中一些图片元素的请求就被放到队列里面。

Receiving Data：接收数据的时间

在Firebug 1.3.3中，这两个数据让人很迷惑，而且实用价值很小。后来我发现了现在Firebug有 1.4 alpha版本，在1.4中，会把请求的时间细分，具体如下图所示：

分别是：

1) DNS Lookup （DNS查找时间）
2) Connecting （这个我没搞清楚是什么连接时间）
3) Queuing (Firefox内部的队列)
4) Waiting for the response (请求发出去以后，等待服务端响应的时间)
5) Receiving Data (接受到服务端响应以后，下载数据所用的时间)

有了这些时间，可以帮助对页面进行优化，例如如果发现接受数据时间很长，那是不是因为图片文件太大，或者没有用GZIP压缩；如果等待响应时间很长，是不是程序设计有性能问题，导致响应时间很长。

最后推荐大家一个WEB工具，Cuzillion，这个工具可让用户在线创建一个他们想要的页面，例如可以放一个引用的JS到HEAD里面，或者在BODY中放几个图片，IFRAME等。通过创建不同的页面，可以对一些前端最佳实践进行验证。例如把JS放在页面的底部，CSS放在页面的顶部等等。