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.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：拋出的意思，就是當前錯誤無法處理，丟給另外一個人，比如丟給一個錯誤對象。
錯誤信息為：RangeError: invalid array length（無效的數組的長度）
PS：RangeError 錯誤一般在數值超出相應范圍時觸發
錯誤信息為：ReferenceError: a is not defined（a 是沒有定義的）
PS：ReferenceError 通常訪問不存在的變量產生這種錯誤
錯誤信息為：SyntaxError: missing ; before statement（失蹤;語句之前）
PS：SyntaxError 通常是語法錯誤導致的
錯誤信息為：TypeError: 10 is not a constructor（10 不是一個構造函數）
PS：TypeError 通常是類型不匹配導致的
PS：EvalError 類型表示全局函數 eval()的使用方式與定義的不同時拋出，但實際上並不能產生這個錯誤，所以實際上碰到的可能性不大。
PS：在使用 encodeURI()和 decodeURI()時，如果 URI 格式不正確時，會導致 URIError錯誤。但因為 URI 的兼容性非常強，導致這種錯誤幾乎見不到。
利用不同的錯誤類型，可以更加恰當的給出錯誤信息或處理。
[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');//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
PS：在 AJAX 章節中我們會繼續探討通信錯誤和編碼問題。
五．調試技術
在 JavaScript 初期，瀏覽器並沒有針對 JavaScript 提供調試工具，所以開發人員就想出了一套自己的調試方法，比如 alert()。這個方法可以打印你懷疑的是否得到相應的值，或者放在程序的某處來看看是否能執行，得知之前的代碼無誤。
//使用 instanceof 判斷是 Array 最為合適 var num1 = 1; var num2 = b;//在這段前后加上 alert('')調試錯誤 var result = num1 + num2; alert(result);
PS：使用 alert('')來調試錯誤比較麻煩，重要裁剪和粘貼 alert('')，如果遺忘掉沒有刪掉用於調試的 alert('')將特別頭疼。所以，我們現在需要更好的調試方法。
將消息記錄到控制台
IE8、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 的話，所有要調試的變量一目了然，也不需要刪除，放着也沒事。
將錯誤拋出
之前已經將結果錯誤的拋出，這里不在贅述。
六．調試工具
IE8、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原生的之外，都不支持斷點、單步調試、監視、控制台等功能。好在，其他瀏覽器自己的調試器都有。
PS：Chrome 瀏覽器必須在服務器端方可有效。測試也發現，只能簡單調試，如果遇到錯誤，系統不能自動拋出錯誤給 firebug-lite。
1.設置斷點
我們可以選擇 Script(腳本)，點擊要設置斷點的 JS腳本處，即可設置斷點。當我們需要調試的時候，從斷點初開始模擬運行，發現代碼執行的流程和變化。
2.單步調試
設置完斷點后，可以點擊單步調試，一步步看代碼執行的步驟和流程。上面有五個按鈕：
重新運行：重新單步調試
斷繼：正常執行代碼
單步進入：一步一步執行流程
單步跳過：跳到下一個函數塊
單步退出：跳出執行到內部的函數
3.監控
單擊“監控”選項卡上，可以查看在單步進入是，所有變量值的變化。你也可以新建監
控表達式來重點查看自己所關心的變量。
4.控制台
顯示各種信息。之前已了解過。
PS：其他瀏覽器除 IE8 以上均可實現以上的調試功能，大家可以自己常識下。而我們主要采用 Firebug進行調試然后兼容到其他瀏覽器的做法以提高開發效率。
http://websqq.org/archives/1487