本节书摘来自异步社区《jquery与javascript入门经典》一书中的第2章，第2.4节，作者：【美】brad dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看
前面介绍了如何在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文件一样调试它们。