JavaScript错误处理

2022-03-24 23:19:59

我们在编写js过程中，难免会遇到一些代码错误问题需要找出来;有时怕因为js问题导致用户体验差，这里给出一些常见错误及解决方法

错误分类

语法错误

也称为解析错误，发生在传统编程语言编译时，在JavaScript中发生在解释时，这些错误是由代码中的意外字符直接引起的，然后就不能直接编译/解释

eg:在一行代码因缺少右括号，产生了语法错误

发生语法错误时，就不能继续执行代码;在JavaScript中，只有在同一个线程中的代码会受语法错误的影响;在其他线程中的代码和其他外部引用的文件中的代码，如果不依赖于包含错误的代码，则可以继续执行

运行时错误

也称为异常（exception，在编译期/解释器后）;此时，问题并不出在代码的语法上，而是尝试完成的一个操作，在某些情况下是非法的

eg:window.openMyFile();

因不存在openMyFile()方法，浏览器会返回一个异常;异常只影响发生的线程，其他JavaScript线程即可继续正常的执行

另外ECMA-262定义了7种错误类型：

1.Error 错误

2.EvalError 全局错误

3.RangeError 引用错误

4.ReferenceError 参数错误

5.SyntaxError 语法错误

6.TypeError 类型错误

7.URIError 编码错误

其中Error是基类型，其他类型继承自它。Error类型很少见，一般由浏览器抛出。EvalError类型表示全局函数eval()的使用方式与定义不同时抛出，但实际上并不能产生这个错误，所以实际上碰到的可能性不大。在使用encodeURI()和decodeURI()时，如果URI格式不正确时，会导致URIError错误。但因为URI的兼容性非常强，导致这种错误几乎见不到

处理错误

浏览器自身具有报错的功能。以IE为例，出错时会弹出错误调试框。但这需要开启脚本调试，设置方法为：工具->Internet Options选项->高级->禁用脚本调试，取消勾选即可。其它浏览器大同小异

onerror事件处理函数

它是第一个用来协助JavaScript处理错误的机制;页面上出现异常时，error事件便在window对象上触发

<script type="text/javascript">
    window.onerror = function() {
        alert("发生错误！");
    }
</script>
<body onload="fuction1()"></body>

在上述代码中，在页面载入时尝试调用不存在的函数，此时会引发一个异常，弹出“发生错误”的错误信息;但浏览器的错误信息也显示出来了，如何在浏览器上隐藏它呢，只需onerror方法返回一个true即可

window.onerror = function() {
    alert(“发生错误！”);
    return true;
}

取出错误信息

onerror处理函数提供了三种信息来确定错误确切的性质：

1.错误信息——对于给定错误，浏览器会显示同样的信息；

2.URL——在哪个文件中发生了错误；行号——给定URL中发生错误的行号

window.onerror = function(sMessage, sUrl, sLine) {
    alert("发生错误！\n" + sMessage + "\nURL:" + sUrl + "\nLine Number:" + sLine);
    return true;
}

图像载入错误

window对象并非唯一支持onerror事件处理函数的对象，它对图像对象也提供支持;当一个图像由于文件不存在等原因未能成功载入时，error事件便在这个图像上触发

