第 2 章 调试jQuery和JavaScript网页
本章介绍如下内容：
- 到哪里寻找jQuery和JavaScript脚本输出的信息；
- 如何调试HTML元素存在的问题；
- 如何轻松地找出并修复CSS布局问题；
- 如何在Web浏览器中实时地查看和编辑DOM；
- 如何快速找出并修复JavaScript问题；
- 有哪些信息可供用来分析浏览器和Web服务器之间的网络流量。
编写JavaScript和jQuery应用程序时，面临的一项重大挑战是找出并修复脚本中的问题。简单的语法错误和无效值可能令您万般沮丧，浪费您大量时间。有鉴于此，出现了一些卓越的工具，可帮助您快速而轻松地找出脚本中的问题。在本章中，您将学习使用Firebug调试JavaScript的基本知识。虽然其他浏览器的开发控制台稍有不同，但大部分原理是相通的。另外，如果您不懂本章的示例代码，也不用担心，本书后面将介绍它们。在您大量地编写代码前，应明白如何调试。
2.1 JavaScript控制台
您首先需要熟悉的工具之一是JavaScript控制台，它让您能够查看JavaScript脚本的输出：错误和日志消息将实时地显示到JavaScript控制台。
例如，脚本存在错误，导致浏览器无法对其进行分析时，这种错误将显示到控制台。除错误外，您还可使用console.log语句在JavaScript控制台显示调试消息。
注意：除console.log外，您还可使用console.error()、console.assert()和其他语句向JavaScript控制台显示日志信息。
2.1.1 理解JavaScript控制台
JavaScript控制台是一个非常简单的工具，但功能强大。它由两部分组成：控件和日志项列表，如图2.1所示。
请注意单击Console（控制台）标签时显示的菜单。使用该菜单可启用控制台，还可指定要在消息列表中显示的错误和日志消息类型。
控制台还提供了包含多个选项的工具栏，这些选项都可通过单击来开关。下面描述了每个选项。
- Break On Errors（在所有错误处中断）：启用了该选项时，JavaScript将在脚本中遇到错误时停止执行。如果您要捕获错误并查看错误发生时变量的值，这将很有用。
- Clear（清除）：清空消息列表中的消息。
- Persist（保持）：保留消息，即便页面被重新加载。如果没有启用该选项，重新加载页面时将清空消息列表。
- Profile（概况）：启用和停止跟踪代码执行时间的剖析器。
- All（全部）：显示所有消息。在大多数情况下，应显示所有消息，除非您只关注特定的消息。
- Error（错误）：只显示错误消息。
- Warnings（警告）：只显示警告消息。
- Debug Info（调试信息）：只显示调试信息。
- Cookies：只显示与Cookie相关的消息。
- jQuerify：修改加载jQuery库的脚本，以包含最新的jQuery库代码。这是FireQuery插件提供的功能。
在图2.1所示的消息列表部分，注意到有两种消息。一种是log语句显示的，另一种是错误。在这两条消息的右边，都显示了行号；如果您单击行号，将直接切换到代码。
在错误消息中，注意到上面的文本指出了错误，而下面的文本指出了实际的JavaScript代码。这对调试很有帮助，因为根据指出的错误和代码通常能够发现问题所在。
使用JavaScript控制台找出错误
要明白控制台的用法，最简单的方式是使用它来调试脚本。请看程序清单 2.1 所示的HTML代码，其中包含多种错误。请在Aptana中按如下步骤将这个程序清单加入到项目中。
- 右击项目并从弹出菜单中选择New>Folder。
- 将文件夹命名为hour02并单击Finish按钮。
- 右击新建的文件夹并从弹出菜单中选择New>File。
- 将文件命名为hour0201.html。
- 输入程序清单2.1所示的内容；如果您从配套网站下载了该文件，也可将其内容复制并粘贴到新文件中。
- 保存文件。
程序清单2.1 一个包含JavaScript错误的简单HTML文档
程序清单 2.1 所示代码的目的如下：在浏览器加载页面后向控制台显示消息 Page Is Loaded；每当用户单击浏览器中的文本Click Me时，都显示消息User Clicked。问题是这个脚本存在多个bug。
文件准备就绪后，按如下步骤使用JavaScript控制台来调试错误。
- 启动Firefox并单击Firebug图标。
- 在Firefox中输入下面的URL，以加载新创建的网页。
- 在Firebug中，单击Console（控制台）标签以显示JavaScript控制台，如图2.2所示。
- 请注意控制台中显示的错误，如图2.2所示。第一个错误指出loadedFunction()的定义中缺少“，”。第二个错误指出loadedFunction未定义。结合这两个错误可知，loadedFunction()的定义有问题。从定义这个函数的语句可知，function被错误地拼写成了fnction。
- 在Aptana中，将第6行的单词fnction改为function。
- 回到 Firefox 并刷新网页。现在控制台只显示了 Page Is Loaded，这是函数loadedFunction()显示的消息，并非错误。
- 单击文本Click Me，控制台将新增一条错误消息，如图2.3所示。这条错误消息指出clickItNot未定义。在HTML文件中查找clickItNot，发现第15行将事件onclick关联到了clickItNot()，但定义的JavaScript函数名为clickIt()。
- 在Aptana中，将第15行的clickItNot改为clickIt，再保存文件。
- 重新加载网页。
- 再次单击文本Click Me，控制台显示两条日志消息，而没有错误消息，如图2.4所示。至此，成功地完成了网页调试工作。