Javascript的错误处理与调试

错误与调试

1.语法错误的处理与调试

语法错误调试

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

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

<script>    var a = 3+4;    alert(a);    alter(a);    a++;    alert(a);</script>

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

在网页按F12开发者工具查看Console控制台会发现报错了，Uncaught ReferenceError: alter is not defined

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

语法错误的发现方法：

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

（2）    try……catch捕获异常

<script>var a = 3+4;alert(a);try{alter(a);}catch(e){    alert(e);}a++;alert(a);</script>

2.逻辑错误的处理与调试

调试的基本原理：

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

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

怎么去控制节奏呢？

（1）    设置断点

打开开发者工具

在sources页打开源代码

在代码左侧（行号边上）单机即可在该处设置断点

先来调试一下这个程序：

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

设置断点

对22、23行代码设置断点

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

（1）    单步执行（step）

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

快捷键F10

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

怎么看结果呢？

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

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

也可以通过在代码中选中要查看的

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

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

再按F10单步执行后，查看p的值

再查看a+b+c的值

很明显，是字符串的问题。

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

解决方案就是

<script>    var a = Number(prompt("请输入第一边长"));    var b = Number(prompt("请输入第二边长"));    var c = Number(prompt("请输入第三边长"));    var p = (a + b + c) / 2;//计算周长的一半    var s = Math.sqrt(p * (p - a) * (p - b) * (p - c));//海伦公式计算面积    alert(s);</script>