<img src=”amigo.jpg” onerror=”alert(‘载入图片时发生错误')”/>

上例直接在HTML中分配onerror事件处理函数。当然也可以通过脚本来分配事件处理函数，在设置图像的src特性前，必须等待页面完全载入

<script type="text/javascript">
    function handleLoad() {
        document.images[0].onerror = function() {
            alert("载入图片时发生错误！");
        };
        document.images[0].src = "amigo.jpg";
    }
</script>
<img/>

注意：与window对象的onerror事件处理函数不同，image的onerror事件可接收任何的额外信息的参数

处理语法错误

onerror还能处理语法错误。但有一点必须注意，事件处理函数必须是页面中第一个出现的代码，因为如果语法错误出现在设置事件处理函数之前出现，事件处理函数就没有用了

注意：语法错误会完全停止代码的执行

说明：使用onerror事件处理函数的主要的问题是，它是BOM的一部分，所以，没有任何标准能控制它的行为。因此，不同的浏览器使用这个事件处理错误的方式有明显的不同

eg：在IE中发生error事件时，正常的代码会继续执行，所有的变量和数据都保留下来，并可通过onerror事件处理函数访问。在Mozilla中，正常的代码执行都会结束，同时所有的错误发生之前的变量和数据都被销毁

try…catch语句

try 语句测试代码块的错误

catch 语句处理错误

throw 语句创建自定义错误

ECMPScript第三版，引入了try…catch语句

try {                                           //尝试着执行 try 包含的代码  
     window.abcdefg();                          //不存在的方法  
} catch (e) {                                   //如果有错误，执行 catch，e 是异常对象  
     alert('发生错误啦，错误信息为：' + e);    //直接打印调用 toString()方法  
}

ECMAScript标准在try…catch语句中只能有一个catch语句，因为JavaScript是弱类型的语言，没办法指明catch子句中异常的特定类型。不管错误是什么类型，都由同一个catch语句处理。一般不建议使用try-catch，因为它比一般语句消耗资源更多，负担更大。所以在万不得已，无法修改代码，不能通过普通判断的情况下才去使用try-catch

finally子句

try {  
     window.abcdefg();  
} catch (e) {  
     alert('发生错误啦，错误信息为：' + e.stack);  
} finally {                                            //总是会被执行  
     alert('我都会执行！');  
}

finally用于包含无论是否有异常发生都要执行的代码，这对关闭打开的链接和释放资源很有用，一般是为了防止出现异常后，无法往下再执行的备用

嵌套try…catch语句

用来处理catch子句中的错误问题

try {
    eval("a ++ b");
} catch(oException) {
    alert("发生错误！");
    try {
      var aError = new Array(1000000000000000000000000000000000000000);
} catch(exception) {
      alert("在catch子句中发生错误!");
}
} finally{
       alert("已完成")
}

抛出异常的throw语句

使用catch来处理错误信息，如果处理不了，我们就把它抛出丢掉；把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息

在ECMAScript第三版引入，用于有目的的抛出异常，抛出的错误对象可为字符串、数字、布尔值或实际的对象，也可以抛出Error对象（其构造函数只有一个，即错误信息）。eg1: throw new Error(“错误产生！”);

function addTwoNumber(a, b) {
    if (arguments.length < 2) {
        throw new Error("需要传入两个数字!");
    }
}
try {
    result = addTwoNumber(90);
} catch(oException) {
    if (oException instanceof SyntaxError) {
        alert("SyntaxError：" + oException.message);
    } else if (oException instanceof Error){
        alert(oException.message);
    }
}

Error对象

发生错误时，JavaScript有个Error基类用于抛出。它有两个特性：

1.name——表示错误类型的字符串

2.message——实际的错误信息

Error对象的name对应于它的类，可以是如下值之一：

EvalError：错误发生在eval()函数中；

RangeError：数字值超出JavaScript可表示的范围；

ReferenceError：使用了非法的引用；

SyntaxError：在eval()函数调用中发生了语法错误，其他的愈发错误由浏览器报告，无法通过try…catch处理

TypeError：变量的类型不是预期所需的；

URIError：在encodeURI或decodeURI函数发生了错误

判断错误类型

可采取如下两种方法来判断错误类型，第一种根据异常的name属性判断

try {
    eval("a ++ b");
} catch(oException) {
    if (oException.name = "SyntaxError") {
    alert("发生SyntaxError!");
} else {
    alert("发生其他错误!");
}
}

第二种采用instanceof操作符

try {
    eval("a ++ b");
} catch(oException) {
    if (oException instanceof SyntaxError) {
        alert("发生SyntaxError!");
    } else {
        alert("发生其他错误!");
    }
}

调试错误：

在JavaScript初期，浏览器并没有针对JavaScript提供调试工具，所以开发人员就想出了一套自己的调试方法，比如alert()。但使用alert()来调试错误比较麻烦，需要重复剪切和粘贴，如果遗忘掉没有删掉用于调试的alert()将特别头疼，现在我们有更好的调试方法

将消息记录到控制台

console.error('错误！');    //红色带叉  
console.info('信息！');     //白色带信息号  
console.log('日志！');     //白色  
console.warn('警告！');    //黄色带感叹号

var num1 = 1;  
console.log(typeof num1);    //得到 num1 的类型  
var num2 = 'b';  
console.log(typeof num2);   //得到 num2 的类型  
var result = num1 + num2;  
alert(result);              //结果是 1b，匪夷所思

与alert()比较：因为alert()会阻断后面代码的执行，看过之后还要删，删完估计一会儿又忘了。如果用了congsole.log的话，所有要调试的变量一目了然，也不需要删除，放着也没事

调试工具

浏览器都自带了自己的调试工具，而开发人员只习惯了Firefox一种，所以很多情况下，在Firefox开发调试，然后去其他浏览器做兼容。其实Firebug工具提供了一种Web版的调试工具：Firebug lite

调试步骤

1、设置断点

2、单步调试：五个按钮

重新运行：重新单步调试

断继：正常执行代码

单步进入：一步一步执行流程

单步跳过：跳到下一个函数块

单步退出：跳出执行到内部的函数

3、监控

4、控制台

码农公寓