在Firebug中调试JavaScript

Henry712 2011-03-15 12:05:42

翻译自《Firebug 1.5》第五章 Javascript开发

还未翻译完，完成后我将放在这个地址：http://mynoteweb.com/node/114

在本章里，我们将讨论Firebug提供的，以支持JavaScript的开发、调试、概览、以及测试的各种工具。在这里，我们将采用典型的JavaScript用例的方式，并解释如何使用Firebug来实现这些用例。

在本章里，我们将讨论以下主题：

* 命令行API及其功能
* 控制台API
* 单步JavaScript调试
* 插入条件或无条件断点

命令行API

在第2章“Firebug窗口概览”中，我们已经看到了如何使用命令行，这里，我们将讨论的是命令行API提供的一些方法（methods）。这些方法将帮助我们调试JavaScript。下面是具体的描述与用法：
$(id)

这个方法类似于JavaScript中的document.getElementById()。它返回指定ID的单个元素。

我们将使用下面的HTML代码来解释$(id)方法。将这些代码写在一个HTML文件中，并用Firefox将其打开。

<html>
<body>
<input name="myText" id="test_id" type="text">
</body>
</html>

现在，当我们在Firebug的命令行中执行如下代码，我们将看见如下的输出窗口：

$("test_id")

$$(选择器)

这个方法返回由指定CSS选择器匹配元素所组成的数组。

Tip
关于CSS选择器更多的信息，可以参考这个链接：http://www.w3.org/TR/css3-selectors

下面的HTML代码片段显示在其DOM树上有四个<input>HTML元素。我们将使用$$(选择器)的方法来选择全部四个元素：

<html>
<body>
<input name="myText1" type="text" class="test_class" >
<input name="myText2" type="text" class="test_class" >
<input name="myText3" type="text" class="test_class" >
<input name="myText4" type="text" class="test_class" >
</body>
</html>

下面的截图显示了在Firebug的命令行中执行 $$('input') 之后的输出结果：
Tip
为了在Firebug的单一命令行执行代码，你需要去掉“控制台”标签下拉菜单中的“更大的命令行”选项选择。
$x(xpath)

此方法返回与给定的XPath表达式相匹配的元素的数组。
Tip
关于XPath更多的信息请参考：http://www.w3schools.com/xpath

为了解释此方法，我们将使用前面的HTML文件来讲解。现在，当我们在Firebug命令行执行如下代码，我们将在Firebug的控制台标签页看到输出结果：

var objs = $x('html/body/input')
console.log(objs[0].name)
console.log(objs[1].name)
console.log(objs[3].name)
console.log(objs[3].name)

Note
多行命令行：为了方便，Firebug提供了一个多行命令行编辑器。这是一个迷你编辑器，我们可以在其中输入多行JavaScript命令，甚至输入完整的JavaScript程序，并且我们可以即时执行这些代码。我们可以通过点击控制台标签页内右下角的红色图标

来打开这个多行编辑器。
dir(对象)

这个方法打印出对象的所有属性的交互清单。这个结果与我们在DOM标签页内看到的是一致的。

让我们来看一下与我们在$$(选择器)方法中使用过的HTML代码。如果我们在Firebug的命令行中执行下面的代码，我们将会得到如下的输出：

var objs = $x('html/body/input')
dir(objs)

dirxml(节点)

这个方法将打印一个HTML或XML元素的XML源码树。这个结果与我们在HTML标签页内看到的结果是一致的。我们可以在HTML标签页内点击任意节点来观察它。

使用相同的HTML文件，在Firebug的代码行中执行如下代码将得到其XML源码树。下面的截图显示了在控制台标签页内产生的输出结果：

var obj = $$('body')[0]
dirxml(obj)

我们可以用$(id)选择一个节点后，再将其传递给此方法，或者采用与此类似的其他获取一个节点的方法。

默认情况下，命令行表达式是与页面的顶层窗口相关的。cd()方法将使我们可以使用页面内的框架窗口。
clear()

这个方法将对控制台清屏。此方法提供的功能也可以通过点击“清除”按钮实现，这个按钮在控制台标签页的左上角。
inspect(object[, tabName])

这个方法让我们可以用最适合的标签来检查一个对象，或者使用与可选参数tabName相一致的标签。

可以使用的标签名字有HTML、CSS、SCRIPT，以及DOM。

现在，对我们已经打开的HTML文档，我们在Firebug的命令行中输入下面代码。输出结果将显示在HTML标签页内，截图如下：

inspect($$('input')[0], 'html')

keys(object)

这个方法返回一个包含此对象所有属性的名字的数组。

还是使用我们前面使用的HTML文件为例，执行下面的代码将显示第一个input标签的全部属性、实体、函数和常量：

keys($$('input')[0])

values(object)

这个方法将返回一个包含该对象所有属性值的数组。

执行下面的代码将显示DOM树中第一个input标签的所有属性值。

values($$('input')[0])

debug(fn)和undebug(fn)

这两个方法将在函数的第一行增加或移除断点。

我们将在后面第8章“AJAX开发”中学习这些方法的细节内容。
monitor(函数名)和unmonitor(函数名)

