1.6 调试jQuery程序

大部分复杂的工具都带有调试功能，如Dreamweaver、Visual Studio和Eclipse。如果我们用这些工具开发jQuery代码，调试起来难度不是很大，但很多人习惯用文本工具直接写代码，这就增加了调试的难度。目前，Chrome和Firefox浏览器都支持在浏览器中直接调试和修订。下面我们以Firefox为例学习如何调试。

Firefox浏览器专门提供了一个名为Firebug的插件进行jQuery库的程序调试。打开Firefox浏览器，单击菜单栏中的“主菜单”|“开发者”|“查看器”，或者使用快捷键F12都可以打开调试工具，如图1.4所示。

图1.4 脚本调试界面

为了演示调试工具，通过浏览器打开jquery01.html。在该浏览器上按快捷键F12可以打开脚本调试界面，如图1.5所示。

图1.5 脚本调试界面

在打开的工具中有一行菜单栏，包括“查看器”“调试器”“控制台”等。单击“调试器”菜单可以打开调试界面，如图1.6所示。

图1.6 启用jQuery代码调试

启动jQuery代码调试后，在代码区域的窗口中单击第10行代码的行号10，即可在该行添加一个“断点”，如图1.7所示。如果行号前面有一个蓝色的箭头状图标，就说明断点添加成功。

图1.7 添加断点

单击页面中的div，在“监视”窗口可以很方便地获取当前状态的一些变量或对象属性的信息，如图1.8所示。

图1.8 监控视图

单击代码窗口工具栏中的“跳过”按钮或按快捷键F10，继续执行程序，页面会弹出如图1.9所示的对话框。

图1.9 继续执行

从上面的执行结果可以发现，Firebug插件更方便开发人员调试jQuery代码。