JavaScript 偵錯

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

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

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

JavaScript 偵錯工具

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

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

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

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

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

對於JavaScript程式的偵錯，相較於alert()，使用console.log()是一種更好的方式，原因在於：alert()函數會阻斷JavaScript程式的執行，從而造成副作用；而console.log()僅在控制台中打印相關信息，因此不會造成類似的顧慮

什麼是console.log()？

除了一些很老版本的瀏覽器，現今大多數瀏覽器都自帶調試功能；即使沒有調試功能，也可以透過安裝插件來進行補充。例如，舊版的Firefox沒有自備調試工具，在這種情況下可以透過安裝Firebug插件來添加調試功能。在具備偵錯功能的瀏覽器上，window物件中會註冊一個名為console的成員變量，指涉偵錯工具中的控制台。透過呼叫該console物件的log()函數，可以在控制台中列印資訊。例如，以下程式碼將在控制台中列印”Sample log”：

程式碼如下:window.console.log("Sample log");

##上述程式碼可以忽略window物件而直接簡寫為：

程式碼如下:console.log("Sample log");

console.log()可以接受任何字串、數字和JavaScript物件。與alert()函數類似，console.log()也可以接受換行符n以及製表符t。 console.log()語句所列印的偵錯資訊可以在瀏覽器的偵錯控制台中看到。不同的瀏覽器中console.log()行為可能會有所不同。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
  <script type="text/javascript">
    //变量 
    var i = 'I am a string'; 
    console.log('变量：',i); 
    //数组 
    var arr = [1,2,3,4,5]; 
    console.log('数组：',arr); 
    //对象 
    var obj1 = { 
    key1 : 'value1', 
    key2 : 'value2', 
    key3 : 'value3' 
    }; 
    var obj2 = { 
    key6 : 'value4', 
    key5 : 'value5', 
    key4 : 'value6' 
    }; 
    var obj3 = { 
    key9 : 'value7', 
    key8 : 'value8', 
    key7 : 'value9' 
    }; 
    console.log('对象：',obj1); 
    //对象数组 
    var objArr1 = [obj1,obj2,obj3]; 
    var objArr2 = [[obj1],[obj2],[obj3]]; 
    console.log('对象数组1：',objArr1); 
    console.log('对象数组1：',objArr2); 
  </script>
</head>
<body>
  <p>
  浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
  </p>
</body>
</html>

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>
<script>
var x = 5 * 5 + 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

開啟瀏覽器。右鍵點選滑鼠，選擇檢查元素。在底部彈出的視窗中選擇"控制台"。

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> //变量 var i = 'I am a string'; console.log('变量：',i); //数组 var arr = [1,2,3,4,5]; console.log('数组：',arr); //对象 var obj1 = { key1 : 'value1', key2 : 'value2', key3 : 'value3' }; var obj2 = { key6 : 'value4', key5 : 'value5', key4 : 'value6' }; var obj3 = { key9 : 'value7', key8 : 'value8', key7 : 'value9' }; console.log('对象：',obj1); //对象数组 var objArr1 = [obj1,obj2,obj3]; var objArr2 = [[obj1],[obj2],[obj3]]; console.log('对象数组1：',objArr1); console.log('对象数组1：',objArr2); </script> </head> <body> <p> 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。 </p> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear