本節書摘來自異步社群《jquery與javascript入門經典》一書中的第2章，第2.1節，作者：【美】brad dayley著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
本章介紹如下内容：
到哪裡尋找jquery和javascript腳本輸出的資訊；
如何調試html元素存在的問題；
如何輕松地找出并修複css布局問題；
如何在web浏覽器中實時地檢視和編輯dom；
如何快速找出并修複javascript問題；
有哪些資訊可供用來分析浏覽器和web伺服器之間的網絡流量。
編寫javascript和jquery應用程式時，面臨的一項重大挑戰是找出并修複腳本中的問題。簡單的文法錯誤和無效值可能令您萬般沮喪，浪費您大量時間。有鑒于此，出現了一些卓越的工具，可幫助您快速而輕松地找出腳本中的問題。在本章中，您将學習使用firebug調試javascript的基本知識。雖然其他浏覽器的開發控制台稍有不同，但大部分原理是相通的。另外，如果您不懂本章的示例代碼，也不用擔心，本書後面将介紹它們。在您大量地編寫代碼前，應明白如何調試。
您首先需要熟悉的工具之一是javascript控制台，它讓您能夠檢視javascript腳本的輸出：錯誤和日志消息将實時地顯示到javascript控制台。
例如，腳本存在錯誤，導緻浏覽器無法對其進行分析時，這種錯誤将顯示到控制台。除錯誤外，您還可使用console.log語句在javascript控制台顯示調試消息。
注意：除console.log外，您還可使用console.error()、console.assert()和其他語句向javascript控制台顯示日志資訊。
2.1.1 了解javascript控制台
javascript控制台是一個非常簡單的工具，但功能強大。它由兩部分組成：控件和日志項清單，如圖2.1所示。
請注意單擊console（控制台）标簽時顯示的菜單。使用該菜單可啟用控制台，還可指定要在消息清單中顯示的錯誤和日志消息類型。
控制台還提供了包含多個選項的工具欄，這些選項都可通過單擊來開關。下面描述了每個選項。
break on errors（在所有錯誤處中斷）：啟用了該選項時，javascript将在腳本中遇到錯誤時停止執行。如果您要捕獲錯誤并檢視錯誤發生時變量的值，這将很有用。
clear（清除）：清空消息清單中的消息。
persist（保持）：保留消息，即便頁面被重新加載。如果沒有啟用該選項，重新加載頁面時将清空消息清單。
profile（概況）：啟用和停止跟蹤代碼執行時間的剖析器。
all（全部）：顯示所有消息。在大多數情況下，應顯示所有消息，除非您隻關注特定的消息。
error（錯誤）：隻顯示錯誤消息。
warnings（警告）：隻顯示警告消息。
debug info（調試資訊）：隻顯示調試資訊。
cookies：隻顯示與cookie相關的消息。
jquerify：修改加載jquery庫的腳本，以包含最新的jquery庫代碼。這是firequery插件提供的功能。
在圖2.1所示的消息清單部分，注意到有兩種消息。一種是log語句顯示的，另一種是錯誤。在這兩條消息的右邊，都顯示了行号；如果您單擊行号，将直接切換到代碼。
在錯誤消息中，注意到上面的文本指出了錯誤，而下面的文本指出了實際的javascript代碼。這對調試很有幫助，因為根據指出的錯誤和代碼通常能夠發現問題所在。
使用javascript控制台找出錯誤
要明白控制台的用法，最簡單的方式是使用它來調試腳本。請看程式清單 2.1 所示的html代碼，其中包含多種錯誤。請在aptana中按如下步驟将這個程式清單加入到項目中。
右擊項目并從彈出菜單中選擇new>folder。
将檔案夾命名為hour02并單擊finish按鈕。
右擊建立的檔案夾并從彈出菜單中選擇new>file。
将檔案命名為hour0201.html。
輸入程式清單2.1所示的内容；如果您從配套網站下載下傳了該檔案，也可将其内容複制并粘貼到新檔案中。
儲存檔案。
程式清單2.1 一個包含javascript錯誤的簡單html文檔
程式清單 2.1 所示代碼的目的如下：在浏覽器加載頁面後向控制台顯示消息 page is loaded；每當使用者單擊浏覽器中的文本click me時，都顯示消息user clicked。問題是這個腳本存在多個bug。
檔案準備就緒後，按如下步驟使用javascript控制台來調試錯誤。
啟動firefox并單擊firebug圖示。
在firefox中輸入下面的url，以加載新建立的網頁。
在firebug中，單擊console（控制台）标簽以顯示javascript控制台，如圖2.2所示。
請注意控制台中顯示的錯誤，如圖2.2所示。第一個錯誤指出loadedfunction()的定義中缺少“，”。第二個錯誤指出loadedfunction未定義。結合這兩個錯誤可知，loadedfunction()的定義有問題。從定義這個函數的語句可知，function被錯誤地拼寫成了fnction。
在aptana中，将第6行的單詞fnction改為function。
回到 firefox 并重新整理網頁。現在控制台隻顯示了 page is loaded，這是函數loadedfunction()顯示的消息，并非錯誤。
單擊文本click me，控制台将新增一條錯誤消息，如圖2.3所示。這條錯誤消息指出clickitnot未定義。在html檔案中查找clickitnot，發現第15行将事件onclick關聯到了clickitnot()，但定義的javascript函數名為clickit()。
在aptana中，将第15行的clickitnot改為clickit，再儲存檔案。
重新加載網頁。
再次單擊文本click me，控制台顯示兩條日志消息，而沒有錯誤消息，如圖2.4所示。至此，成功地完成了網頁調試工作。