JavaScript中的错误和调试

JavaScript中错误和调试

错误的概念与处理
错误分为两种：语法错误和逻辑错误。

语法错误：比如  ”abc”*3 字符串类型和数字类型

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

<script>

    var a = 3 + 4;

    alert(a)

    alter(a);

    a++;

    alert(a);

</script>

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

通过开发者工具可以看到遇到语法错误及其说明

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

<script>

    /*引用未定义的变量*/

    var b = a + 3;

    alert(b);

</script>

语法错误的发现方法：

（1）开发者工具的console窗口。能显示错误及其说明。

（2）Try …… catch 捕获异常。

逻辑错误：20< a <30;

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

<script>

    /*报名参军的年龄条件：17-24周岁*/

    var age = Number(prompt("请输入你的年龄："));

    if(17 <= age <= 24){

        alert("欢迎你报名参军");

    }else{

        alert("抱歉，你不能参军！");

    }

</script>

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

调试的基本原理：

程序的执行是自动的，而且速度很快，无法了解中间的执行过程。

但是几乎所有的开发者工具都提供了调试的功能，可以去控制程序的执行节奏，从而可以让开发者工具看清执行的过程。

  怎么去控制节奏呢？

（1）设置断点

在开发者工具当中打开代码

在sources页打开源代码

在代码左侧（行号边上）单击即可在该出设置断点。

（2）单步执行（step）

每执行一步就会停下来，然后在继续下一步。

快捷键F10

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

怎么看结果？

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

（2）查看变量、表达式的值。

此时可以看到变量age的值

也可以通过选中代码中药查看的变量或表达式，右键选中Add to watch

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

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

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

再来调试一个程序。 

<script>

    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);

</script>

运行程序，程序将在预定断点停下来

查看 a b c变量的值

单步执行，查看p的值

查看a + b + c的值

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

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

在重新调试程序，并查看结果。

总结：

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

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