JavaScript 調(diào)試
在編寫 JavaScript 時,如果沒有調(diào)試工具將是一件很痛苦的事情。
JavaScript 調(diào)試
沒有調(diào)試工具是很難去編寫 JavaScript 程序的。
你的代碼可能包含語法錯誤,邏輯錯誤,如果沒有調(diào)試工具,這些錯誤比較難于發(fā)現(xiàn)。
通常,如果 JavaScript 出現(xiàn)錯誤,是不會有提示信息,這樣你就無法找到代碼錯誤的位置。
![]() | 通常,你在編寫一個新的 JavaScript 代碼過程中都會發(fā)生錯誤。 |
---|
JavaScript 調(diào)試工具
在程序代碼中尋找錯誤叫做代碼調(diào)試。
調(diào)試很難,但幸運(yùn)的是,很多瀏覽器都內(nèi)置了調(diào)試工具。
內(nèi)置的調(diào)試工具可以開始或關(guān)閉,嚴(yán)重的錯誤信息會發(fā)送給用戶。
有了調(diào)試工具,我們就可以設(shè)置斷點(diǎn) (代碼停止執(zhí)行的位置), 且可以在代碼執(zhí)行時檢測變量。
瀏覽器啟用調(diào)試工具一般是按下 F12 鍵,并在調(diào)試菜單中選擇 "Console" 。
console.log() 方法
如果瀏覽器支持調(diào)試,你可以使用 console.log() 方法在調(diào)試窗口上打印 JavaScript 值:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <h1>我的第一個 Web 頁面</h1> <p> 瀏覽器中(Chrome, IE, Firefox) 使用 F12 來啟用調(diào)試模式, 在調(diào)試窗口中點(diǎn)擊 "Console" 菜單。 </p> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
設(shè)置斷點(diǎn)
在調(diào)試窗口中,你可以設(shè)置 JavaScript 代碼的斷點(diǎn)。
在每個斷點(diǎn)上,都會停止執(zhí)行 JavaScript 代碼,以便于我們檢查 JavaScript 變量的值。
在檢查完畢后,可以重新執(zhí)行代碼(如播放按鈕)。
debugger 關(guān)鍵字
debugger 關(guān)鍵字用于停止執(zhí)行 JavaScript,并調(diào)用調(diào)試函數(shù)。
這個關(guān)鍵字與在調(diào)試工具中設(shè)置斷點(diǎn)的效果是一樣的。
如果沒有調(diào)試可用,debugger 語句將無法工作。
開啟 debugger ,代碼在第三行前停止執(zhí)行。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <head> </head> <body> <p id="demo"></p> <p>開啟調(diào)試工具,在代碼執(zhí)行到第三行前會停止執(zhí)行。</p> <script> var x = 15 * 5; debugger; document.getElementById("demo").innerHTML = x; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
主要瀏覽器的調(diào)試工具
通常,瀏覽器啟用調(diào)試工具一般是按下 F12 鍵,并在調(diào)試菜單中選擇 "Console" 。
各瀏覽器的步驟如下:
Chrome 瀏覽器
打開瀏覽器。
在菜單中選擇工具。
在工具中選擇開發(fā)者工具。
最后,選擇 Console。
Firefox 瀏覽器
打開瀏覽器。
訪問頁面:
http://www.getfirebug.com。按照說明 :
安裝 Firebug。
Internet Explorer 瀏覽器。
打開瀏覽器。
在菜單中選擇工具。
在工具中選擇開發(fā)者工具。
最后,選擇 Console。
Opera
打開瀏覽器。
Opera 的內(nèi)置調(diào)試工具為 Dragonfly,詳細(xì)說明可訪問頁面:
http://www.opera.com/dragonfly/。
Safari
打開瀏覽器。
右擊鼠標(biāo),選擇檢查元素。
在底部彈出的窗口中選擇"控制臺"。