15.2.4　教程：使用Firebug控制台

在本教程中，我们将学习如何使用console.log（）函数来查看在程序中发生了什么。

我们将创建一个脚本，用来显示在一个表单上的文本框中输入的字符的数目。

注意：参见1.3节中的“注意”部分以获取如何下载教程文件的信息。

为了开始本教程，首先按照15.2.1节的说明在Firefox中安装Firebug（别忘了，Firebug只能够和Firefox Web浏览器一起工作）。

1.在文本编辑器中打开文件console.html。

这个脚本使用jQuery库。外部jquery.js文件已经添加到了页面，并且开始的和结束的＜script＞标签已经设置好了。我们从添加jQuery的$（document）.ready（）函数开始。

2.在页面顶部的＜script＞标签中添加如下粗体所示的代码：

＜script＞

$（document）.ready（function（）{

}）；//end ready

＜/script＞

我们在4.10节学习了$（document）.ready（）函数的基本知识，它使得浏览器在开始运行任何JavaScript之前载入所有的页面代码。首先使用Firebug log（）函数来直接显示一条脚本已经执行了.ready（）函数的消息。

3.向脚本添加如下粗体所示的代码：

＜script＞

$（document）.ready（function（）{

console.log（'READY'）；

}）；//end ready

＜/script＞

console. log（）在我们将其放置在脚本中的地方运行。换句话说，当页面的HTML载入之后（这就是ready（）函数所等待的事情），Firebug把“READY”显示到Firebug控制台。添加ready（）函数确实是常见且基本的动作，因此，我们可能不会总是在这里添加一个console.log（）函数，但是对于这个教程，我们将添加一个console.log（）函数来看看它是怎么工作的。实际上，我们将向这个页面添加很多日志消息，以便能够通过练习掌握console.log（）函数。

4.保存这个文件，并且在Firefox中打开。如果Firebug没有启用，单击Firefox工具栏右上角的Firebug图标。

也可以单击Tools→Web Developer→Firebug→Open Firebug来查看Firebug控制台。

单词READY应该出现在控制台中（如图15-4中的圆圈所示）。每次访问者在一个表单的文本字段中输入一个字符，我们创建的这段脚本就会显示输入的字符的数目。为了实现这一点，我们将给该文本框添加一个keyup事件（参见5.1.4节）。在这个脚本的每个步骤中，我们还将添加一个console.log（）函数，来帮助我们看清楚发生了什么。

图　15-4　如果Firefox浏览器工具栏的右上角的Firebug图标左边出现了一个数字，那么表示有一个JavaScript错误（可能只是一个输入错误）。打开Firebug（单击Firebug图标），并且控制台将告诉你这个错误

5.在步骤3中添加代码的后面添加如下的代码：

$（'#comments'）.keyup（function（）{

console.log（'Event：keyup'）；

}）；//end keyup

这个页面上的＜textarea＞标签有一个ID为comments，因此，我们可以使用jQuery（$（'#comments'））选择该元素并且给keyup事件添加一个函数（参见5.2节回顾关于添加事件的内容）。在这个例子中，console.log（）函数只是把一条状态消息显示到Firebug控制台，以便当每次触发keyup事件的时候告诉你。这个函数是查看一个事件函数是否真正运行或者某些事情是否阻止了事件发生的一种容易的方式。

保存页面，在Firefox中载入它并在文本框中输入几个字符。确保Firebug的控制台是打开的，我们应该看到了几行'Event：keyup'（每行对应我们输入的一个字符）。现在，keyup事件已经工作了，我们可能还想获取文本框中的内容并将其存储到一个变量中。为了确保获取了所需的信息，可以把该变量的内容显示到控制台。

6.在步骤5中输入代码中添加如下的第3行和第4行：

1$（'#comments'）.keyup（function（）{2

console.log（'Event：keyup'）；3 var text=$（this）.val（）；

4 console.log（'Contents of comments：%s'，text）；

5}）；//end keyup

第3行获取了文本框的值并将其存储到一个名为text的变量中（参见9.1.2节了解从一个字段提取值的更多信息）。第4行把消息写到了控制台。在这个例子中，它组合了字符串'Contents of comments：’和文本框中当前存储的值。当一个程序没有正确工作的时候，一个非常常见的诊断步骤是，显示脚本中变量的值来确保该变量包含了我们期望它拥有的信息。

7.保存这个文件，在Firefox中重新载入它，并且在评论文本框中输入一些文本。

现在，每次向字段中输入一个字母，控制台应该显示评论文本框中的内容。到目前为止，我们应该已经掌握了控制台，但是，我们还要添加一条消息，然后完成这个脚本。

8.编辑keyup事件函数，添加如下的第5行和第6行：

1$（'#comments'）.keyup（function（）{2

console.log（'Event：keyup'）；3

var text=$（this）.val（）；4

console.log（'Contents of comments%s'，text）；5 var chars=text.length；

6 console.log（'Number of characters：%d'，chars）；

7}）；//end keyup

第5行计算了存储在text变量中的字符的数目（参见14.1.1节了解关于length属性的更多内容），并且将其存储在变量chars中。为了确保脚本正确地计算了字符数，使用log（）函数（第6行）向控制台显示一条消息。既然变量chars保存了一个数字，可以使用%d符号来显示一个整数值。

还剩下最后一件事情：完成脚本以使其显示输入的字符数目，以便访问者可以看到。

9.在keyup事件函数的末尾添加最后一行，完成后的页面脚本如下所示：

1＜script＞

2$（document）.ready（function（）{

3 console.log（'READY'）；

4$（'#comments'）.keyup（function（）{

5 console.log（'Event：keyup'）；

6 var text=$（this）.val（）；

7 console.log（'Contents of comments：%s'，text）；

8 var chars=text.length；

9 console.log（'Number of characters：%d'，chars）；

10$（'#count'）.text（chars+"characters"）；

11}）；//end keyup

12}）；//end ready

15＜/script＞

10.保存该文件，并且在Firefox中预览。

确保启用了Firebug，页面和控制台现在应该如图15-5所示。我们可以在教程目录的chapter15文件夹下看到本教程的一个完成后的版本，即complete_console.html。

注意：一旦我们有了一个功能正常的程序，应该从脚本中删除所有的console.log（）代码。在某些浏览器中，log（）函数将会产生错误。