快捷導(dǎo)航

JavaScript 錯(cuò)誤處理與調(diào)試經(jīng)驗(yàn)總結(jié)

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

在Web開(kāi)發(fā)過(guò)程中，編寫(xiě)JavaScript程序時(shí)或多或少會(huì)遇到各種各樣的錯(cuò)誤，有語(yǔ)法錯(cuò)誤，邏輯錯(cuò)誤。如果是一小段代碼，可以通過(guò)仔細(xì)檢查來(lái)排除錯(cuò)誤，但如果程序稍微復(fù)雜點(diǎn)，調(diào)試JS便成為一個(gè)令Web開(kāi)發(fā)者很頭痛的問(wèn)題。

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

復(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>無(wú)標(biāo)題頁(yè)</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="點(diǎn)我" onclick="AlertMessage()"/> 
</body> 
</html> 

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

復(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>無(wú)標(biāo)題頁(yè)</title> 
<script type="text/javascript"> 
window.onerror=function() 
{ 
alert("不好意思，出錯(cuò)了!"); 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html> 

代碼運(yùn)行body標(biāo)記的onload事件時(shí)調(diào)用了一個(gè)不存在的函數(shù)NonExist(),產(chǎn)生了錯(cuò)誤，如下圖：

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

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

復(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>無(wú)標(biāo)題頁(yè)</title> 
<script type="text/javascript"> 
window.onerror=function() 
{ 
alert("不好意思，出錯(cuò)了!"); 
return true;//屏蔽系統(tǒng)事件 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html> 

但這樣處理對(duì)于解決錯(cuò)誤并沒(méi)有任何的幫助。其實(shí)onerror還提供了3個(gè)參數(shù)來(lái)確定錯(cuò)誤的性質(zhì)，代碼：

復(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>無(wú)標(biāo)題頁(yè)</title> 
<script type="text/javascript"> 
window.onerror=function(message,url,line) 
{ 
alert("不好意思，出錯(cuò)了:\n錯(cuò)誤提示："+message+"\nUrl："+url+"\n行號(hào)："+line); 
return true;//屏蔽系統(tǒng)事件 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html> 

在IE運(yùn)行時(shí)的提示：

在Firefox運(yùn)行的提示

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

復(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>無(wú)標(biāo)題頁(yè)</title> 
<script type="text/javascript"> 
try 
{ 
alert("這個(gè)是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運(yùn)行時(shí)的提示：

Firefox運(yùn)行時(shí)的提示：

通過(guò)try…..catch可以很輕松的找到錯(cuò)誤的問(wèn)題，不過(guò)可惜的是該語(yǔ)句并不能很好地處理語(yǔ)句錯(cuò)誤。如下例：

復(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>無(wú)標(biāo)題頁(yè)</title> 
<script type="text/javascript"> 
try 
{ 
alert("這個(gè)是try...catch的例子")); 
} 
catch(exception) 
{ 
var error=""; 
for(var i in exception) 
{ 
error+=i+"："+exception[i]+"\n"; 
} 
alert(error); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 

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

方法4：使用Firefox錯(cuò)誤控制臺(tái)調(diào)試：

在Firefox菜單欄中選擇“工具”－>“錯(cuò)誤控制臺(tái)”,便可以打開(kāi)它，所有瀏覽中運(yùn)行的錯(cuò)誤，警告，消息都會(huì)傳錯(cuò)誤控制臺(tái)，如下：

Firefox提示的錯(cuò)誤信息要比IE全面而且準(zhǔn)確的多。

方法5：使用Firefox插件FireBug

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