JavaScript修炼之道
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2 JavaScript代码的调试方法

开发人员在开发程序时，经常会碰到程序异常现象，要快速定位并解决程序异常，要求开发人员掌握一些常用的代码调试方法和调试工具。在JS代码中，最常用的调试方法是alert()方法和console.log()方法，而常用的调试工具则是IE浏览器的的“开发人员工具”、Firefox浏览器的“Firebug”工具（对较低版本的Firefox浏览器）或Firefox浏览器的“开发者>>Web控制台”（对较高版本的Firefox浏览器）以及Chrome浏览器的“开发者工具”。

1.2.1 使用alert()方法调试脚本代码

在JS程序中常使用window对象的alert()方法进行代码跟踪或定位程序错误。alert()方法的作用是生成一个警告对话框，对话框中显示的信息由方法参数设定。alert()方法可以出现在脚本程序中的任意位置。alert()方法通过显示的变量值来跟踪代码，以及是否能显示警告对话框来定位错误。

alert()基本语法：

方式一：alert(msg);
方式二：window.alert(msg);

alert()方法是window对象的方法，在调用时可以通过window对象来调用，也可以直接调用。参数msg的值可以是任意值，当参数为非空对象以外的值时，警告对话框中显示的信息为参数值；当参数为非空对象时，在警告对话框中显示的是以[object object]格式表示的对象，其中第二个“object”会根据具体的对象来变化。例如，如果对象是一个表单输入框时，在对话框中将显示：[objectHTMLInputElement]。

需要注意的是，不同浏览器弹出的警告对话框外观不一样，比如对“alert("这些是警告对话框显示的信息")”这条代码，在Chrome浏览器（本书中示例的浏览器的版本主要为：Chrome73）中显示的警告对话框如图1-3所示，在Firefox浏览器中显示的警告对话框则如图1-4所示，在IE11浏览器中显示的警告对话框如图1-5所示。

图1-3 Chrome浏览器中显示的警告对话框

图1-4 Firefox浏览器中显示

图1-5 IE11浏览器中显示的警告对话框的警告对话框

【示例1-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代码块，该代码块主要处理一个循环语句，在第一次循环时会弹出图1-6所示的警告对话框，然后程序停止执行，直到单击了图1-6所示对话框中的“确定”按钮后才程序会继续执行，此时会弹出图1-7所示对话框，同样，如果不单击图1-7所示对话框中的“确定”按钮，程序也停止执行。可见，alert()具有阻塞程序执行的作用。

图1-6 第一次循环时显示的变量sum值

图1-7 第一次循环时显示的变量i值

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

执行完第一个<script></script>之间的JS代码块后，页面中显示表单输入框，接着执行第二个<script></script>之间的JS代码块。结果只显示图1-8所示的警告对话框，即只有alert('111')执行了，alert('222')并没有执行。可见alert('111')和alert('222')之间的代码块有错误，导致程序无法往下执行。对该行代码进行检查后，发现倒数第6行“documnt”写错了，正确的写法是“document”。

图1-8 第二个script标签对之间的alert()输出结果

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

1.2.2 使用console.log()方法调试脚本代码

在JS中，除了使用alert()调试代码外，我们还常常使用console对象的log()对JS程序进行调试，console.log()方法的作用是在浏览器的控制台中输出指定的参数值。

需要注意的是，在一些较低版本的浏览器，比如IE6以及没装“Firebug”插件的较低版本的Firefox等浏览器中是不能使用console.log()的。现在IE11以及较新版本的Firefox和Chrome不用安装任何插件，都具备调试功能，对这些浏览器，window对象会自动注册一个名为console的成员变量，指代调试工具中的控制台。

console.log()的使用语法如下：

console.log(msg);

log()方法的参数msg和alert()的参数用法一样，也可以是任意值；但当参数为非空对象时，不同于alert()输出的是[object object]格式的内容，log()的输出内容包含对象的结构内容。

就调试作用来说，alert()和console.log()方法类似，但相比于alert()，使用console.log()是一种更好的方式，原因如下。

（1）alert()会阻塞JS程序的执行，不单击“确定”按钮，后续代码无法继续执行；而console.log()仅在控制台中打印相关信息，不会阻塞JS程序的执行。

（2）对于输出内容为对象时，console.log()输出的对象能看到对象结构；而alert()则是以[object object]格式输出对象，无法看到对象结构。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用console.log()方法调试代码</title>
<script>
     window.onload = function (){
        var sum = 0,i = 1;
        var oText = document.getElementById('val');
        while(sum < 20){
           sum += i;
           console.log("sum=" + sum); //跟踪sum变量的值
           console.log("i=" + i); //跟踪变量i的值
           i++;     
        }

        oText.value = sum;
     };
