前端錯誤處理與調試

錯誤處理

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改變數據