第 十八 篇 错误处理 与 调试

by caix in 深圳

常见的错误类型

错误类型

Error：基类型，其他错误类型都继承自该类型

EvalError：使用 eval() 函数发生异常时被抛出

RangeError：在数值超出相应范围时触发

ReferenceError：在找不到对象的时候发生该错误(object expected)，通常在访问不到变量的时候发生这种错误

SyntaxError：语法错误，当语法错误的 js 字符串传入 eval() 函数时会触发该错误

TypeError：在变量中保存着意外的类型时，或者在访问不存在的方法时，会导致这种错误

URIError：在使用 encodeURI() 或 decodeURI() ，而 URI 格式不正确时，就会导致该错误

确定错误类型的方法

可以在 try-catch 语句的 catch 语句中使用 instanceof 操作符确定错误的类型

new eval();//抛出 evalError
eval = foo;//抛出 evalError

var a = new Array(-20);//抛出 RangeError
var b = new Array(Number.MAX_VALUE);//抛出 RangeError

var obj = x;//在 x 未声明的情况下抛出 ReferenceError

eval("a ++ b");//抛出 SyntaxError

var o = new 10;//抛出 TypeError
alert("name" in true);//抛出 TypeError
Function.prototype.toString.call("name");//抛出 TypeError

try{
    doSomething();
}catch(error){
    if(error instanceof TypeError){
        //处理类型错误
    }else if(error instanceof ReferenceError){
        //处理引用错误
    }else{
        //处理其他类型错误
    }
}

错误处理

1、try...catch

try 块中出错，catch 块中获取错误信息

try {
    console.log(a)
} catch (e) {
    console.log(e)
    console.log(e.name)
    console.log(e.message)
}

2、finally

finally 包含一定要执行的语句

try {
    console.log(a)
} catch (e) {
    console.log(e)
} finally {
    console.log('over')
}

3、throw

抛出一个可以捕获的错误，可指定错误信息和错误类型

throw new Error('一个错误被抛出')

throw '一个错误被抛出'

try {
    throw '一个错误被抛出' 可自定义
} catch (e) {
    console.log(e)  // 接到 throw 捕获的错误
} finally {
    console.log('over')
}

throw 操作符用于随时抛出自定义错误，在遇到 throw 操作符时，代码会立即停止执行，仅当有 try-catch 语句捕获到被抛出的值时，代码才会继续执行

4 try...catch 与 finally 注意点

try...finally 组合使用时，如果 finally 中设置了返回值，此返回值会覆盖 try 中的返回值，没有设置的话就不会覆盖

如果 finally 中抛出异常(无论是有意还是无意)，函数就会在此处终止。如果此前 try 中 已经有 return 设置了返回值，则该值会被丢弃

ES5 严格模式

1、ES3.0 存在以下问题

语法严谨和合理性
语法怪异行为
安全性效率

2、ES 3.0 基础上推出严格模式，IE9 及以下不支持严格模式

3、使用严格模式 （可以全局使用严格模式，也可以在单独作用域中使用）

<script type="text/javascript">
    'use strict'

    function test() {
        'use strict'
    }

    var test = (function () {
        'use strict'
    })()
</script>

4、严格模式不能使用 with 方法，语法错误 with 方法用于改变作用域

var obj = {
    a : 1
}

function test() {
    var a = 2
    with (obj) {
      console.log(a)
    }
}
test()

5、严格模式下不能使用 arguments 的callee 和 caller 属性，类型错误

6、严格模式下，不允许不声明直接赋值

   严格模式下报引用错误
   
   a = 1 
   var b = c = 2
   
7、严格模式下函数内部 this 为 undefined

function test() {
    console.log(this)
}
test() // undefined
var t = new test() // {}
test.call(1) // 1

8、严格模式下不允许函数参数重复，报语法错误

9、严格模式拒绝使用重复的对象属性名，但不报错

10、严格模式下 eval 函数问题

eval('var a = 1')
console.log(a) 

 非严格模式下，a 挂在 window 上，打印出 1，
 严格模式下，eval 有自己的作用域，在 window 下打印 a 报引用错误

错误事件

任何没有通过 try-catch 处理的错误都会触发 window 对象的 error 事件。onerror 事件处理程序都不会创建 event 对象，但是可以接收三个参数：错误消息、错误所在的 URL 和行号。可以通过在事件处理程序中返回false，阻止浏览器报告错误的默认行为

window.onerror = function(message, url, line){ 
  	alert(message); 
  	return false; 
}; 

调试技术

https://juejin.cn/post/6844903765489745934

console

   1、console.log(...)
   
   查看console.log(...)打印出的日志应该是目前大多数前端惯用的调试方法。但是这种方式对于缕清程序运行的步骤和过程来说是比较困难的,比如，我要查看一个函数被调用的位置，这就比较难找出
   
   2、console.trace(...)
   
   这个console.trace()的概述是：向Web控制台输出一个堆栈跟踪。意思就是打印当前执行位置到console.trace()的路径信息
   使用console.trace()可以打印出详细的调用堆栈
   
   其他 console.XXX()
   
   3、console.count()
   
   console.count('coffee'); // 复制到控制台执行一次
   
   这个方法是用来打印调用 count 的次数，可以传入一个参数来当做标识
   
   4、console.dir(object)
   
   这个方法用来打印指定对象的JSON形式
   
   5、console.dirxml(object)
   
   这个方法用来打印 node 节点的 xml形式
   
   6、console.error(object [, object, ...])
   
   这个方法用来打印一个错误的信息，并且包含堆栈轨迹（就是错误发生的路径追踪）
   
   7、console.table(array)
   
   将信息打印为一个表格，比如 数组 或 对象
   
   8、console.time() 与 console.timeEnd();
   
   用来开启一个新的定时器，知道调用 console.timeEnd，并将所消耗的时间打印出来
   
    console.time();
    for (var i = 0; i < 100000; i++) {
      let square = i ** 2;
    }
    console.timeEnd();

断点调试

如果是使用webpack打包了需要将打开map模式，否则断点断不到具体文件。

1、浏览器中断点

   我们console.log()打印的时候，后面会出现打印的具体文件位置
   
   点击之后会跳到这个文件的具体位置。之后点击我箭头所指的位置就断点了
   
   之后就可以按F5刷新断点调试了，程序运行到这个地方会被卡住，然后你就可以查看当前的环境中的一些信息
   
   查看调用栈
   
2、代码中的断点 debugger

   在代码中直接使用 debugger 关键字可以快速的实现断点
   
   效果和浏览器中的断点效果是一样的

vscode 调试

在项目根目录配置.vscode文件夹。下有个launch.json文件

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/HT/javascript/test.js"
        }
    ]
}

vue devTools

vue devTools 使用chrome内核的浏览器可以下载vue devTools拓展来调试vue单页应用，这使得vue项目调试起来非常的方面

性能调试工具 performance

使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动

在火焰图上看到的圈起来的三条虚线，分别是:

蓝线代表 DOMContentLoaded 事件
绿线代表首次绘制的时间
红线代表 load 事件