FireBug调试器相关(转载)

将功能区第二行的标签切换到“Script”，在这里我们可以对页面中所有的脚本进行调试，包括链接的脚本。和CSS一样，可以通过文件选择按钮选择不同的脚本文件。

如果要在脚本中设置一个断点，可以单击行号旁边的空白区域，这时会出现一个红色的点表示在这里设置了断点（图7-1），当脚本运行到此会停止运行，等待你的操作。在右边的小窗口将标签切换到“Breakpoints”可以查看我们设置的所有断点（图7-2），单击左上角的checkbox可以让断点不起作用，如果要删除断点可以单击右上角的删除图标。通过“Options”菜单的“Disable All Breakpoints”可暂时禁止所有断点，而“Remove All Breakpoints”可删除所有断点。在断点标记的红点上单击右键还可以设置断点条件，在符合条件的时候才会停止脚本的执行。

<!--[if !vml]--><!--[endif]-->

图7-1

 

<!--[if !vml]--><!--[endif]-->

图7-2

 

下面我们来尝试一下断点的功能。首先在测试页脚本里增加一个test的函数，函数的主要操作是运行一个1000次的循环，将循环的参数值显示在“div2”里：

 

     function test(){

             for(var i=0;i<1000;i++){

                    document.getElementById('div2').innerHTML=i;

             }

         }

  

    在“div2”里增加一个“onclick”属性，单击后执行test：

 

<div id="div2" onclick='test()'>方块二</div>

  

