JavaScript 偵錯
在編寫 JavaScript 時,如果沒有偵錯工具將是一件很痛苦的事情。
JavaScript 偵錯
#沒有偵錯工具是很難去寫 JavaScript 程式的。
你的程式碼可能包含文法錯誤,邏輯錯誤,如果沒有偵錯工具,這些錯誤比較難於發現。
通常,如果 JavaScript 出現錯誤,是不會有提示訊息,這樣你就無法找到程式碼錯誤的位置。
提示:通常,你在寫一個新的 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 關鍵字
<!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 瀏覽器
- #Firefox 瀏覽器
##開啟瀏覽器。造訪頁面:
http://www.getfirebug.com。
依照說明 :
安裝 Firebug。
- Internet Explorer 瀏覽器。
- 開啟瀏覽器。
- 在選單中選擇工具。
- 在工具中選擇開發者工具。
最後,選擇 Console。
- Opera
#開啟瀏覽器。
Opera 的內建偵錯工具為 Dragonfly,詳細說明可造訪頁面:
http://www.opera.com/dragonfly/。
- Safari
- #開啟瀏覽器。
- 右鍵點選滑鼠,選擇檢查元素。
在底部彈出的視窗中選擇"控制台"。