第3章 調試工具及技巧
子曰：“工欲善其事，必先利其器。”作為開發人員，好的調試工具是必不可少的。幸運的是，現在javascript的調試工具越來越多，也越來越友善。本章将介紹firebug、debugbar、ie 9等調試工具，根據你們的喜好選擇一款吧，這是必需的。
3.1 使用firebug進行調試
1.firebug概述
firebug是由joe hewitt開發的、基于firefox的一個擴充，是目前最好的web開發調試工具。它可以在用戶端實時編輯、調試和檢測任何頁面的css、html和javascript。
雖然也可以在其他浏覽器中使用firebug lite，但是功能都不如在firefox中強大，因而本書沒有特别聲明時說的firebug都是基于firefox環境的。
2011年是mozilla“瘋狂”的一年，firefox的版本一下子從3.6更新到9，版本更新的速度越來越快，讀者可以根據自己的喜好選擇一個适合自己的版本。本節的安裝過程是在4.0版進行的，與最新的版本可能會有差異，但基本上還是一緻的。
firebug的安裝
打開firefox後，如圖3-1所示，打開firefox菜單，并選擇圖中紅色圈住部分的“附加元件”。
在如圖3-2所示的附加元件管理器标簽頁的搜尋框中輸入firebug并按下Enter鍵。
在如圖3-3所示的搜尋結果出來後，單擊firebug 1.7.0 條目中的“安裝”按鈕。
安裝完成後将顯示如圖3-4所示的結果，單擊“立即重新開機”重新啟動firefox，即可完成firebug的安裝。
firefox重新開機後會如圖3-5所示，在底部多了一個附加元件欄，欄中最右邊多了一個臭蟲圖示，這是firebug附加的工具按鈕。單擊可打開如圖3-6所示的firebug工作區域。
firebug的界面
通過firefox附加元件欄的firebug圖示或用快捷鍵f12可打開或關閉firebug視窗。從圖3-6中可看到firebug主要由工具欄和面闆區兩部分組成。工具欄按鈕的詳細說明如表3-1所示。
firebug有控制台、html、css、腳本、dom和網絡5個基本面闆，切換到不同的面闆時，面闆區的顯示會不同。有些基于firebug的插件會在firebug内增加自己的面闆。
預設狀态下隻有html、css和dom面闆是處于活動狀态的，而控制台、腳本和網絡面闆需要啟動才能使用。這主要是因為開啟這3個面闆很占資源，而且容易造成firefox崩潰，這需要大家做好心裡準備。
4.控制台面闆
控制台面闆的主要作用是顯示各種的錯誤資訊（可在面闆按鈕的下拉菜單中定義），輸出腳本調試資訊，使用指令行調試腳本，以及檢測javascript執行時間的概況。
将面闆切換到控制台将看到如圖3-10所示的面闆區。這時面闆還沒開啟，如果要開啟所有面闆，可在附加元件欄的firebug圖示上單擊滑鼠右鍵，在菜單中啟用所有面闆。如果隻開啟目前面闆，則單擊面闆中的“啟用”，或在工具欄的面闆按鈕下拉菜單中選擇“啟用”。啟動後的控制台面闆将如圖3-11所示，它包含工具欄、資訊區和指令行3個區域。