</script>
</head>
<body>
累加结果：<input id="val" type="text"/>
</body>
</html>

上述代码在Chrome浏览器中执行后，同时按“Ctrl+Shift+I”组合键（对Mac苹果电脑使用的是Command+Option+I组合键），打开Chrome浏览器的“开发者工具”，默认将打开“Console”浏览器控制台，在控制台中查看各个console.log()的输出结果，可看到图1-9所示的结果。刷新图1-9所示页面，可看到几乎在控制台显示结果的同时，也显示了表单输入框，可见console.log()不会阻塞JS程序的执行。

图1-9 console.log()的输出结果

1.2.3 使用Chrome的“开发者工具”调试脚本代码

对JS程序的调试，除了在JS程序中使用alert()、console.log()方法跟踪和调试代码外，开发人员也会经常使用一些调试工具。最常用的JS调试工具就是一些主流的浏览器的调试工具，如IE11浏览器的“开发人员工具”、Firefox浏览器的“Firebug”工具或较新版本的“开发者>>Web控制台”以及Chrome浏览器的“开发者工具”。限于篇幅的原因，本节将只介绍Chrome浏览器的“开发者工具”调试工具，IE浏览器的“开发人员工具”和Firefox浏览器的“Firebug”以及“开发者>>Web控制台”工具的使用和Chrome浏览器的“开发者工具”类似，大家可参考Chrome浏览器的“开发者工具”来使用它们。

相对于使用alert()方法来定位错误，使用调试工具会更便捷高效。因为调试工具可以在控制台具体指出出错的代码行数，以及具体的错误类型。此外，还可以使用控制台直接运行JS代码。接下来我们将通过示例1-3的JS代码的的调试来介绍Chrome的“开发者工具”的使用。

【示例1-3】使用Chrome的“开发者工具”调试代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用调试工具调试代码</title>
<script>
     window.onload = function (){
         var sum = 0,i = 1;
         var oText = documnt.getElementById('val');
         while(sum < 20){
              sum += i;
              i++;     
         }
         oText.value = sum;
     };
</script>
</head>
<body>
累加结果：<input id="val" type="text"/>
</body>
</html>

1．调试定位错误

在Chrome浏览器中运行示例1-3，当没有得到预期结果时，使用调试工具会比较容易定位错误。操作步骤为：同时按“Ctrl+Shift+I”组合键，打开Chrome浏览器的“开发者工具”，此时在默认打开的“Console”控制台可以看到显示出错代码行及错误类型，如图1-10所示。

图1-10 在控制台中显示错误信息

图1-10报引用错误，说文件ex1-3.html中的第9行代码中的“documnt”没有定义，根据这个错误信息，我们很容易发现原来这个单词写错了，正确的写法是“document”。

2．跟踪调试代码

使用调试工具，同样也可以跟踪变量的变化，步骤如下。

（1）修改图1-10所报错误后，将“开发者工具”中的选项卡切换到“Sources”，将打开一个包含3个窗口的界面，在左侧的窗口中双击文件“ex1-3.html”，此时会在中间窗口中打开源代码，如图1-11所示。

图1-11 打开源代码

（2）对代码添加断点。对代码设置断点的方法是：在需要添加断点的那个代码行的行号处单击鼠标左键，此时该行行号会显示蓝色背景，如图1-12所示。

图1-12 设置断点

（3）设置断点后刷新页面，此时根据需要可单击右侧的调试窗口中的这3个按钮中的其中一个或按这3个按钮对应的快捷键F10、F11和Shift+F11，分别实现逐句（F10）、逐过程（F11）和跳出（Shift+F11）这3种调试情况。在调试过程中，我们可以在右侧的调试窗口中的“Local”项中跟踪每一个变量在运行过程中的取值情况，如图1-13所示。

图1-13 跟踪调试代码

注：单击右侧调试窗口中的按钮，或同时按“Ctrl+\”组合键或按“F8”快捷键可以停止代的码调试。

3．使用控制台运行JS代码

打开Chrome浏览器，打开“开发者工具”的控制台，然后在控制台窗口光标所在位置输入JS代码或按“Ctrl+V”组合键复制JS代码，然后按“Enter”键回车即可运行控制台中的JS代码，如图1-14所示。

图1-14 在控制台中运行JS代码

注：控制台中会默认输出JS代码中最后一个变量的值，如图1-14中的最后一个“6”就是最后的变量i的值。

上一章目录下一章