2.5　代码调试

代码调试在任何一种开发语言中都是必不可少的技能。掌握各种调试技巧，能在工作中起到事半功倍的效果，例如快速定位问题、降低程序异常概率、帮助分析逻辑错误等。如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。本节将介绍常用JavaScript代码调试方法。

2.5.1　alert()方法

在控制台出现之前，JavaScript可以使用alert()方法进行代码跟踪。alert()方法可以出现在脚本程序的任意位置。

【例2-18】使用alert()方法调试代码

var sum = 0;
for (var i = 1; i <= 3; i++) {
   sum += i;
   alert('sum='+sum+',i='+i)
}

例2-18使用alert()方法跟踪sum和i的值，一共弹出三次对话框，需要单击第一个对话框的“确定”按钮，才能显示下一个对话框。从显示的对话框中可以看到两个变量值的变化。例2-18在Chrome浏览器中的运行结果，如图2-11所示。

图2-11　【例2-18】运行结果

由图2-11可知，用户需要单击对话框中的“确定”按钮，程序才会继续执行，因此alert()方法会阻塞后续程序代码的执行，连续测试不太方便。实际编程中，用于调试代码的alert()方法在调试结束后要全部删掉。

2.5.2　console.log()方法

除了alert()方法之外，JavaScript还可以使用console.log()方法进行调试。console.log()方法的作用是在浏览器的控制台中输出信息，它不会阻塞程序的执行。

【例2-19】使用console.log()方法调试代码

var sum = 0;
for (var i = 1; i <= 3; i++) {
    sum += i;
    console.log('sum='+sum+',i='+i) ;
}

例2-19在Chrome浏览器控制台中的运行结果，如图2-12所示。

图2-12　【例2-19】运行结果

由图2-12可知，console.log()方法在控制台中输出调试信息，而不影响页面显示。在调试完成后，console.log()方法的调试代码不删除也不会对业务逻辑造成破坏，但是为了代码整洁，还是应尽可能删除与业务逻辑无关的调试代码。

2.5.3　开发者工具调试

除了使用alert()方法和console.log()方法之外，开发人员经常使用浏览器的开发者工具定位代码错误、跟踪调试代码和在控制台中运行JavaScript代码。

1. 定位代码错误

开发者工具可以在控制台中具体指出错误的类型和出错代码所在的位置。

【例2-20】定位代码错误

var sum =0;
for (var i = 1; i <= 3; i++) {
   su += i; // sum误写为su
   console.log('sum='+sum+',i='+i) ;
}

例2-20在Chrome浏览器中的运行结果，如图2-13所示。

图2-13　【例2-20】运行结果

由图2-13可知，文件“例2-20.html”的第7行出现了错误，错误类型是“Uncaught ReferenceError（引用错误）”，错误信息是“su is not defined（su未定义）”。根据控制台报错信息，开发者容易定位错误，第7行正确的写法应是“sum += i;”。

2. 跟踪调试代码

开发者工具允许开发人员为JavaScript代码添加断点，使程序执行到某一特定位置暂停，方便开发者对该处代码段进行分析和处理。下面演示跟踪调试例2-19代码，步骤如下：

在Chrome浏览器中运行例2-19代码。

按F12键或者单击右键选中“检查”，打开开发者工具。

选中开发者工具的Sources选项卡。双击左侧窗口的文件名称“例2-19.html”，此时会在中间窗口打开源代码，如图2-14所示。

图2-14　Sources选项卡

添加断点。在需要调试的代码行号处点击鼠标左键，此时该行号会显示蓝色背景。断点可以添加多个，单击第7行添加断点的效果，如图2-15所示。

图2-15　添加断点

刷新页面。按F10键或F11键实现逐语句或逐过程调试程序。在调试过程中，可以在右侧窗口的Scope选项中跟踪每一个变量在运行过程中的值，或在Watch选项中添加需要观测的变量的值，或将鼠标悬停在需要观测的变量值上，演示效果如图2-16所示。

调试完毕取消断点。在已添加断点的代码行号处单击鼠标左键，刷新页面即可。

图2-16　跟踪调试代码

3 . 控制台中运行JavaScript代码

浏览器控制台中不仅能输出信息，还能直接运行JavaScript代码。在Chrome浏览器控制台中输入代码，按回车键即可运行JavaScript代码，如图2-17所示。

图2-17　控制台中运行JavaScript代码

提示： 程序漏洞引起的事故有很多，例如著名的“千年虫”问题。“千年虫”问题是指在某些使用了计算机程序的智能系统（包括计算机系统、自动控制芯片等）中，由于其中的年份只使用两位十进制数来表示，因此当系统进行（或涉及）跨世纪的日期处理运算时（如多个日期之间的计算或比较等），就会出现错误的结果，进而引发各种各样的系统功能紊乱甚至崩溃。因此，我们在开发调试程序中要注重细节，遇到无法解决的问题，应该坚持不懈查找资料、而不是放弃。任何一个小小的疏忽，哪怕是一个标点用错了，整个程序都将无法运行或不能得到正确的结果。在调试程序中应养成认真、细心和严谨的作风，通过不断调试、改错，培养和践行“工匠精神”。 /0FsqR6hFNe3MQO6EKwOWpuLCOEhlQOmiFtrKSj8L5MYIjk5NNqTMBW96WHuXUXR