1.6 調試jQuery程序

大部分復雜的工具都帶有調試功能，如Dreamweaver、Visual Studio和Eclipse。如果我們用這些工具開發jQuery代碼，調試起來難度不是很大，但很多人習慣用文本工具直接寫代碼，這就增加了調試的難度。目前，Chrome和Firefox瀏覽器都支持在瀏覽器中直接調試和修訂。下面我們以Firefox為例學習如何調試。

Firefox瀏覽器專門提供了一個名為Firebug的插件進行jQuery庫的程序調試。打開Firefox瀏覽器，單擊菜單欄中的“主菜單”|“開發者”|“查看器”，或者使用快捷鍵F12都可以打開調試工具，如圖1.4所示。

為了演示調試工具，通過瀏覽器打開jquery01.html。在該瀏覽器上按快捷鍵F12可以打開腳本調試界面，如圖1.5所示。

在打開的工具中有一行菜單欄，包括“查看器”“調試器”“控制臺”等。單擊“調試器”菜單可以打開調試界面，如圖1.6所示。

啟動jQuery代碼調試后，在代碼區域的窗口中單擊第10行代碼的行號10，即可在該行添加一個“斷點”，如圖1.7所示。如果行號前面有一個藍色的箭頭狀圖標，就說明斷點添加成功。

單擊頁面中的div，在“監視”窗口可以很方便地獲取當前狀態的一些變量或對象屬性的信息，如圖1.8所示。

單擊代碼窗口工具欄中的“跳過”按鈕或按快捷鍵F10，繼續執行程序，頁面會彈出如圖1.9所示的對話框。

從上面的執行結果可以發現，Firebug插件更方便開發人員調試jQuery代碼。