JavaScript 錯誤處理與調試經(jīng)驗總結

更新時間：2010年08月10日 01:01:56 作者：

在Web開發(fā)過程中，編寫JavaScript程序時或多或少會遇到各種各樣的錯誤，有語法錯誤，邏輯錯誤。如果是一小段代碼，可以通過仔細檢查來排除錯誤，但如果程序稍微復雜點，調試JS便成為一個令Web開發(fā)者很頭痛的問題。

下面總結一下JS錯誤處理與調試的方法
方法1：用alert() 和document.write()方法監(jiān)視變量值。
alert()在彈出對話框顯示變量值的同時，會停止代碼的繼續(xù)運行，直到用戶單擊“確定”按鈕，而document.write()則在輸出值后繼續(xù)運行代碼。調試JS時可以根據(jù)具體情況來選擇這種方法。
例如下面代碼：將數(shù)組a中以1開頭的數(shù)據(jù)添加到數(shù)組b中

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
<script type="text/javascript"> 
var a=["123","456","789","111"]; 
function AlertMessage() 
{ 
var b=new Array("1111"); 
for(var i=0;i<a.length;i++) 
{ 
if(a[i].indexOf("1")!=0) 
{ 
alert(a[i]); 
b.push(a[i]); 
} 
} 
} 
</script> 
</head> 
<body > 
<input type="button" value="點我" onclick="AlertMessage()"/> 
</body> 
</html> 

如果加入的值比較多，則可以使用document.writer()方法，避免反復點擊確定按鈕。
方法2：用onerror事件找到錯誤：
當頁面出現(xiàn)異常時，error事件會在window對象上觸發(fā)，它能夠在一定程序上告訴開發(fā)者出現(xiàn)了錯誤，并幫助開發(fā)者找到錯誤所在，如下例：

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
<script type="text/javascript"> 
window.onerror=function() 
{ 
alert("不好意思，出錯了!"); 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html> 

代碼運行body標記的onload事件時調用了一個不存在的函數(shù)NonExist(),產(chǎn)生了錯誤，如下圖：

同時，瀏覽器本身的代碼調試錯誤也出現(xiàn)了：

要避免瀏覽器自己的錯誤提示很簡單，只需要要onerror事件的處理函數(shù)最后返回ture便可，代碼如下：

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
<script type="text/javascript"> 
window.onerror=function() 
{ 
alert("不好意思，出錯了!"); 
return true;//屏蔽系統(tǒng)事件 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html> 

但這樣處理對于解決錯誤并沒有任何的幫助。其實onerror還提供了3個參數(shù)來確定錯誤的性質，代碼：

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
<script type="text/javascript"> 
window.onerror=function(message,url,line) 
{ 
alert("不好意思，出錯了:\n錯誤提示："+message+"\nUrl："+url+"\n行號："+line); 
return true;//屏蔽系統(tǒng)事件 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html> 

在IE運行時的提示：

在Firefox運行的提示

在IE瀏覽器中發(fā)生error事件時，正常的代碼會繼續(xù)執(zhí)行，所有的變量和數(shù)據(jù)都保存下來，并可以通過onerror事件處理函數(shù)訪問。而在Firefox中，正常的代碼執(zhí)行都會結束，同時所有的錯誤發(fā)生之前的變量和數(shù)據(jù)都會被銷毀.
方法3：用try….catch語句找到錯誤

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
<script type="text/javascript"> 
try 
{ 
alert("這個是try...catch的例子"); 
alert(hello); 
} 
catch(exception) 
{ 
var error=""; 
for(var i in exception) 
{ 
error+=i+"："+exception[i]+"\n"; 
} 
alert(error); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 

IE運行時的提示：

Firefox運行時的提示：

通過try…..catch可以很輕松的找到錯誤的問題，不過可惜的是該語句并不能很好地處理語句錯誤。如下例：

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>無標題頁</title> 
<script type="text/javascript"> 
try 
{ 
alert("這個是try...catch的例子")); 
} 
catch(exception) 
{ 
var error=""; 
for(var i in exception) 
{ 
error+=i+"："+exception[i]+"\n"; 
} 
alert(error); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 

try語句里面出現(xiàn)了括號不匹配的錯誤，而整個代碼并沒有運行catch中的模塊，而是瀏覽器彈出了錯誤提示框，如下圖：

方法4：使用Firefox錯誤控制臺調試：

在Firefox菜單欄中選擇“工具”－>“錯誤控制臺”,便可以打開它，所有瀏覽中運行的錯誤，警告，消息都會傳錯誤控制臺，如下：

Firefox提示的錯誤信息要比IE全面而且準確的多。

方法5：使用Firefox插件FireBug

Firebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制臺、網(wǎng)絡狀況監(jiān)視器于一體，是開發(fā)JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內(nèi)部的細節(jié)層面，給Web開發(fā)者帶來很大的便利。具體如何安裝使用FireBug可參考這篇文章：http://apps.hi.baidu.com/share/detail/15314208