Firebug网络监视详解

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

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

从左往右分别是

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

请求部分

firebug_headers

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

http状态码

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

域名

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

文件大小

没什么可解释的

timeline

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

firebug_13

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

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

Receiving Data:接收数据的时间

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

firebug_14_withdns

分别是:

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放在页面的顶部等等。

2 thoughts on “Firebug网络监视详解”

Leave a Reply

Your email address will not be published. Required fields are marked *