JavaScript 調(diào)試

2022-05-18 14:44 更新

在編寫 JavaScript 時(shí),如果沒(méi)有調(diào)試工具將是一件很痛苦的事情。


JavaScript 調(diào)試

沒(méi)有調(diào)試工具是很難去編寫 JavaScript 程序的。

你的代碼可能包含語(yǔ)法錯(cuò)誤,邏輯錯(cuò)誤,如果沒(méi)有調(diào)試工具,這些錯(cuò)誤比較難于發(fā)現(xiàn)。

通常,如果 JavaScript 出現(xiàn)錯(cuò)誤,是不會(huì)有提示信息,這樣你就無(wú)法找到代碼錯(cuò)誤的位置。

Note 通常,你在編寫一個(gè)新的 JavaScript 代碼過(guò)程中都會(huì)發(fā)生錯(cuò)誤。

JavaScript 調(diào)試工具

在程序代碼中尋找錯(cuò)誤叫做代碼調(diào)試。

調(diào)試很難,但幸運(yùn)的是,很多瀏覽器都內(nèi)置了調(diào)試工具。

內(nèi)置的調(diào)試工具可以開始或關(guān)閉,嚴(yán)重的錯(cuò)誤信息會(huì)發(fā)送給用戶。

有了調(diào)試工具,我們就可以設(shè)置斷點(diǎn) (代碼停止執(zhí)行的位置), 且可以在代碼執(zhí)行時(shí)檢測(cè)變量。

瀏覽器啟用調(diào)試工具一般是按下 F12 鍵,并在調(diào)試菜單中選擇 "Console" 。


console.log() 方法

如果瀏覽器支持調(diào)試,你可以使用 console.log() 方法在調(diào)試窗口上打印 JavaScript 值:

實(shí)例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

嘗試一下 ?


設(shè)置斷點(diǎn)

在調(diào)試窗口中,你可以設(shè)置 JavaScript 代碼的斷點(diǎn)。

在每個(gè)斷點(diǎn)上,都會(huì)停止執(zhí)行 JavaScript 代碼,以便于我們檢查 JavaScript 變量的值。

在檢查完畢后,可以重新執(zhí)行代碼(如播放按鈕)。


debugger 關(guān)鍵字

debugger 關(guān)鍵字用于停止執(zhí)行 JavaScript,并調(diào)用調(diào)試函數(shù)。

這個(gè)關(guān)鍵字與在調(diào)試工具中設(shè)置斷點(diǎn)的效果是一樣的。

如果沒(méi)有調(diào)試可用,debugger 語(yǔ)句將無(wú)法工作。

開啟 debugger ,代碼在第三行前停止執(zhí)行。

實(shí)例

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

嘗試一下 ?


主要瀏覽器的調(diào)試工具

通常,瀏覽器啟用調(diào)試工具一般是按下 F12 鍵,并在調(diào)試菜單中選擇 "Console" 。

各瀏覽器的步驟如下:

Chrome 瀏覽器

  • 打開瀏覽器。
  • 在菜單中選擇工具。
  • 在工具中選擇開發(fā)者工具。
  • 最后,選擇 Console。

Firefox 瀏覽器

  • 打開瀏覽器。
  • 訪問(wèn)頁(yè)面:
    http://www.getfirebug.com。
  • 按照說(shuō)明 :
    安裝 Firebug。

Internet Explorer 瀏覽器。

  • 打開瀏覽器。
  • 在菜單中選擇工具。
  • 在工具中選擇開發(fā)者工具。
  • 最后,選擇 Console。

Opera

  • 打開瀏覽器。
  • Opera 的內(nèi)置調(diào)試工具為 Dragonfly,詳細(xì)說(shuō)明可訪問(wèn)頁(yè)面:
    http://www.opera.com/dragonfly/。

Safari

  • 打開瀏覽器。
  • 訪問(wèn)頁(yè)面:
    http://extentions.apple.com。
  • 按說(shuō)明操作:
    install Firebug Lite。

擴(kuò)展閱讀

Firebug教程:使用Firebug調(diào)試JavaScript


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)