JavaScript错误调试

Posted 2021-01-15 zhonghonglin1997

错误调试与处理 ／ 2-1 语法错误

语法错误：

　　不符合js语法的错误，控制台会告知出错的行号（但行号不一定准确）。

 

 

常见语法错误：

　　1，符号漏错多少打。

　　2，使用了不合语法的变量名。（关键字，保留字不能做变量名）。

　　3，语句写错，没写完等。

 

 

错误提示：

　　 Uncaught SyntaxError：Unexpected token xxx //未预料到xxx。

 

identifier：变量名。

 

逗号表达式将会返回最后一个表达式的结果

 错误调试与处理 ／ 2-2 运行时错误

运行时错误（Runtime Error）：

　　代码没有语法错误，而在运行的时候才发生的错误。运行时错误时一个统称。

 

常见运行时错误：

ReferenceError，变量引用异常触发。（变量未定义就开始使用）。

　　Uncaught ReferenceError（未捕获到的引用错误）：foo is not defined(...)。

 

TypeError，类型使用错误时触发。（1，获取未初始化的变量的属性或方法。2，定义了一个变量值为数字，结果把该变量当成了函数并调用）。

　　1，Uncaught TypeError：Cannot read property ‘length‘ of undefined(...)。无法读取undefined的length属性。

　　2，Uncaught TypeError：bar is not a function(...)。bar不是一个函数。

 

RangeError，不太常见，一般会在递归爆栈时触发，即递归深度太深（例如函数自身调用自身，无限不停止）。（一般浏览器最高可以递归1024层）。

　　Uncaught RangeError：Maximum call stack size exceeded(...)。最大的调用栈超出大小。

解决方式：将递归用循环来写

 

调用栈：

 

如何区分语法错误与运行时错误：

　　语法错误无论如何都不可能运行成功，

　　运行时错误时有可能运行成功的。

错误调试与处理 ／ 2-4 逻辑错误

逻辑错误：

　　计算结果不符合预期。 使用单步跟踪调试debugger，在控制台查看。

 

 

Watch：显示变量值，可自动添加，删除。

F8：恢复执行。

F10：跳过下个函数，当做一行代码执行，不想看函数内部的执行，单步执行。

F11：进入函数内部查看。

shift+F11：跳出函数内部的执行。

在控制台的代码中点击行数可设置Breakpoints断点，再点一次删除断点。

 

鼠标放在变量上，也会显示变量值，也可自己在控制台输入查看，甚至是改变值。

 

错误调试与处理 ／ 2-5 try-catch语句

主动触发错误：

　　 当发生一些不可避免的错误时，可以使用下面的语句来抛出这个错误。

throw new Error("错误描述");//抛出错误

 

 

开发中不建议使用prompt函数，用户体验不是很好。

 

try {}

catch(e) {}

无论任何时候，throw了一个错误，之后的代码不会运行，这个错误会一直往外找try（错误的冒泡），所以会出错的地方需要用try包裹，找到后接着这个错误会被catch(e)里的变量e接收，并在catch(e){这里可以提示错误。} 

 

运行时错误也可被trycatch捕获

try{}//如果里面没有错误，则不会执行catch，但是finally还是会执行

catch(e){}//try内有错误才会执行，错误对象赋值给catch括号内的变量，执行完catch再执行finally，若是在catch里return了一个值，依旧会执行finally，若在finally里也return了一个值，那么return的值会时finally里的。

finally{}//做一些清理性的工作，finally块时一定会执行的

 

浏览器会先从前往后解析代码，语法错误在解析过程中就出错了。其实语句都还没开始执行，就已经出错了。无法被trycatch捕获。

 

 

finally里一般拿来做一些善后清理工作

try块里出现错误的话，会立即跳出try块，找到匹配的错误，执行catch块里的语句

此时，可能在try块里打开的文件没关闭，连接的网络没断开，对这些浪费的内存就不能及时释放回收。

如果有finally块的话，不管有没有出错，都会执行finally块里的内容。就能实现使用finally清理了。

 

 

使用try catch，在js出现错误的时候，把异常捕获掉，这样程序仍能正常运行下去，如下：

1 2 3

console.log(i); var a = 5; console.log(++a);

因为i 未定义，出现错误，那么js就卡在这里了，后面 a 的结果不执行了。

看看使用try catch

1 2 3 4 5 6 7

try {    console.log(i);    }catch(e) {        console.log(e)     } var a = 6; console.log(++a);

那么，i 未定义的错误被捕获掉了，程序仍能继续运行下去，最后输出a的结果是6.