JS的错误与调试

本是古典何须时尚 2022-06-11 06:57 175阅读 0赞

错误的概念与处理  
计算机程序错误有两种：语法错误和逻辑错误。  
比如alert拼写错误，写成了alter。  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
运行结果只显示7，后面的结果没显示，说明后面的代码没有执行。因为输出7后遇到了语法错误，程序终止执行。  
上例也进一步说明了解释性语言的特点：翻译一条，执行一条，遇到错误提前终止执行。  
引用了未定义的变量  
![这里写图片描述][SouthEast 2]  
![这里写图片描述][SouthEast 3]  
语法错误的排除方法：  
（1）开发者工具的console窗口，能显示错误及其说明  
（2）try……catch捕获异常  
逻辑错误在语法上是没有错误的，但是实际执行结果和预期结果有出入的。  
当输入年龄96或者3时，都能参军，结果显示是错误的，但执法过程没有任何语法错误  
调试的基本原理：  
程序的执行是自动的，而且速度非常快，无法了解中间的执行过程。但是几乎所有的开发者工具都提供调试的功能，可以去控制程序的执行节奏，从而可以让开发者看清执行过程。  
怎么去控制执行节奏呢  
（1）设置断点  
打开开发者工具  
在sources页打开源代码  
在代码左侧（行号边上）单机即可在该处设置断点  
![这里写图片描述][SouthEast 4]  
（2）单机step  
每执行一步都会停下来，然后再继续下一步  
快捷键F10  
![这里写图片描述][SouthEast 5]  
控制节奏的目的是看清或者了解程序的执行过程，而不仅仅是结果。  
怎么看结果呢  
（1）查看程序执行的轨迹，也就是上图中的指示即将要执行的代码指示器，如果轨迹与预期不一致，说明上一步执行的代码出现逻辑错误了。  
（2）查看变量、表达式的值  
a.在watch窗口添加要查看的变量或表达式，比方输入age  
![这里写图片描述][SouthEast 6]  
此时可以看到age的值  
![这里写图片描述][SouthEast 7]  
也可以通过在代码中选中要查看的变量或表达式，右键选择添加到watch![这里写图片描述][SouthEast 8]  
在watch窗口就可以看到添加的变量或者表达式的值。  
![这里写图片描述][SouthEast 9]  
因为计算机程序的每一步执行的结果都是唯一的、可预期的；同时我们又可以通过上述手段控制程序的运行节奏并查看程序执行的状态（如轨迹、变量表达式的值），也就是可以看到实际执行结果。那么将实际结果和预期结果对比，如果出现不一致，说明刚刚执行的那一步出现的错误，即定位错误。  
一旦定位错误，根据所学知识或经验，应该就很容易分析出错误原因，从而找到解决方案。  
再来调试一个程序

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

设置断点  
![这里写图片描述][SouthEast 10]  
运行程序，程序将在预定的断点位置停下来  
![这里写图片描述][SouthEast 11]  
查看a.b.c的值  
![这里写图片描述][SouthEast 12]  
观察p的值  
![这里写图片描述][SouthEast 13]  
再查看a+b+c的值  
![这里写图片描述][SouthEast 14]  
a+b+c的值并不是我们预期的6而是“345”。原来是做了字符串的拼接运算，而不是我们希望的加法，所以是类型问题  
解决方案就是将输入的数据转换为数值  
再重新调试程序，并调试结果  
![这里写图片描述][SouthEast 15]  
**调试工具不仅仅是定位错误的工具，也是非常重要的学习工具**  
因为调试工具可以让我们直观地看到程序的运行轨迹以及运行状态，有助于我们对于一些抽象知识的理解。

[SouthEast]: /images/20220611/49f60ba38c0f44239e5566226d41892a.png
[SouthEast 1]: /images/20220611/8e44be9762bc4c11b15bbb893584242b.png
[SouthEast 2]: /images/20220611/7988771bfed94733a22d3dfa2fe2695c.png
[SouthEast 3]: /images/20220611/0e9d7a4617be46d6b5c8f51afc22eb95.png
[SouthEast 4]: /images/20220611/8d0e0d69d7f14f5386164c940b9f06e6.png
[SouthEast 5]: /images/20220611/6448e46eae2c49158829460af90acfd7.png
[SouthEast 6]: /images/20220611/885d34bb32db4de4b77af4daec78b79c.png
[SouthEast 7]: /images/20220611/1ced8289efa64ff689d04e103f7ce1e9.png
[SouthEast 8]: /images/20220611/317040217dbc47f5a6c6aa5344fd98e7.png
[SouthEast 9]: /images/20220611/d672479846974d9d98119334ce608adc.png
[SouthEast 10]: /images/20220611/079371572aa44779a363fb9319d31ac2.png
[SouthEast 11]: /images/20220611/e25f387bf8ca45a9a4761db7a2b42aaf.png
[SouthEast 12]: /images/20220611/72857271b8d04d02a1fcb59fa1add759.png
[SouthEast 13]: /images/20220611/5fef10903fa94f9ba1e8a02216142297.png
[SouthEast 14]: /images/20220611/742a7f2b56ee454ebc5541ccf769059b.png
[SouthEast 15]: /images/20220611/42732267f3324763a0a2b7a9d54eb25a.png