1.3 JavaScript的调试

目前的主流浏览器均支持直接调试JavaScript代码，本节以常见的Chrome和Firefox两款浏览器为例进行介绍。

这里先给出一段测试代码（详见源代码目录ch01-js-debug.html文件）：

其中，【代码1-1】中第20行代码引入了一个外链式js脚本文件，具体代码如下（详见源代码目录ch01-js-debug.js文件）：

下面分别使用Chrome和FireFox浏览器调试上面定义的js代码。

1．使用Chrome调试

下面使用Chrome浏览器运行测试代码所在的HTML网页，如图1.4所示。打开Chrome浏览器的开发工具面板（或按F12键），如图1.5所示。

可以在JavaScript代码的第08行添加断点，单击行号就可以，如图1.6所示。这样每次程序执行到该行时中断，如图1.7所示。将鼠标放在某个变量上，就会显示当前变量的值，然后通过右侧的调试控制条可以控制是否继续执行下一行。

2．使用Firefox调试

下面使用Firefox浏览器运行测试代码所在的HTML网页，如图1.8所示。打开Firefox浏览器的调试功能面板，如图1.9所示。

下面在图1.9的js源码窗口中为【代码1-2】中的第05行脚本语句设置断点，如图1.10所示。

然后，按“F5”功能键重新刷新页面，再按步进“F11”功能键来调试执行js代码，页面效果如图1.11和图1.12所示。在图1.11和1.12中可以看到，每次执行到【代码1-2】中第05行脚本语句设置断点处时，js代码均会被中断，然后在日志窗口中输出调试信息（变量“i”计数器的数值）。以上就是JavaScript脚本语言开发与调试的基本过程方法。