在 JS 代码中，最常用的调试方法是 alert() 方法和 console.log() 方法，而常用的调试工具则是 IE 浏览器的的“开发人员工具”、Firefox 浏览器的“Firebug”工具（对较低版本的 Firefox 浏览器）或 Firefox 浏览器的“开发者>>Web 控制台”（对较高版本的 Firefox 浏览器）以及 Chrome 浏览器的“开发者工具”。
在 JS 程序中常使用 window 对象的 alert() 方法进行代码跟踪或定位程序错误。alert() 方法的作用是生成一个警告对话框，对话框中显示的信息由方法参数设定。alert() 方法可以出现在脚本程序中的任意位置。alert() 方法通过显示的变量值来跟踪代码，以及是否能显示警告对话框来定位错误。
alert() 基本语法：
方式一：alert(msg);
方式二：window.alert(msg);
alert() 方法是 window 对象的方法，在调用时可以通过 window 对象来调用，也可以直接调用。
参数 msg 的值可以是任意值，当参数为非空对象以外的值时，警告对话框中显示的信息为参数值；当参数为非空对象时，在警告对话框中显示的是以 [object object] 格式表示的对象，其中第二个“object”会根据具体的对象来变化。例如，如果对象是一个表单输入框时，在对话框中将显示：[objectHTMLInputElement]。
需要注意的是，不同浏览器弹出的警告对话框外观不一样，比如对“alert("这些是警告对话框显示的信息")”这条代码，在 Chrome 浏览器（本教程中示例的浏览器的版本主要为：Chrome73）中显示的警告对话框如图 1 所示，
图 1：Chrome 浏览器中显示的警告对话框
在 Firefox 浏览器中显示的警告对话框则如图 2 所示，
图 2：Firefox浏览器中显示
在 IE11 浏览器中显示的警告对话框如图 3 所示。
图 3：IE11 浏览器中显示的警告对话框的警告对话框
【例 1】使用 alert() 方法调试代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用alert()方法调试代码</title>
<script>
var sum = 0,i = 1;
while(sum < 20){
sum += i;
alert("sum=" + sum); //跟踪sum变量的值
alert("i=" + i); //跟踪变量i的值
i++;
}
</script>
</head>
<body>
累加结果：<input id="val" type="text"/>
<script>
alert('111'); //定位错误
var oText = documnt.getElementById('val');
alert('222'); //定位错误
oText.value = sum;
</script>
</body>
</html>
注：示例代码中包含了多条 JS 代码。对这些代码的作用，我们现在不用过多关注，后面将会一一介绍到，目前大家只需要关注调试 JS 代码的方法就可以了。
上述代码在 while 循环语句中使用了两个 alert() 方法来分别跟踪 sum 变量和 i 变量的值，从显示的对话框的值我们可以看到这两个变量值的变化。另外在第二个 script 标签对之间也使用了 alert() 方法，这两个 alert() 方法主要是用来定位错误的。
上述代码在 Chrome 浏览器时，首先执行第一个<script></script>标签对之间的 JS 代码块，该代码块主要处理一个循环语句，在第一次循环时会弹出图 4 所示的警告对话框，然后程序停止执行，直到单击了图 4 所示对话框中的“确定”按钮后才程序会继续执行。
图 4：第一次循环时显示的变量 sum 值
此时会弹出图 5 所示对话框，同样，如果不单击图 5 所示对话框中的“确定”按钮，程序也停止执行。可见，alert() 具有阻塞程序执行的作用。
图 5：第一次循环时显示的变量 i 值
从运行结果中，可看到 while 循环语句总共执行了 6 次，每次都会弹出两个警告对话框分别显示变量 sum 和变量 i 的值。限于篇幅，在此，只显示了第一次循环的运行结果，其他循环的运行结果和图 4、图 5 类似，所不同的是这两个变量的值不一样。
执行完第一个<script></script>之间的 JS 代码块后，页面中显示表单输入框，接着执行第二个<script></script>之间的 JS 代码块。结果只显示图 6 所示的警告对话框。
图 6：第二个 script 标签对之间的 alert() 输出结果
即只有 alert('111') 执行了，alert('222') 并没有执行。可见 alert('111') 和 alert('222') 之间的代码块有错误，导致程序无法往下执行。对该行代码进行检查后，发现倒数第 6 行“documnt”写错了，正确的写法是“document”。
需要注意的是，用于调试代码的 alert() 方法在调试结束后要全部删掉。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/21403.html