首页 > 编程笔记 > JavaScript笔记

JS alert()方法调试代码

在编写 JavaScript 的过程中，很有可能会出现一些语法错误和程序异常，所以在开发过程需要经常调试脚本代码（注：随写随调试不失为一种好习惯）。在开发程序时碰到程序异常现象，要快速定位并解决程序异常，要求开发人员掌握一些常用的代码调试方法和调试工具。

在 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 所示，
Chrome浏览器中显示的警告对话框
图 1：Chrome 浏览器中显示的警告对话框

在 Firefox 浏览器中显示的警告对话框则如图 2 所示，
Firefox浏览器中显示
图 2：Firefox浏览器中显示

在 IE11 浏览器中显示的警告对话框如图 3 所示。
IE11浏览器中显示的警告对话框的警告对话框
图 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 所示对话框中的“确定”按钮后才程序会继续执行。
第一次循环时显示的变量sum值
图 4：第一次循环时显示的变量 sum 值

此时会弹出图 5 所示对话框，同样，如果不单击图 5 所示对话框中的“确定”按钮，程序也停止执行。可见，alert() 具有阻塞程序执行的作用。
第一次循环时显示的变量i值
图 5：第一次循环时显示的变量 i 值

从运行结果中，可看到 while 循环语句总共执行了 6 次，每次都会弹出两个警告对话框分别显示变量 sum 和变量 i 的值。限于篇幅，在此，只显示了第一次循环的运行结果，其他循环的运行结果和图 4、图 5 类似，所不同的是这两个变量的值不一样。

执行完第一个<script></script>之间的 JS 代码块后，页面中显示表单输入框，接着执行第二个<script></script>之间的 JS 代码块。结果只显示图 6 所示的警告对话框。
第二个script标签对之间的alert()输出结果
图 6：第二个 script 标签对之间的 alert() 输出结果

即只有 alert('111') 执行了，alert('222') 并没有执行。可见 alert('111') 和 alert('222') 之间的代码块有错误，导致程序无法往下执行。对该行代码进行检查后，发现倒数第 6 行“documnt”写错了，正确的写法是“document”。

需要注意的是，用于调试代码的 alert() 方法在调试结束后要全部删掉。

所有教程

优秀文章