刷新页面，然后在“for(var i=0;i<1000;i++){”这行上设置一个断点，并设置条件为“i=100”（图7-3），然后单击“div2”开始执行函数test。

 

<!--[if !vml]--><!--[endif]-->

图7-3

 

当脚本停下来后，我们将鼠标移动到变量“i”上，这时会出现一个小方框，里面有一个数值，这就是变量“i“的当前值（图7-4）。在脚本调试的时候，你可以通过这个方法很方便的了解到当前变量的值。你还可以通过右边窗口的“Watch”标签查看到“i”的值（图7-5）。

<!--[if !vml]--><!--[endif]-->

图7-4

 

<!--[if !vml]--><!--[endif]-->

图7-5

在“Watch”标签窗口我们可以通过“Options”菜单选择查看用户自定义属性（Show User-defined Properties）、用户自定义函数（Show User-defined Functions）、DOM属性（Show DOM Properties）、DOM函数(Show DOM Functions)和DOM常数(Show DOM Constants)。我们还可以通过单击“New watch expression…”（图7-6淡黄色背景部分）加入自己想跟踪的内容。例如我们想跟踪一下“div2”的显示内容，就可以单击“New watch expression…”，加入“document.getElementById('div2').innerHTML”，输入中可通过TAB键自动完成关键字的输入（图7-7）。如果不想跟踪了，可单击最右边的删除图标取消跟踪。

<!--[if !vml]--><!--[endif]-->

图7-6

 

<!--[if !vml]--><!--[endif]-->

图7-7

 

脚本在断点停止后，我们就可以利用搜索框旁的4个跟踪按钮进行代码跟踪了（图7-7）。第一按钮是继续运行程序，不再执行跟踪，快捷键是F8。第二个按钮是单步执行方式，每次执行一条语句，该方式在遇到函数调用时不进入调用函数内部进行跟踪，快捷键是F10。第三个按钮也是单步执行方式，每次执行一条语句，但它遇到函数调用时会进入调用函数内部进行跟踪，快捷键是F11。当你进入调用函数内，想马上跳出来时，可以单击第四个按钮，该按钮没有快捷键。

搜索框的作用和HTML源代码查看是一样的，不过有一个不同，就是输入“#n”（n≥1），可以直接跳到脚本的第n行。

当执行脚本在“console”标签内显示一个错误，而错误的提示行左边出现一个暗红色的圆点时（图7-8），我们可以单击改红点在该行设置一个断点。

 

<!--[if !vml]--><!--[endif]-->

图7-8

我们可以通过“Script”标签的“Options”菜单的“Break on All Errors”选项设置每当脚本发生错误时就中断脚本，进入调试状态。

有时候一个函数随机出现错误，你不可能每次调用都去跟踪一次，而产生错误的原因很可能是传递的参数错误，这时你可以通过跟踪函数调用的功能去检查每次调用函数时的参数情况。操作在函数脚本内单击鼠标右键，在菜单中选择“Log Calls to xxxxx”（xxxxx为函数名），然后可在“console”标签中可查看函数调用情况。

 

<!--[if !supportLists]-->8、  <!--[endif]-->查看DOM结构

将功能区第二行的标签切换到“DOM”可俺层次查看整个页面的DOM结构。通过“Options”菜单可自定义选择查看用户自定义属性（Show User-defined Properties）、用户自定义函数（Show User-defined Functions）、DOM属性（Show DOM Properties）、DOM函数(Show DOM Functions)或DOM常数(Show DOM Constants)等内容。

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

 

<!--[if !supportLists]-->9、  <!--[endif]-->查看网络状况

作为开发人员，是否会经常听到老板或客户抱怨页面下载太慢了？于是你就怀疑是否脚本太多了？忘记压缩图片了？服务器太慢了？网络太慢？确实是头疼的事情。有了Firebug，你就可以很容易的对这个问题进行分析和判断了。请将Firebug的当前标签切换到“Net”（图9-1）。

 

<!--[if !vml]--><!--[endif]-->

图9-1

 

<!--[if !vml]--><!--[endif]-->

图9-2

 

从图中我们可以看到，页面中每一个下载文件都用一个灰色条表示它相对其它文件是从什么时候开始下载的，下载时间是多少。在底部我们看到页面发送了多少个请求，下载总量是多少，有多少是有缓存的，下载总共花费了多少时间等信息。

如果只想了解某一样文件的下载情况，你可以单击功能区第一栏的文件分类按钮过滤文件（图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”打开一个新标签浏览。

 

<!--[if !vml]--><!--[endif]-->

图9-3

 

通过右键菜单你可以复制文件地址（Copy Location）、HTTP请求头信息(Copy Request Headers)和HTTP响应头信息（Copy Response Headers）。

如果不想使用该功能，可以选择Options菜单的“Disable Network Monitoring”关闭该功能。

 

<!--[if !supportLists]-->10、              <!--[endif]-->命令行调试

在“Console”标签了有一个命令行工具，我们可以在这里运行一些脚本对页面进行调试。

我们在命令行中输入“document.getElementById('div2').innerHTML”看看效果（图10-1），别忘了用TAB键实现快速输入关键字。在信息区显示了当前“div2”的显示内容。

 

<!--[if !vml]--><!--[endif]-->

图10-1

 

要输入“document.getElementById”是不是觉得很麻烦？这里有一个简单的办法，用“$”符号代替“document.getElementById”，我们再在命令行中输入“$('div2').innerHTML”，然后看看结果，是一样（图10-2）。

 

<!--[if !vml]--><!--[endif]-->

图10-2

 

当你通过“Inspect”锁定了一些HTML Element时，你可以通过“$1”来访问最后一个Element，依次类推，我们可以通过“$n”(n>1)访问依次倒序访问锁定的Element。

我们来实践一下，刷新一下测试页面，然后按下“Inspect”按钮，鼠标单击“方块二”，然后在按下“Inspect”按钮，单击“方块一”。将firebug窗口切换回“Console”标签，然后输入“$1”，回车后再输入“$2”，查看一下结果（图10-3），正是我们用锁定过的Element。

 

<!--[if !vml]--><!--[endif]-->

图10-3

 

在命令行还可以通过“$$(HTML 标记)”返回一个Element数组。我们在测试页输入“$$(‘div’)”看看（图10-4）。我们再输入“$$(‘div’)[0]”看看（图10-5）。是不是很便于我们对HTML进行调试。

 

<!--[if !vml]--><!--[endif]-->

图10-4

<!--[if !vml]--><!--[endif]-->

图10-5

 

命令行的所有特殊函数请看表3：

命令	说明
$(id)	通过id返回Element。
$$(selector)	通过CSS选择器返回Element数组。
$x(xpath)	通过xpath表达式返回Element数组。
dir(object)	列出对象的所有属性，和在DOM标签页查看该对象的是一样的。
dirxml(node)	列出节点的HTML或XML的源代码树，和在HTML标签页查看改节点一样。
cd(window)	默认情况下，命令行相关的是顶层window对象，使用该命令可切换到frame里的window独享。
clear()	清空信息显示区，和单击按钮Clear功能一样。
inspect(object[, tabName])	监视一个对象。tabName表示在那个标签页对该对象进行监视，可选值为“html”、“css”、“script”和“dom”。
keys(object)	返回由对象的属性名组成的数组。
values(object)	返回由对象的属性值组成的数组。
debug(fn)	在函数的第一行增加一个断点。
undebug(fn)	移除在函数第一行的断点。
monitor(fn)	跟踪函数fn的调用。
unmonitor(fn)	不跟踪函数fn的调用。
monitorEvents(object[, types])	跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
unmonitorEvents(object[, types])	不跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
profile([title])	开始对脚本进行性能测试，可选参数title将作为测试结果的标题。
profileEnd()	结束脚本性能测试。
表3

 

命令行有命令记忆功能，可通过上、下箭头键选择已经输入过的命令。

 

<!--[if !supportLists]-->11、              <!--[endif]-->在脚本文件中加入调试命令

有没有对脚本调试中经常需要alert感到厌烦？有了Firebug，你就可以放下alert了，因为Firebug有功能比alert更强大的console.log。

先让我们来认识一下console.log，在测试文件脚本区域我们输入一下代码：

 

console.log('Hello');

  

   刷新一下页面，将firebug切换到“console”标签看看（图11-1），在信息区显示出了我们要输出的信息“Hello”。当然了，单凭这个就说console.log有点夸大，我们修改一下test函数，把“document.getElementById('div2').innerHTML=i;”修改为：

 

转自:http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx