javascript錯誤處理與調試（轉）

JavaScript 在錯誤處理調試上一直是它的軟肋，若是腳本出錯，給出的提示常常也讓人摸不着頭腦。

ECMAScript 第 3 版爲了解決這個問題引入了 try...catch 和 throw 語句以及一些錯誤類型，讓開發人員更加適時的處理錯誤。

一．瀏覽器錯誤報告

隨着瀏覽器的不斷升級，JavaScript 代碼的調試能力也逐漸變強。IE、Firefox、Safari、Chrome 和 Opera 等瀏覽器，都具有報告 JavaScript錯誤的機制。只不過，瀏覽器通常面向的是普通用戶，默認狀況下會隱藏此類信息。

IE：在默認狀況下，左下角會出現錯誤報告，雙擊這個圖標，能夠看到錯誤消息對話框。若是開啓禁止腳本調試，那麼出錯的時候，會彈出錯誤調試框。設置方法爲：工具->InternetOptions 選項->高級->禁用腳本調試，取消勾選便可。

Firefox：在默認狀況下，錯誤不會經過瀏覽器給出提示。但在後臺的錯誤控制檯能夠查看。查看方法爲：工具->[Web 開發者]->Web 控制檯|錯誤控制檯。除了瀏覽器自帶的，開發人員爲 Firefox 提供了一個強大的插件：Firebug。它不但能夠提示錯誤，還能夠調試 JavaScript和 CSS、DOM、網絡連接錯誤等。

Safari：在默認狀況下，錯誤不會經過瀏覽器給出提示。因此，咱們須要開啓它。查看方法爲：顯示菜單欄->編輯->偏好設置->高級->在菜單欄中顯示開發->顯示 Web 檢查器|顯示錯誤控制器。

Opera：在默認狀況下，錯誤會被隱藏起來。打開錯誤記錄的方式爲：顯示菜單欄->查看->開發者工具->錯誤控制檯。

Chrome：在默認狀況下，錯誤會被隱藏起來。打開錯誤記錄的方法爲：工具->JavaScript控制檯。

二．錯誤處理

良好的錯誤處理機制能夠及時的提醒用戶，知道發生了什麼事，而不會惶恐不安。爲此，做爲開發人員，咱們必須理解在處理 JavaScript錯誤的時候，都有哪些手段和工具能夠利用。

try-catch 語句

ECMA262 第 3 版引入了 try-catch 語句，做爲 JavaScript 中處理異常的一種標準方式。

try {//嘗試着執行 try 包含的代碼
　　window.abcdefg();//不存在的方法
} catch (e) {//若是有錯誤，執行 catch，e 是異常對象
　　alert('發生錯誤啦，錯誤信息爲：' + e);//直接打印調用 toString()方法
}

在 e 對象中，ECMA-262 還規定了兩個屬性：message 和 name，分別打印出信息和名稱。

alert('錯誤名稱：' + e.name);
alert('錯誤名稱：' + e.message);

PS：Opera9 以前的版本不支持這個屬性。而且 IE 提供了和 message 徹底相同的description 屬性、還添加了 number 屬性提示內部錯誤數量。Firefox 提供了 fileName(文件名)、lineNumber(錯誤行號)和 stack(棧跟蹤信息)。Safari 添加了 line(行號)、sourceId(內部錯誤代碼)和 sourceURL(內部錯誤 URL)。因此，要跨瀏覽器使用，那麼最好只使用通用的 message。

finally 子句

finally 語句做爲 try-catch 的可選語句，不論是否發生異常處理，都會執行。而且無論 try或是 catch 裏包含 return 語句，也不會阻止 finally 執行。

try {
　　window.abcdefg();
} catch (e) {
　　alert('發生錯誤啦，錯誤信息爲：' + e.stack);
} finally {//老是會被執行
　　alert('我都會執行！');
}

PS：finally 的做用通常是爲了防止出現異常後，沒法往下再執行的備用。也就是說，若是有一些清理操做，那麼出現異常後，就執行不到清理操做，那麼能夠把這些清理操做放到finally 裏便可。

錯誤類型

執行代碼時可能會發生的錯誤有不少種。每種錯誤都有對應的錯誤類型，ECMA-262定義了 7 種錯誤類型：

1.Error
2.EvalError
3.RangeError
4.ReferenceError
5.SyntaxError
6.TypeError
7.URIError

其中，Error 是基類型(其餘六種類型的父類型)，其餘類型繼承自它。Error類型不多見，通常由瀏覽器拋出的。這個基類型主要用於開發人員拋出自定義錯誤。

PS：拋出的意思，就是當前錯誤沒法處理，丟給另一我的，好比丟給一個錯誤對象。 

new Array(-5);//拋出 RangeError(範圍)

錯誤信息爲：RangeError: invalid array length（無效的數組的長度） 

PS：RangeError 錯誤通常在數值超出相應範圍時觸發 

var box = a;//拋出 ReferenceError(引用)

錯誤信息爲：ReferenceError: a is not defined（a 是沒有定義的） 

PS：ReferenceError 一般訪問不存在的變量產生這種錯誤 

a $ b;//拋出 SyntaxError(語法)

錯誤信息爲：SyntaxError: missing ; before statement（失蹤;語句以前） 

PS：SyntaxError 一般是語法錯誤致使的 

new 10;//拋出 TypeError(類型 )

錯誤信息爲：TypeError: 10 is not a constructor（10 不是一個構造函數） 

PS：TypeError 一般是類型不匹配致使的
PS：EvalError 類型表示全局函數 eval()的使用方式與定義的不一樣時拋出，但實際上並不能產生這個錯誤，因此實際上碰到的可能性不大。
PS：在使用 encodeURI()和 decodeURI()時，若是 URI 格式不正確時，會致使 URIError錯誤。但由於 URI 的兼容性很是強，致使這種錯誤幾乎見不到。

alert(encodeURI('李炎恢'));  

利用不一樣的錯誤類型，能夠更加恰當的給出錯誤信息或處理。

[task]try {
　　new 10;
} catch (e) {
　　if (e instanceof TypeError) {//若是是類型錯誤，那就執行這裏
　　　　alert('發生了類型錯誤，錯誤信息爲：' + e.message);
　　　　} else {
　　alert('發生了未知錯誤！');
　　}
}

善用 try-catch

在明明知道某個地方會產生錯誤，能夠經過修改代碼來解決的地方，是不適合用try-catch的。或者是那種不一樣瀏覽器兼容性錯誤致使錯誤的也不太適合，由於能夠經過判斷瀏覽器或者判斷這款瀏覽器是否存在此屬性和方法來解決。

try {
　　var box = document.getElementbyid('box'); //單詞大小寫錯誤，致使類型錯誤
} catch (e) {//這種狀況不必 try-catch
　　alert(e);
} 

try {
　　alert(innerWidth);//W3C 支持，IE 報錯
} catch (e) {
　　alert(document.documentElement.clientWidth); //兼容 IE
}

PS：常規錯誤和這種瀏覽器兼容錯誤，咱們都不建議使用 try-catch。由於常規錯誤能夠修改代碼便可解決，瀏覽器兼容錯誤，能夠經過普通 if 判斷便可。而且 try-catch 比通常語句消耗資源更多，負擔更大。因此，在萬不得已，沒法修改代碼，不能經過普通判斷的狀況下才去使用 try-catch，好比後面的 Ajax 技術。

拋出錯誤

使用 catch 來處理錯誤信息，若是處理不了，咱們就把它拋出丟掉。拋出錯誤，其實就是在瀏覽器顯示一個錯誤信息，只不過，錯誤信息能夠自定義，更加精確和具體。

try {
　　new 10;
} catch (e) {
　　if (e instanceof TypeError) {
　　　　throw new TypeError('實例化的類型致使錯誤！'); //直接中文解釋錯誤信息
　　} else {
　　　　throw new Error('拋出未知錯誤！');
　　}
}

PS：IE 瀏覽器只支持 Error 拋出的錯誤，其餘錯誤類型不支持。

三．錯誤事件

error 事件是當某個 DOM 對象產生錯誤的時候觸發。

addEvent(window, 'error', function () {
alert('發生錯誤啦！')
});
new 10;//寫在後面 
<img src="123.jpg" onerror="alert('圖像加載錯誤！')" />

四．錯誤處理策略

因爲 JavaScript 錯誤均可能致使網頁沒法使用，因此什麼時候搞清楚及爲何發生錯誤相當重要。這樣，咱們才能對此採起正確的應對方案。
常見的錯誤類型
由於 JavaScript 是鬆散弱類型語言，不少錯誤的產生是在運行期間的。通常來講，須要關注 3 種錯誤：

1.類型轉換錯誤；2.數據類型錯誤；3.通訊錯誤，這三種錯誤通常會在特定的模式下或者沒有對值進行充分檢查的狀況下發生。

4.1 類型轉換錯誤

在一些判斷比較的時候，好比數組比較，有相等和全等兩種：

alert(1 == '1');//true
alert(1 === '1');//false
alert(1 == true);//true
alert(1 === true);//false

PS：因爲這個特性，咱們建議在這種會類型轉換的判斷，強烈推薦使用全等，以保證判斷的正確性。

var box = 10;//能夠試試 0
if (box) {//10 自動轉換爲布爾值爲 true
　　alert(box);
}

PS：由於 0 會自動轉換爲 false，其實 0 也是數值，也是有值的，不該該認爲是 false，因此咱們要判斷 box 是否是數值再去打印。

var box = 0;
if (typeof box == 'number') {//判斷 box 是 number 類型便可
　　alert(box);
}

PS：typeof box == 'number'這裏也是用的相等，沒有用全等呀？緣由是 typeof box自己返回的就是類型的字符串，右邊也是字符串，那不必驗證類型，因此相等就夠了。數據類型錯誤

因爲 JavaScript 是弱類型語言，在使用變量和傳遞參數以前，不會對它們進行比較來確保數據類型的正確。因此，這樣開發人員必須須要靠本身去檢測。

function getQueryString(url) {//傳遞了非字符串，致使錯誤
　　var pos = url.indexOf('?');
　　return pos;
}
alert(getQueryString(1));

PS：爲了不這種錯誤的出現，咱們應該使用類型比較。

function getQueryString(url) {
　　if (typeof url == 'string') {//判斷了指定類型，就不會出錯了
　　　　var pos = url.indexOf('?');
　　　　return pos;
　　}
}
alert(getQueryString(1));

對於傳遞參數除了限制數字、字符串以外，咱們對數組也要進行限制。

function sortArray(arr) {
　　if (arr) {//只判斷布爾值遠遠不夠
　　　　alert(arr.sort());
　　}
}
var box = [3,5,1];
sortArray(box);

PS：只用 if (arr)判斷布爾值，那麼數值、字符串、對象等都會自動轉換爲 true，而這些類型調用 sort()方法好比會產生錯誤，這裏提一下：空數組會自動轉換爲 true 而非 false。

function sortArray(arr) {
　　if (typeof arr.sort == 'function') {//判斷傳遞過來 arr 是否有 sort 方法
　　　　alert(arr.sort());//就算這個繞過去了
　　　　alert(arr.reverse());//這個就又繞不過去了
　　}
}
 
var box = {//建立一個自定義對象，添加 sort 方法
　　sort : function () {}
};
sortArray(box);

PS：這斷代碼本意是判斷 arr 是否有 sort 方法，由於只有數組有 sort 方法，從而判斷 arr是數組。但忘記了，自定義對象添加了 sort 方法就能夠繞過這個判斷，且 arr 還不是數組。

function sortArray(arr) {
　　if (arr instanceof Array) {
　　　　alert(arr.sort());
　　}
}
var box = [3,5,1];
sortArray(box);

通訊錯誤

在使用 url 進行參數傳遞時，常常會傳遞一些中文名的參數或 URL地址，在後臺處理時會發生轉換亂碼或錯誤，由於不一樣的瀏覽器對傳遞的參數解釋是不一樣的，因此有必要使用編碼進行統一傳遞。

好比：?user=李炎恢&age=100

var url = '?user=' + encodeURIComponent('李炎恢') + '&age=100'; //編碼

PS：在 AJAX 章節中咱們會繼續探討通訊錯誤和編碼問題。

五．調試技術

在 JavaScript 初期，瀏覽器並無針對 JavaScript 提供調試工具，因此開發人員就想出了一套本身的調試方法，好比 alert()。這個方法能夠打印你懷疑的是否獲得相應的值，或者放在程序的某處來看看是否能執行，得知以前的代碼無誤。

//使用 instanceof 判斷是 Array 最爲合適 
var num1 = 1;
var num2 = b;//在這段先後加上 alert('')調試錯誤
var result = num1 + num2;
alert(result);

PS：使用 alert('')來調試錯誤比較麻煩，重要裁剪和粘貼 alert('')，若是遺忘掉沒有刪掉用於調試的 alert('')將特別頭疼。因此，咱們如今須要更好的調試方法。

將消息記錄到控制檯

IE八、Firefox、Opera、Chrome 和 Safari 都有 JavaScript 控制檯，能夠用來查看 JavaScript錯誤。對於 Firefox，須要安裝 Firebug，其餘瀏覽器直接使用 console 對象寫入消息便可。
console 對象的方法

PS：這裏以 Firefox 爲標準，其餘瀏覽器會稍有差別。

var num1 = 1;
console.log(typeof num1);//獲得 num1 的類型
var num2 = 'b';
console.log(typeof num2);//獲得 num2 的類型
var result = num1 + num2;
alert(result);//結果是 1b，匪夷所思

PS：咱們誤把 num2 賦值成字符串了，其實應該是數值，致使最後的結果是 1b。那麼傳統調試就必須使用 alert(typeo num1)來看看是否是數值類型，比較麻煩，由於 alert()會阻斷後面的執行，看過以後還要刪，刪完估計一下子又忘了，而後又要 alert(typeof num1)來加深印象。若是用了 console.log 的話，全部要調試的變量一目瞭然，也不須要刪除，放着也沒事。

將錯誤拋出

以前已經將結果錯誤的拋出，這裏不在贅述。

if (typeof num2 != 'number') throw new Error('變量必須是數值！');

六．調試工具
IE八、Firefox、Chrome、Opera、Safari 都自帶了本身的調試工具，而開發人員只習慣了Firefox 一種，因此不少狀況下， Firefox 開發調試，在而後去其餘瀏覽器作兼容。其實 Firebug工具提供了一種 Web 版的調試工具：Firebug lite。

如下是網頁版直接調用調試工具的代碼：直接複製到瀏覽器網址便可。

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

還有一種離線版，把 firebug-lite 下載好，載入工具便可，致使最終工具沒法運行，其餘瀏覽器運行無缺。雖然 Web 版本的 Firebug Lite 能夠跨瀏覽器使用 Firebug，但除了 Firefox原生的以外，都不支持斷點、單步調試、監視、控制檯等功能。好在，其餘瀏覽器本身的調試器都有。

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

PS：Chrome 瀏覽器必須在服務器端方可有效。測試也發現，只能簡單調試，若是遇到錯誤，系統不能自動拋出錯誤給 firebug-lite。

1.設置斷點

咱們能夠選擇 Script(腳本)，點擊要設置斷點的 JS腳本處，便可設置斷點。當咱們須要調試的時候，從斷點初開始模擬運行，發現代碼執行的流程和變化。

2.單步調試

設置完斷點後，能夠點擊單步調試，一步步看代碼執行的步驟和流程。上面有五個按鈕：

從新運行：從新單步調試
斷繼：正常執行代碼
單步進入：一步一步執行流程
單步跳過：跳到下一個函數塊
單步退出：跳出執行到內部的函數

3.監控

單擊「監控」選項卡上，能夠查看在單步進入是，全部變量值的變化。你也能夠新建監
控表達式來重點查看本身所關心的變量。

4.控制檯

顯示各類信息。以前已瞭解過。

PS：其餘瀏覽器除 IE8 以上都可實現以上的調試功能，你們能夠本身常識下。而咱們主要採用 Firebug進行調試而後兼容到其餘瀏覽器的作法以提升開發效率。

http://websqq.org/archives/1487