JavaScript 错误与调试

首先先说错误的概念预处理

计算机程序的错误分为两种：语法错误和逻辑错误。

比如alert拼写错误，写成了alter

var a = 3+4;
alert(a);
alter(7);
a++;
alert(a);

运行结果只显示了7 ，后面的结果没有显示，说明后面的代码没有执行。因为输出7后遇到了语法错误，程序终止执行。

上例也进一步说明了解释性语言的特点，翻译一条，执行一条，遇到错误提前终止执行。

var b = a + 3;
alert(b);

如图一：

语法错误的发现方法：

1. 浏览器的开发者工具console窗口，能显示错误及说明。

2. Try{ }catch(e){ } 捕获异常

   逻辑错误：程序在语法上是没有问题的，但是实际执行效果和预期结果有出入。

var age = Number(prompt("请问你的年龄是"));
if(17 <= age <= 24){
    alert("欢迎你报名参军");
}else{
    alert("抱歉，你不能参军")
};

当输入年龄96或者3时，都能报名参军，结果显然是错误的，但执行过程中没有任何语法错误。

调试的基本原理：

程序的执行是自动的，而且速度非常快，无法了解中间的执行过程，但是几乎所有的开发工具都提供了调试功能，可以去控制程序的执行节奏，从而可以让开发者看清执行的过程。

控制执行节奏：

1. 设置断点。

   打开开发者工具，在source页打开源代码。

在行号左边单击即可在该处设置断点，见图二

1. 单步执行（step）快捷键F10.

          每执行一步都会停下来，然后再继续下一步，见图三

控制节奏的目的是看清或者了解程序的执行过程，而不仅仅是结果。

开结果步骤：

1. 查看程序执行的步骤，也就是上图中的指示即将要执行的代码指示器，如果轨迹与预期不一致，说明上一步执行的代码出现了逻辑错误。

2. 还可以去查看变量、表达式的值。

         A.在watch窗口添加要查看的变量或表达式，见图四

         此时就可以看到age的值

在watch窗口就可以看到添加的变量或者表达式的值，见图五

因为计算机程序的每一步执行的结果都是唯一的、可预期的。同时我们又可以通过上述手段控制程序的运行节奏并查看程序执行的状态（如轨迹、变量表达式的值），也就是我们可以看到实际执行结果。那么将实际结果和预期结果对比，如果出现不一致，说明刚刚执行的那一步出现的错误，即定位错误。

一旦定位错误，根据所学知识或经验，应该就很容易出现错误原因，从而找到解决方案。

再来调试一个

var a = prompt("请输入第一边长");

    var b = prompt("请输入第二边长");

    var c = prompt("请输入第三边长");

    var p = (a + b + c) / 2;//计算周长的一半

    var s = Math.sqrt(p * (p - a) * (p - b) * (p - c));//海伦公式计算面积

alert(s);

运行程序，程序将在预定位置停止，见图五

查看三个变量 见图六

单步执行，查看p的值 见图七

在查看a+b+c的值 见图八

a+b+c的值并不是我们预期的6，而是“345”，原来是做了字符串的拼接运算，而不是我们希望的加法，所以是类型问题。

解决方案就是将输入的数据（字符串）转换为数值

调试工具不仅仅是定位错误的工具，也是一个非常重要的学习工具。

因为调试工具可以让我们直观地看到运行轨迹以及运行状态，有助于我们对于一些抽象知识的理解。