这些方法被用来打开或关闭对一个函数所有调用的日志记录。

通常，为了查看JavaScript中某个函数是否被调用，我们在其内部设置alert()或console.log()方法。这是非常繁琐的事情。首先，我们不得不在一个大的JavaScript文件中找到这个方法，然后我们需要添加alert或log方法。接下来，当我们看到每样事情都对了，我们需要从代码中移除所有的这些日志声明。

Firebug用巧妙的方式来处理这种监视工作。为了判断某个函数是否被调用，我们仅仅需要知道函数的名字就可以了。通过使用monitor()方法，我们可以跟踪发现该函数被调用了多少次。我们将在控制台上看到提示，告诉我们正在被监视的函数是否被调用了。并且，它还会给我们一个指向函数脚本的链接。

我们以下面的代码为例来进行讨论，创建一个HTML文件，输入以下代码，并且用Firefox浏览器打开这个文件：

<html>
<script>
function function1(){
return true;
//some statement
}
function function2(){
return true;
//some statement
}
</script>

<body>
This is the body
<input id="button1" type="button" value="Invoke function1()"
onclick="function1();" />
<input id="button2" type="button" value="Invoke function2()"
onclick="function2();" />
<input id="button3" type="button" value="Invoke function3()"
onclick="function3();" />
</body>
</html>;

现在，在命令行输入下面的代码并且执行：

monitor(function1)

点击本文档中的按钮“Invoke function1()”。我们将看到，无论何时只要调用了一次function1()函数，Firebug就会在控制台面板上显示其日志记录。如果我们在控制台面板上点击function1()的链接，将跳转到function1()函数所在的行。

下面的代码将取消对function1()函数的监控：

unmonitor(function1)

monitorEvents(object[, types])

此方法将开启对发送到一个对象的所有事件的日志记录。可选的参数类型指定只记录特定的消息族。类型中最常使用的值是mouse和key。

全部可用类型包括：composition, context menu, drag, focus, form, key, load, mouse, mutation, paint, scroll, text, ui, 以及 xul。
unmonitorEvents(object[, types])

此方法关掉发送到某对象的所有事件的日志记录。

监视和取消监视事件与日志事件是一样的，关于日志事件我们已经在前一章讨论过。

让我们考察全面使用的HTML文件。在命令行执行下面的代码并且点击第一个按钮：

monitorEvents($("button1"))

下面的截图显示了事件监控情况：

profile([title])和profileEnd()

这两个方法用于开启和关闭JavaScript概况器。可选参数title将作为概况报告的抬头打印在文本中。

下面是在Firebug中启动JavaScript概况器的三个方法：

* 在控制台标签页内点击“概况”按钮
* 从JavaScript代码中使用console.profile("Profiler Title")
* 从命令行中使用profile("Profiler Title")

为查看概况器产生的统计信息，输入如下HTML代码，并保存为HTML文件，然后在浏览器中打开此文件。按F12打开Firebug并且点击“Start”按钮。

<html>
<head>
<title>Firebug</title>
<script>
function bar(){
console.profile('Measuring time');
foo();
console.profileEnd();
}
function foo(){
loop(1000);
loop(100000);
loop(10000);
}
function loop(count){
for(var i=0; i<count; i++){}
｝
</script>
</head>
<body>
Click this button to profile JavaScript
<input type="button" value="Start" onclick="bar();" />
</body>
</html>

下面截图显示了概况器产生的统计信息：

概况器的栏目与描述

* 函数（Function）：此栏显示每个函数的名字。
* 调用（Call）：此栏显示该函数被调用的次数。（在本例中loop()函数被调用了3次。）
* 百分比（Percent）：此栏显示每个函数消耗的时间百分比。
* 占用时间（Own Time）：此栏显示在某个函数中代码所占用的时间。例如，foo()没有自己的代码。相反，它只是调用其他函数。因此，它的执行时间占用大约是~0毫秒。如果你看本栏的某些值，我们在此函数内添加一些循环。
* 时间（Time）：此栏显示函数从开始的地方到结束的地方执行所花时间。例如，foo()没有代码。所以，它的执行时间大约是~0毫秒，但是在这个函数里要调用其他函数。所以，其他函数执行的全部时间是4.491毫秒。于是，这里显示了4.54毫秒，这是三个loop()函数执行的时间加上自身foo()函数执行的时间之和。
* 平均时间（Avg）：此栏显示某个函数的平均执行时间。如果我们仅仅调用一次这个函数，我们将看不到差别。但如果此函数被调用了多次，我们将看出差别。计算公式如下：

平均时间＝自身代码执行时间／调用次数
* 最小时间和最大时间（Min and Max columns）：这里显示的是函数的最小执行时间。在我们的例子中，我们调用loop()三次。当我们传递1000作为参数时，大约只消耗了很短时间（0.045秒），当我们传递100000给此函数时，它消耗更长的时间（4.036秒）。所以，在本例中，最小时间将显示0.045秒，而最大时间显示为4.036秒。
* 文件（File）：此栏显示函数所在的文件的文件名，并显示所在行数。

...全文