2.4 调试jQuery和JavaScript
前面介绍了如何在JavaScript控制台中查找JavaScript和其他脚本的错误。如果脚本并未导致浏览器错误，只是运行方式不符合预期，该如何办呢？Firebug集成了一个优秀的调试器，可助一臂之力。
2.4.1 JavaScript调试器
JavaScript调试器让您能够查看随网页加载到浏览器中的JavaScript脚本。除查看脚本外，您还可以设置断点、监控变量值以及查看调用栈，就像使用其他调试器时一样。
图2.21显示了Firebug提供的JavaScript调试器的组成部分。在JavaScript调试器中，您可使用如下功能。
- JavaScript视图：显示实际的JavaScript代码。
图2.21 Firebug的JavaScript调试器提供了代码、监控、栈和断点视图
- JavaScript选择列表：这个列表包含随网页加载的JavaScript脚本清单，您可单击它来选择要查看的JavaScript文件。
- 在下一语句处中断：该选项被启用时，浏览器将中断调试器，执行到下一行JavaScript代码行不再执行。
- 监控：“监控”选项卡显示了当前执行的代码可用的函数、变量和属性等，如图2.21所示。这是一个极具价值的窗口，代码执行时通过它可知道变量和对象的值。另外，您还可以在监控列表中添加自己的表达式，为此只需在监控列表开头输入它们即可。“监控”选项卡的一项卓越功能是，您可双击变量的值并修改它们，这是一种测试假设的极佳方式。
- 栈：“栈”选项卡提供了导致当前执行代码的函数调用过程，它极具价值的一个地方是，您可展开函数名来查看传递给每个函数的参数值。您还可以单击函数名，这将在JavaScript视图中显示相应的文件，并高亮显示相应的代码行。
- 栈面包条：类似于“Stack”选项卡，也显示函数调用栈。您还可单击函数名，这将在JavaScript视图中显示相应的文件，并高亮显示相应的代码行。
- 断点：断点让您能够指定执行到什么地方后停止。您设置断点后，浏览器将在执行到相应代码行后停止。要设置断点，可在JavaScript视图中单击代码行左边；断点用红点表示。要删除断点，可单击它。“断点”选项卡列出了您设置的所有断点；要在“断点”选项卡中禁用断点，可取消选择它旁边的复选框。
- 当前执行的代码行：当前执行的代码行用黄色箭头表示。
- 重新运行：单击该图标将重新启动当前执行的脚本，并使用以前的输入。
- 断续：接着往下执行脚本，直到遇到断点。
- 单步进入：单击这个图标将往下执行一行代码。如果这行代码调用了其他函数，将进入该函数的第一行。
- 单步跳过：单击这个图标将往下执行一行代码。如果这行代码调用了其他函数，将执行整个函数并进入下一行。如果该函数包含断点，将在断点处停止执行。
- 单步退出：单击该图标将执行当前函数余下的所有代码，并进入调用函数的下一行。
使用JavaScript调试器
下面的示例将帮助您熟悉JavaScript调试器。请看程序清单2.4所示的代码，这是一个基本网页，包含一个按钮和一个计数字符串。这个HTML文档包含两个< div>元素。第一个为< div id="clicker"onclick="countIt()">，定义了一个简单的按钮。当您单击这个按钮时，将调用JavaScript函数countIt( )。第二个是< div id="counter">，用于显示一个数字。
每当您单击按钮时，JavaScript函数countIt( )都将显示的数字加1。然而，这些JavaScript代码存在问题，导致数字增加到2后就不再增加了。
程序清单2.4 一个非常简单的HTML文档，其中的JavaScript代码有问题
请按如下步骤在JavaScript调试器中设置断点并调试问题。
- 在项目的文件夹hour02中，新建文件hour0204.html，添加程序清单2.4所示的代码，再保存文档。
- 启动Firefox并单击Firebug图标以启用Firebug。
- 在Firefox中输入下面的URL，注意到网页包含一个按钮和数字1。
- 单击Firebug中的标签“脚本”（Script），再从脚本选择列表中选择hour0204.html，您将在调试器的脚本区域看到程序清单2.4所示的代码。注意到第7～11行的函数设置div元素counter显示的值。
- 单击行号8的左边，在第8行设置一个断点。出现了一个红点，如图2.22所示。另外，确保在调试器中显示了“监控”选项卡。
- 单击网页中的按钮，调试器中将出现一个黄色箭头，而第8行呈高亮显示。脚本执行到这行后停止了。这个函数决定要在div元素中显示什么值。在“监控”选项卡中，注意到变量cnt还未定义。
- 单击“单步跳过”图标，变量cnt的值将变成1。
- 再次单击“单步跳过”图标，代码行cnt += 1；将变量cnt的值变成了2。
- 单击“单步退出”图标三次，跳出当前函数以及后续jQuery函数。注意到网页中显示的值变成了2。
- 单击“断续”按钮，让脚本执行完毕。到目前为止，一切顺利。
- 再次单击网页中的按钮。调试器将再次激活，并像第6步那样在第8行停止。注意到变量cnt的值再次变成了未定义。
- 单击“单步跳过”图标，变量cnt的值变成了1。再次单击“单步跳过”图标，变量cnt的值变成了2。单击页面中的按钮时，变量cnt重新变成了未定义，然后依次变为1和2。
- 为修复这种问题，在Aptana中调换第7和8行的位置，从而在函数incCount()外面定义变量cnt。这样，变量cnt将只被定义和设置一次（即脚本加载时），然后再定义函数incCount()。
- 保存这个文件，再在Firefox中刷新网页。这次脚本将在页面加载时停止执行。图2.23表明，JavaScript调试器在hour0204.html的第8行停止执行，这是因为第8行为函数定义而不是变量cnt的定义。
- 单击第8行的断点将其删除，再在第9行添加一个断点，如图2.23所示。
- 单击“断续”，按钮接着执行JavaScript并结束网页加载。
- 单击网页中的按钮，JavaScript将再次停止执行—这次是在第9行。这次您在“监控”选项卡中看不到变量cnt，除非展开元素Window（窗口），如图2.24所示。
- 为避免每次调试时都展开元素Window，单击监控列表开头的NewWatch Expression（新建监控表达式），如图2.24所示，再输入cnt并按回车键。在监控列表开头新增了监控表达式cnt，如图2.24所示。
- 单击“单步跳过”图标，变量cnt的值将变成2。再单击“断续”按钮接着往下执行。
- 再次单击网页中的按钮，这次变量cnt的值为2。单击“单步跳过”图标，变量cnt的值将变成3。
- 程序看起来没有问题，因此单击第9行的断点将其删除，再单击“断续”按钮接着往下执行。
- 现在每当您单击按钮时，显示的数字都将加1。至此，您成功地完成了JavaScript脚本调试。
这个示例非常简单，这是有意为之的，旨在让您能够轻松地按指定步骤做，从而熟悉调试器的工作原理。完成本书的练习时，您可能会多次用到这个调试器。请牢记基本的调试步骤：设置断点并在分步执行代码时查看变量的值。
2.4.2 如何调试jQuery呢
大家常问的一个问题是，如何调试jQuery。即便是有丰富JavaScript调试经验的人，也会提出这样的问题。答案很简单，jQuery和各种插件也是JavaScript代码，要调试jQuery，可从网上下载未压缩的jQuery库，并将其存储到项目中。这将在本书后面介绍。
为何要下载未压缩的版本呢？因为压缩后的版本可读性极差，所有代码都放在一行中，在调试器中显示的效果很糟。未压缩的版本格式很好，可读性极强。
注意：即便无法获得未压缩的jQuery库文件，可在Aptana中打开jQuery库文件，再选择菜单File>Format。Aptana将自动设置文件的格式，使其美观易读。大多数IDE都提供了这样的功能。
对于格式良好的jQuery库或其他JavaScript库，可像调试其他JavaScript文件一样调试它们。