JavaScript 錯誤處理與調試經驗總結

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

下面總結一下JS錯誤處理與調試的方法
方法1：用alert() 和document.write()方法監視變數值。
alert()在彈出對話方塊顯示變數值的同時，會停止代碼的繼續運行，直到使用者單擊“確定”按鈕，而document.write()則在輸出值後繼續運行代碼。調試JS時可以根據具體情況來選擇這種方法。
例如下面代碼：將數組a中以1開頭的資料添加到數組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事件找到錯誤：
當頁面出現異常時，error事件會在window對象上觸發，它能夠在一定程式上告訴開發人員出現了錯誤，並協助開發人員找到錯誤所在，如下例：複製代碼代碼如下:<!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事件時調用了一個不存在的函數NonExist(),產生了錯誤，如：

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

要避免瀏覽器自己的錯誤提示很簡單，只需要要onerror事件的處理函數最後返回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;//屏蔽系統事件
}
</script>
</head>
<body onload="NonExist()" >
</body>
</html>

但這樣處理對於解決錯誤並沒有任何的協助。其實onerror還提供了3個參數來確定錯誤的性質，代碼：複製代碼代碼如下:<!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;//屏蔽系統事件
}
</script>
</head>
<body onload="NonExist()" >
</body>
</html>

在IE運行時的提示：

在Firefox啟動並執行提示

在IE瀏覽器中發生error事件時，正常的代碼會繼續執行，所有的變數和資料都儲存下來，並可以通過onerror事件處理函數訪問。而在Firefox中，正常的代碼執行都會結束，同時所有的錯誤發生之前的變數和資料都會被銷毀.
方法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語句裡面出現了括弧不匹配的錯誤，而整個代碼並沒有運行catch中的模組，而是瀏覽器彈出了錯誤提示框，如：

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

在Firefox功能表列中選擇“工具”－>“錯誤控制台”,便可以開啟它，所有瀏覽中啟動並執行錯誤，警告，訊息都會傳錯誤控制台，如下：

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

方法5：使用Firefox外掛程式FireBug

Firebug是Firefox下的一款開發類外掛程式，現屬於Firefox的五星級強力推薦外掛程式之一。它集HTML查看和編輯、Javascript控制台、網路狀況監視器於一體，是開發JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發人員帶來很大的便利。具體如何安裝使用FireBug可參考這篇文章：http://apps.hi.baidu.com/share/detail/15314208

方法6：使用Miscrosoft Script Debugger調試：

在IE功能表列中開啟“工具”－>“Internet選項“，選擇”進階“，將”禁用指令碼調試“複選框的勾去掉。

具體如何使用就不介紹了。

方法7：使用IE下的JS調試工具companion.js

一款像firefox中的firedebug工具類似的一個工具包，它的特點就是可以有好的提示錯誤，並且可以在IE瀏覽器下方出現控制台輸出.方便及時調試。

具體可參考這篇文章：http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html

還有其他JS調試工具就不一一介紹了，大家也可以介紹多幾種比較好的JS錯誤處理方法或JS調試工具。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More