JavaScript 偵錯


在寫 JavaScript 時，如果沒有偵錯工具將是一件很痛苦的事情。

JavaScript 偵錯

沒有偵錯工具是很難去寫 JavaScript 程式的。

你的程式碼可能包含文法錯誤，邏輯錯誤，如果沒有偵錯工具，這些錯誤比較難於發現。

通常，如果 JavaScript 出現錯誤，是不會有提示訊息，這樣你就無法找到程式碼錯誤的位置。


Note#通常，你在寫一個新的 JavaScript 程式碼過程中都會發生錯誤。

JavaScript 偵錯工具

在程式碼中尋找錯誤稱為程式碼偵錯。

調試很難，但幸運的是，很多瀏覽器都內建了調試工具。

內建的偵錯工具可以開始或關閉，嚴重的錯誤訊息會傳送給使用者。

有了偵錯工具，我們就可以設定斷點 (程式碼停止執行的位置), 並且可以在程式碼執行時偵測變數。

瀏覽器啟用偵錯工具一般是按下 F12 鍵，並在偵錯選單中選擇 "Console" 。

console.log() 方法

如果瀏覽器支援偵錯，你可以使用console.log() 方法在偵錯視窗上列印JavaScript 值：

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

#執行實例»

#點擊"運行實例" 按鈕查看線上實例

設定斷點

在偵錯視窗中，你可以設定JavaScript 程式碼的斷點。

在每個斷點上，都會停止執行 JavaScript 程式碼，以便於我們檢查 JavaScript 變數的值。

在檢查完畢後，可以重新執行程式碼（如播放按鈕）。

debugger 關鍵字

debugger 關鍵字用於停止執行 JavaScript，並呼叫偵錯函數。

這個關鍵字與在偵錯工具中設定斷點的效果是一樣的。

如果沒有偵錯可用，debugger 語句將無法運作。

開啟 debugger ，程式碼在第三行前停止執行。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>

<body>
<p id="demo"></p>
<p>开启调试工具，在代码执行到第三行前会停止执行。</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

執行實例 »

點擊 "執行實例" 按鈕查看線上實例

主要瀏覽器的偵錯工具

通常，瀏覽器啟用偵錯工具一般是按下 F12 鍵，並在偵錯功能表中選擇 "Console" 。

各瀏覽器的步驟如下:

Chrome 瀏覽器

  • 開啟瀏覽器。

  • 在選單中選擇工具。

  • 在工具中選擇開發者工具。

  • 最後，選擇 Console。

Firefox 瀏覽器

  • 開啟瀏覽器。

  • 造訪頁面:
    http://www.getfirebug.com。

  • 依照說明 :
    安裝 Firebug。

Internet Explorer 瀏覽器。

  • 開啟瀏覽器。

  • 在選單中選擇工具。

  • 在工具中選擇開發者工具。

  • 最後，選擇 Console。

Opera

  • 開啟瀏覽器。

  • Opera 的內建偵錯工具為 Dragonfly，詳細說明可造訪頁面:
    http://www.opera.com/dragonfly/。

Safari

  • 開啟瀏覽器。

  • 右鍵點選滑鼠，選擇檢查元素。

  • 在底部彈出的視窗中選擇"控制台"。