前端错误处理与调试

错误处理

try-catch-finally

try catch应用场景：适用处理无法控制的错误，一般与throw抛出错误搭配 eg: 对一个陌生的调用库使用。使用时为了提高代码的可维护性，要加上注释。

错误类型 7种
Error 所有错误都继承于此
EvalError 如果不是函数调用eval函数则会报此错。eg: new eval()、eval = foo
RangeError 超出有效范围则报此错误 eg: new Array(Number.MAX_VALUE)
ReferenceError 引用错误 eg: console.log(a)
SyntaxError eg:console.log(a++b)
TypeError eg: Function.prototype.toString.call(1)
URIError 当解释不规范的URL时报错。eg:decodeURIComponent('%')

自定义错误

function myError (message) {
	this.name = 'errorName';
	this.message = message;
}

myError.prototype = new Error();
myError.prototype.constructor = myError;

throw new myError("你这里出错啦"); 

错误事件

任何没有通过try-catch 处理的错误都会触发window对象的error事件

/**
* 这个事件处理程序时避免浏览器报告错误的最后一道防线
*/
window.onerror = function (message, url, line ) {
	// 这里编写如何处理错误
	return true;  // Boolean true则拦截错误不让其再传递，false则传递
}

常见的错误类型

 1. 类型转换 
 	eg:`5 == '5'、1=='true'、if (typeOf  variable=== 'String')`
 
 2. 数据类型错误 
 	function Fn (value) {
 		if ( value ) {
 			value.sort();
 		}
 		if ( value !== undefined ) {
			....
		}
 	}
 		
 3. 通信错误
	发送给server端或者从server端获取数据

调试

断点调试

最常见的就是在代码里面使用debugger，但是有种比这个更好用的方法
打开Chrome的 source ，快捷键ctrl + o或者ctrl + p 输入目标文件名，
在文件的左侧可以随意打断点，效果跟debugger一样。
在右侧有几项辅助的功能，分别为Watch、Call Stack、Scope
Watch： 可以帮你监控执行前断点所在作用域任何表达式的结果，而且可以修改里面的数据。
**Call Stack：**调用栈，可以快速跳转到任一目标
**Scope：**当前断点作用域及所有闭包作用域以及全局作用域

console调试

在代码里面直接console.log()，这样就可以直接输出至控制台，不过跟断点调试比起来处于劣势

1. 不能控制程序执行过程
2. 只能输出最终结果，可调试性差，如果输出一个引用类型的数据则很大几率出现被篡改而不知道。
3. 不能在runtime改变数据