Firebug使用详解(13)

　　将功能区第二行的标签切换到“DOM”可俺层次查看整个页面的DOM结构。

　　通过“Options”菜单可自定义选择查看用户自定义属性(Show User-defined Properties)、

　　用户自定义函数(Show User-defined Functions)、

　　DOM属性(Show DOM Properties)、

　　DOM函数(Show DOM Functions)或DOM常数(Show DOM Constants)等内容。

　　通过双击你可以修改DOM里面的属性值。

　　9、 查看网络状况

　　作为开发人员，

　　是否会经常听到老板或客户抱怨页面下载太慢了?

　　于是你就怀疑是否脚本太多了?

　　忘记压缩图片了?

　　服务器太慢了?

　　网络太慢?

　　确实是头疼的事情。

　　有了Firebug，

　　你就可以很容易的对这个问题进行分析和判断了。

　　请将Firebug的当前标签切换到“Net”(图9-1)。

　　从图中我们可以看到，

　　页面中每一个下载文件都用一个灰色条表示它相对其它文件是从什么时候开始下载的，

　　下载时间是多少。

　　在底部我们看到页面发送了多少个请求，

　　下载总量是多少，

　　有多少是有缓存的，

　　下载总共花费了多少时间等信息。

　　如果只想了解某一样文件的下载情况，

　　你可以单击功能区第一栏的文件分类按钮过滤文件(图9-2红色圈住区域1)。

　　将鼠标在文件中移动，

　　如果是图片，

　　我们可以看到图片的缩略图(图9-2红色圈住区域3)。

　　如果显示为红色的文件名，

　　则表示该文件在服务器中不存在，

　　不能下载，

　　这样你就要检查一下文件的路径是否正确或者是否上传了该文件(图9-2红色圈住区域2)。

　　我们可以展开某个文件，

　　查看它的HTTP头信息和返回结果的信息。

　　如果请求的是一个动态页面或XMLHttpRequest，

　　则还可以查看提交的变量。

　　通过查看提交的变量和返回信息，

　　我们可以很方便的调试程序是否正确提交了需要的变量和返回了正确的数据。

　　例如从图36中，

　　我们可以看到向“topics-remote.php”发送了一个请求，

　　提交的参数有“_dc”、“callback”、“limit”和“start”四个，

　　值分别为“1188637444000”、“stcCallback1001”、“25”与“0”，

　　从这里我们可以很方便的知道我们脚本操作提交的参数是否正确。

　　切换到“Response”页可以看到返回的结果(图9-3)，

　　在这里你可以对返回结果进行检查。

　　如果你感觉在这里查看结果很乱，

　　你可以单击鼠标右键，

　　在弹出菜单中选择“Copy Response body”复制结果到编辑器查看，

　　你还可以选择“Open in New Tab”打开一个新标签浏览。

原文转自：http://www.cnblogs.com/xiachufeng/archive/2010/08/02/1790411.html