視頻課堂https://edu.csdn.net/course/play/7621

在程序開發中難免會遇到一些錯誤，在成千上萬的代碼中去尋找錯誤很明顯相當于大海撈針，為此，每種計算機編程語言都要它獨特的一套錯誤處理與調試機制。當然，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選項->高級->禁用腳本調試，取消勾選即可。其它瀏覽器大同小異。

良好的錯誤處理機制可以及時提醒用戶，知道發生了什么，而不會驚慌失措，為此，作為開發人員，必須理解在處理JavaScript錯誤的時候，都有哪些手段和工具可以利用。

try-catch語句。

例子：

[javascript]?view plain?copy

try?{???????????????????????????????????????????//嘗試著執行?try?包含的代碼??

?????window.abcdefg();??????????????????????????//不存在的方法??

}?catch?(e)?{???????????????????????????????????//如果有錯誤，執行?catch，e?是異常對象??

?????alert('發生錯誤啦，錯誤信息為：'?+?e);????//直接打印調用?toString()方法??

}??

可以通過修改代碼解決或瀏覽器兼容錯誤，不建議使用try-catch，因為它比一般語句消耗資源更多，負擔更大。所以在萬不得已，無法修改代碼，不能通過普通判斷的情況下才去使用try-catch。

finally子句

例子：

[javascript]?view plain?copy

try?{??

?????window.abcdefg();??

}?catch?(e)?{??

?????alert('發生錯誤啦，錯誤信息為：'?+?e.stack);??

}?finally?{????????????????????????????????????????????//總是會被執行??

?????alert('我都會執行！');??

}??

finally的作用一般是為了防止出現異常后，無法往下再執行的備用。

拋出錯誤

使用catch來處理錯誤信息，如果處理不了，我們就把它拋出丟掉。

例子：

[javascript]?view plain?copy

try?{??

[javascript]?view plain?copy

?????new?10;??

}?catch?(e)?{??

?????if?(e?instanceof?TypeError)?{??

????????throw?new?TypeError('實例化的類型導致錯誤！');?//直接中文解釋錯誤信息??

}?else?{??

<span?style="white-space:pre">????</span>throw?new?Error('拋出未知錯誤！');??

}??

}??

調試錯誤：

在JavaScript初期，瀏覽器并沒有針對JavaScript提供調試工具，所以開發人員就想出了一套自己的調試方法，比如alert()。但使用alert()來調試錯誤比較麻煩，需要重復剪切和粘貼，如果遺忘掉沒有刪掉用于調試的alert()將特別頭疼，現在我們有更好的調試方法。

將消息記錄到控制臺

例子：

1、

[javascript]?view plain?copy

console.error('錯誤！');????//紅色帶叉??

console.info('信息！');?????//白色帶信息號??

console.log('日志！');?????//白色??

console.warn('警告！');????//黃色帶感嘆號??

2、

[javascript]?view plain?copy

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、控制臺

小結：

? ? ? ? 錯誤處理與調試在之前VB,C++,C#,VB.NET中都有一定的學習和了解。但知識點卻很分散。在JavaScript中對其有了一個宏觀和細節上全面的把控，對其有了更深的印象。知識是要一遍遍學習的，從陌生到熟悉再到精通，是一個循序漸進的過程。錯誤處理與調試機制學習了這么久，再往后就可以靈活地將它應用于各個項目和系統。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的javascript错误处理与调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。