JavaScript 調(diào)試

調(diào)試

當(dāng)你寫程序的時(shí)候很有可能出現(xiàn)錯(cuò)誤，這在腳本中被稱為一個(gè)bug。

發(fā)現(xiàn)和修復(fù) bug 的過(guò)程叫做調(diào)試，是一個(gè)正常的開發(fā)過(guò)程的一部分。本節(jié)討論的工具和技術(shù)，可以幫助您進(jìn)行任務(wù)調(diào)試。

IE 瀏覽器里面的錯(cuò)誤信息

跟蹤錯(cuò)誤的最基本的方法是在您的瀏覽器中打開錯(cuò)誤信息。默認(rèn)情況下，當(dāng)一個(gè)錯(cuò)誤發(fā)生在頁(yè)面，Internet Explorer 在狀態(tài)欄顯示錯(cuò)誤圖標(biāo)：

雙擊這個(gè)圖標(biāo)將您帶到一個(gè)對(duì)話框，這個(gè)對(duì)話框?qū)?huì)顯示發(fā)生的特定的錯(cuò)誤信息。

因?yàn)檫@個(gè)圖標(biāo)很容易忽視，當(dāng)發(fā)生錯(cuò)誤時(shí)，Internet Explorer 提供了選項(xiàng)自動(dòng)顯示錯(cuò)誤對(duì)話框。

要啟用這個(gè)選項(xiàng)，選擇 Tools --> Internet Options --> Advanced tab。最后通過(guò)檢查顯示一個(gè)關(guān)于每一個(gè)腳本錯(cuò)誤框的通知，選項(xiàng)如下所示：

在 Mozilla 或 Firefox 里的錯(cuò)誤消息

火狐 Netscape 和 Mozilla 等瀏覽器將錯(cuò)誤消息發(fā)送到一個(gè)叫做 JavaScript 控制臺(tái)或錯(cuò)誤控制臺(tái)的特殊窗口。查看控制臺(tái)，選擇 Tools-->Error Consol or Web Development。

不幸的是，因?yàn)檫@些瀏覽器在一個(gè)錯(cuò)誤發(fā)生時(shí)，沒有給出視覺的標(biāo)示，你必須保持打開控制臺(tái)，才能看您的腳本執(zhí)行的錯(cuò)誤。

錯(cuò)誤通知

錯(cuò)誤通知，出現(xiàn)在控制臺(tái)或通過(guò) IE 瀏覽器對(duì)話框里的錯(cuò)誤是語(yǔ)法和運(yùn)行時(shí)錯(cuò)誤的結(jié)果。這些錯(cuò)誤通知會(huì)顯示錯(cuò)誤所在的行號(hào)當(dāng)錯(cuò)誤發(fā)生時(shí)。
如果您使用的是 Firefox瀏覽器，那么你可以點(diǎn)擊在錯(cuò)誤控制臺(tái)腳本中可以獲得的錯(cuò)誤從而到達(dá)有錯(cuò)誤的那一行。

如何調(diào)試腳本

有多種方法來(lái)調(diào)試 JavaScript

用一個(gè) JavaScript 驗(yàn)證器

檢查您的 JavaScript 代碼出現(xiàn)的奇怪的錯(cuò)誤的一種方法是通過(guò)程序來(lái)運(yùn)行它，檢查它以確保它是有效的。這是官方語(yǔ)言的語(yǔ)法規(guī)則。這些程序被稱為驗(yàn)證解析器，也可以簡(jiǎn)稱為驗(yàn)證器，通常是存在于商業(yè)HTML和JavaScript編輯器。

最方便的 JavaScript 驗(yàn)證器是 Douglas Crockford's JavaScript Lint，Douglas Crockford's JavaScript Lint 可以免費(fèi)在線使用。

