$17 错误处理与调试

1. 错误处理：

1.1 . try-catch语句

try {
        a=b;//可能产生错误的代码
    }catch (error){
        console.log(error);//发生错误时如何处理
    }

try中的代码发生错误后，会立即退出代码执行过程，然后执行catch语句内的内容。catch块会接收error对象，包含错误信息，error有message属性，保存错误消息。

A. finally子句：

try {
        a=b;
    }catch (error){
        console.log(error.message);
    }finally {
        console.log("a");
    }

finally字句是一定执行的代码，不管有没有遇到错误。

function test() {
           try {
               return 1;
           }catch (error){
               return 2;
           }finally {
               return 3;
           }
       }

注意：finally的return会覆盖try和catch内的return。

B. 错误类型

7种错误类型：
Error:
EvalError:
RangeError:超出范围报错
ReferenceError:找不到对象
SyntaxError:
TypeError:变量类型不符合要求
URIError:URI格式不正确

可以通过判断错误类型从而进行相应的处理。

try{
        a=b;
    }catch (error){
        if(error instanceof TypeError){
            console.log("类型错误")
        }
        else if(error instanceof ReferenceError){
            console.log("找不到对象")
        }
        else {
            console.log("其他错误")
        }
    }

C. 如何使用try-catch

使用try-catch发生错误，浏览器会认为错误已经处理，不会报错。对于用户不需要知道的错误是有用的。
适合场景：处理无法控制的错误，比如在调用外部的库时，会报一些不知道的错误，由于我们无法修改库，则可以使用try-catch处理。

1.2 抛出错误

throw:可以根据错误类型在浏览器中抛出自定义错误消息。浏览器会以常规方式报告这一错误。

try{
        a=b;
    }catch (error){
        if(error instanceof TypeError){
            console.log("类型错误")
        }
        else if(error instanceof ReferenceError){
            throw  new ReferenceError("找不到对象")
        }
        else {
            console.log("其他错误")
        }
    }

Paste_Image.png

捕获错误的目的：
避免浏览器以默认的方式进行处理，这样它抛出的错误消息对于我们有可能并不明确。

抛出错误的目的：
提供错误发生的具体原因。

1.3 错误事件：

没有通过try-catch处理的错误都会触发window对象的error事件。
该事件接收三个参数：错误消息、错误所在URL、行号。

window.onerror=function (message,url,line) {
        console.log(message,url,line);
    }

1.4 常见错误类型：

类型转换错误
数据类型错误
通信错误

1.5 区分致命错误与非致命错误

区分的主要依据：对用户的影响。
解决方法：try-catch解决某个模块出错产生的致命影响。

for(var i=0,len=mods.length;i<len;i++){
        try {
            mods[i].init();
        }catch(ex){
            //错误消息
        }
    }

2. 调试技术：

2.1 将消息记录到控制台

利用console对象

2.2 将消息记录到当前页面

在html页面中创建div记录console的内容

function log(message) {
        var console=document.getElementById("debuginfo");
        if(console===null){
            console=document.createElement("div");
            console.style.background="#dedede";
            console.style.border="1px solid silver";
            console.style.width="400px";
            document.body.appendChild(console);
        }
        console.innerHTML+="<p>"+message+"</p>";
    }