本節書摘來自異步社群《jquery與javascript入門經典》一書中的第2章，第2.4節，作者：【美】brad dayley著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
前面介紹了如何在javascript控制台中查找javascript和其他腳本的錯誤。如果腳本并未導緻浏覽器錯誤，隻是運作方式不符合預期，該如何辦呢？firebug內建了一個優秀的調試器，可助一臂之力。
2.4.1 javascript調試器
javascript調試器讓您能夠檢視随網頁加載到浏覽器中的javascript腳本。除檢視腳本外，您還可以設定斷點、監控變量值以及檢視調用棧，就像使用其他調試器時一樣。
圖2.21顯示了firebug提供的javascript調試器的組成部分。在javascript調試器中，您可使用如下功能。
javascript視圖：顯示實際的javascript代碼。
圖2.21 firebug的javascript調試器提供了代碼、監控、棧和斷點視圖
javascript選擇清單：這個清單包含随網頁加載的javascript腳本清單，您可單擊它來選擇要檢視的javascript檔案。
在下一語句處中斷：該選項被啟用時，浏覽器将中斷調試器，執行到下一行javascript代碼行不再執行。
監控：“監控”頁籤顯示了目前執行的代碼可用的函數、變量和屬性等，如圖2.21所示。這是一個極具價值的視窗，代碼執行時通過它可知道變量和對象的值。另外，您還可以在監控清單中添加自己的表達式，為此隻需在監控清單開頭輸入它們即可。“監控”頁籤的一項卓越功能是，您可輕按兩下變量的值并修改它們，這是一種測試假設的極佳方式。
棧：“棧”頁籤提供了導緻目前執行代碼的函數調用過程，它極具價值的一個地方是，您可展開函數名來檢視傳遞給每個函數的參數值。您還可以單擊函數名，這将在javascript視圖中顯示相應的檔案，并高亮顯示相應的代碼行。
棧面包條：類似于“stack”頁籤，也顯示函數調用棧。您還可單擊函數名，這将在javascript視圖中顯示相應的檔案，并高亮顯示相應的代碼行。
斷點：斷點讓您能夠指定執行到什麼地方後停止。您設定斷點後，浏覽器将在執行到相應代碼行後停止。要設定斷點，可在javascript視圖中單擊代碼行左邊；斷點用紅點表示。要删除斷點，可單擊它。“斷點”頁籤列出了您設定的所有斷點；要在“斷點”頁籤中禁用斷點，可取消選擇它旁邊的複選框。
目前執行的代碼行：目前執行的代碼行用黃色箭頭表示。
重新運作：單擊該圖示将重新啟動目前執行的腳本，并使用以前的輸入。
斷續：接着往下執行腳本，直到遇到斷點。
單步進入：單擊這個圖示将往下執行一行代碼。如果這行代碼調用了其他函數，将進入該函數的第一行。
單步跳過：單擊這個圖示将往下執行一行代碼。如果這行代碼調用了其他函數，将執行整個函數并進入下一行。如果該函數包含斷點，将在斷點處停止執行。
單步退出：單擊該圖示将執行目前函數餘下的所有代碼，并進入調用函數的下一行。
使用javascript調試器
下面的示例将幫助您熟悉javascript調試器。請看程式清單2.4所示的代碼，這是一個基本網頁，包含一個按鈕和一個計數字元串。這個html文檔包含兩個< div>元素。第一個為< div id="clicker"onclick="countit()">，定義了一個簡單的按鈕。當您單擊這個按鈕時，将調用javascript函數countit( )。第二個是< div id="counter">，用于顯示一個數字。
每當您單擊按鈕時，javascript函數countit( )都将顯示的數字加1。然而，這些javascript代碼存在問題，導緻數字增加到2後就不再增加了。
程式清單2.4 一個非常簡單的html文檔，其中的javascript代碼有問題
請按如下步驟在javascript調試器中設定斷點并調試問題。
在項目的檔案夾hour02中，建立檔案hour0204.html，添加程式清單2.4所示的代碼，再儲存文檔。
啟動firefox并單擊firebug圖示以啟用firebug。
在firefox中輸入下面的url，注意到網頁包含一個按鈕和數字1。
單擊firebug中的标簽“腳本”（script），再從腳本選擇清單中選擇hour0204.html，您将在調試器的腳本區域看到程式清單2.4所示的代碼。注意到第7～11行的函數設定div元素counter顯示的值。
單擊行号8的左邊，在第8行設定一個斷點。出現了一個紅點，如圖2.22所示。另外，確定在調試器中顯示了“監控”頁籤。
單擊網頁中的按鈕，調試器中将出現一個黃色箭頭，而第8行呈高亮顯示。腳本執行到這行後停止了。這個函數決定要在div元素中顯示什麼值。在“監控”頁籤中，注意到變量cnt還未定義。
單擊“單步跳過”圖示，變量cnt的值将變成1。
再次單擊“單步跳過”圖示，代碼行cnt += 1；将變量cnt的值變成了2。
單擊“單步退出”圖示三次，跳出目前函數以及後續jquery函數。注意到網頁中顯示的值變成了2。
單擊“斷續”按鈕，讓腳本執行完畢。到目前為止，一切順利。
再次單擊網頁中的按鈕。調試器将再次激活，并像第6步那樣在第8行停止。注意到變量cnt的值再次變成了未定義。
單擊“單步跳過”圖示，變量cnt的值變成了1。再次單擊“單步跳過”圖示，變量cnt的值變成了2。單擊頁面中的按鈕時，變量cnt重新變成了未定義，然後依次變為1和2。
為修複這種問題，在aptana中調換第7和8行的位置，進而在函數inccount()外面定義變量cnt。這樣，變量cnt将隻被定義和設定一次（即腳本加載時），然後再定義函數inccount()。
儲存這個檔案，再在firefox中重新整理網頁。這次腳本将在頁面加載時停止執行。圖2.23表明，javascript調試器在hour0204.html的第8行停止執行，這是因為第8行為函數定義而不是變量cnt的定義。
單擊第8行的斷點将其删除，再在第9行添加一個斷點，如圖2.23所示。
單擊“斷續”，按鈕接着執行javascript并結束網頁加載。
單擊網頁中的按鈕，javascript将再次停止執行—這次是在第9行。這次您在“監控”頁籤中看不到變量cnt，除非展開元素window（視窗），如圖2.24所示。
為避免每次調試時都展開元素window，單擊監控清單開頭的newwatch expression（建立監控表達式），如圖2.24所示，再輸入cnt并按Enter鍵。在監控清單開頭新增了監控表達式cnt，如圖2.24所示。
單擊“單步跳過”圖示，變量cnt的值将變成2。再單擊“斷續”按鈕接着往下執行。
再次單擊網頁中的按鈕，這次變量cnt的值為2。單擊“單步跳過”圖示，變量cnt的值将變成3。
程式看起來沒有問題，是以單擊第9行的斷點将其删除，再單擊“斷續”按鈕接着往下執行。
現在每當您單擊按鈕時，顯示的數字都将加1。至此，您成功地完成了javascript腳本調試。
這個示例非常簡單，這是有意為之的，旨在讓您能夠輕松地按指定步驟做，進而熟悉調試器的工作原理。完成本書的練習時，您可能會多次用到這個調試器。請牢記基本的調試步驟：設定斷點并在分步執行代碼時檢視變量的值。
2.4.2 如何調試jquery呢
大家常問的一個問題是，如何調試jquery。即便是有豐富javascript調試經驗的人，也會提出這樣的問題。答案很簡單，jquery和各種插件也是javascript代碼，要調試jquery，可從網上下載下傳未壓縮的jquery庫，并将其存儲到項目中。這将在本書後面介紹。
為何要下載下傳未壓縮的版本呢？因為壓縮後的版本可讀性極差，所有代碼都放在一行中，在調試器中顯示的效果很糟。未壓縮的版本格式很好，可讀性極強。
注意：即便無法獲得未壓縮的jquery庫檔案，可在aptana中打開jquery庫檔案，再選擇菜單file>format。aptana将自動設定檔案的格式，使其美觀易讀。大多數ide都提供了這樣的功能。
對于格式良好的jquery庫或其他javascript庫，可像調試其他javascript檔案一樣調試它們。