簡(jiǎn)單地訪問這個(gè)網(wǎng)頁(yè),將 JavaScript 代碼(只有 JavaScript )粘貼到文本區(qū)域,并單擊 jslint 按鈕。這個(gè)程序?qū)⑼ㄟ^(guò)您的 JavaScript 代碼解析,確保任何變量和函數(shù)定義遵循正確的語(yǔ)法。它還將檢查 JavaScript 語(yǔ)句,比如 if 和 whil e語(yǔ)句,以確保他們也遵循正確的格式

添加調(diào)試代碼到您的程序

您可以在你的程序中使用 alert() 或 document . write() 方法去調(diào)試你的代碼。例如,你應(yīng)該這樣寫：

    var debugging = true;
    var whichImage = "widget";
    if( debugging )
       alert( "Calls swapImage() with argument: " + whichImage );
    var swapStatus = swapImage( whichImage );
    if( debugging )
       alert( "Exits swapImage() with swapStatus=" + swapStatus );

當(dāng)他們出現(xiàn)的時(shí)候，通過(guò)檢測(cè)程序內(nèi)容和alert()s的命令，你可以非常容易的確定你的程序是否有錯(cuò)誤。

使用一個(gè)JavaScript調(diào)試器

調(diào)試器是一個(gè)應(yīng)用程序，該應(yīng)用程序確保各種各樣的腳本在程序員的控制下執(zhí)行。腳本調(diào)試器通過(guò)一個(gè)界面提供細(xì)粒度的控制的狀態(tài)，允許您檢查和設(shè)置值以及控制流執(zhí)行。

一旦一個(gè)腳本被加載到一個(gè)調(diào)試器，它可以每次運(yùn)行一行或指示停止在某個(gè)斷點(diǎn)。一旦停止執(zhí)行，程序員可以檢查腳本和它的狀態(tài)變量，以確定是否有地方出了問題。你也可以觀察變量的變化值。

最新版本的 Mozilla JavaScript 調(diào)試器（代號(hào)為完 Venkman ）Mozilla 和 Netscape 瀏覽器可以下載http://www.hacksrus.com/~ginda/venkman

對(duì)開發(fā)人員有用的技巧

這里有幾個(gè)技巧，您可以使用在你的腳本中用于減少錯(cuò)誤的數(shù)量，同時(shí)使調(diào)試過(guò)程更容易一些。

• 記住要使用大量的注釋。注釋使您能夠解釋為什么你以這樣的方式書寫腳本和解釋特別困難的部分代碼。
• 總是使用縮進(jìn)，使代碼易于閱讀。縮進(jìn)語(yǔ)句也使你更容易匹配開始和結(jié)束標(biāo)記，花括號(hào)和其他 HTML 和腳本元素。
• 編寫模塊代碼。只要有可能，用函數(shù)的形式來(lái)組織你的語(yǔ)句。函數(shù)使你能夠阻止相關(guān)語(yǔ)句，并以最小的努力測(cè)試和重用的部分代碼以。
• 命名變量和函數(shù)的方法要一致。嘗試使用足夠長(zhǎng)的時(shí)間有意義的名稱，描述的內(nèi)容變量或函數(shù)的目的。
• 命名變量和函數(shù)時(shí)使用一致的語(yǔ)法。換句話說(shuō)，讓他們所有的小寫或大寫；如果你喜歡 Camel-Back 符號(hào)，一致地使用它。
• 以模塊化的方式測(cè)試長(zhǎng)腳本。換句話說(shuō)，不要試圖在編寫完成整個(gè)腳本之后再測(cè)試它的任何部分。寫一段，使它能夠工作之后，再添加代碼的下一部分。
• 使用描述性的變量和函數(shù)名稱和避免使用單個(gè)字符的名稱。
• 注意你的引號(hào)。記住，引號(hào)用于對(duì)字符串和這兩個(gè)引號(hào)必須相同的風(fēng)格(單引號(hào)或雙)。
• 主義你的等于號(hào)。你不應(yīng)該一個(gè) = 用于比較的目的。
• 聲明變量顯式地使用 var 關(guān)鍵字。