10分鐘學會前端調試利器——FireBug
概述
FireBug是一個用於網站前端開發的工具，它是FireFox瀏覽器的一個擴展插件。它可以用於調試JavaScript、查看DOM、分析CSS、監控網絡流量以及進行Ajax交互等。它提供了幾乎前端開發需要的全部功能。官方網站：www.getfirebug.com
如何獲取Firebug？
因爲它是Firefox瀏覽器的一個擴展插件，所以首先需要下載Firefox瀏覽器。讀者可以訪問www.mozilla.com下載並安裝Firefox瀏覽器。安裝完成後用它訪問https://addons.mozilla.org/zh-CN/firefox/collections/mozilla/webdeveloper/
進入下圖所示頁面。點擊"添加到Firefox"，然後點擊"立即安裝"，最後重新啓動Firefox瀏覽器即可完成安裝。
主面板
安裝完成之後，在Firefox瀏覽器的地址後方就會有一個小蟲子的圖標
從上圖中可以看出，Firebug包括7個面板：
控制檯面板：用於記錄日誌、概覽、錯誤提示和執行命令行，同時也用於Ajax的調試；
HTML面板：用於查看HTML元素，可以實時地編輯HTML和改變CSS樣式，它包括3個子面板，分別是樣式、佈局和DOM面板；
CSS面板：用於查看所有頁面上的CSS文件，可以動態地修改CSS樣式，由於HTML面板中已經包含了一個CSS面板，因此該面板將很少用到；
腳本面板：用於顯示Javascript文件及其所在的頁面，也可以用來顯示Javascript的Debug調試，包含3個子面板，分別是監控、堆棧和斷點；
DOM面板：用於顯示頁面上的所有對象；
網絡面板：用於監視網絡活動，可以幫助查看一個頁面的載入情況，包括文件下載所佔用的時間和文件下載出錯等信息，也可以用於監視Ajax行爲；
Cookies面板：用於查看和調整cookie(需要安裝下文資源中所提到的Firecookie)。
控制檯面板
1.控制檯面板概覽
此面板可以用於記錄日誌，也可以用於輸入腳本的命令行。
2.記錄日誌
Firebug提供如下幾個常用的記錄日誌的函數：
console.log:簡單的記錄日誌；
console.debug：記錄調試信息，並且附上行號的超鏈接；
console.error：在消息前顯示錯誤圖標，並且附上行號的超鏈接；
console.info：在消息前顯示消息圖標，並且附上行號的超鏈接；
console.warn：在纖細錢顯示警告圖標，並且附行號的超鏈接。
在空白的html頁面中，向<body>標籤中加入<script>標籤，代碼如下：
1 <script type="text/javascript"> 2 console.log('this is log message'); 3 console.debug('this is debug message'); 4 console.error('this is error message'); 5 console.info('this is info message'); 6 console.warn('this is warn message'); 7 </script>
執行代碼後可以在Firebug中看到下圖所示的結果，以前習慣了用alert來調試程序，然而在Firebug下可以使用console。
3.格式化字符串輸出和多變量輸出
這個功能類似於C語言中的語法，可以在console記錄日誌的方法裏使用。
%s:字符串 %d,%i:數字 %f:浮點數 %o:鏈接對象
同時，這幾個函數支持多個變量。代碼如下：
1 <script type="text/javascript"> 2 var kid="孩子",count="3",man="Allen"; 3 var sport1="籃球",sport2="羽毛球",sport3="網球"; 4 console.log("%d個%s在玩遊戲",count,kid); 5 console.log(count,"個",kid,"在玩遊戲"); 6 console.log("%s擅長的運動有：",man,sport1,sport2,sport3); 7 </script>
運行代碼後效果如下圖所示：
Firebug控制檯還提供了其他功能，例如檢測函數執行時間、消息分組、測試驅動、跟蹤、計數以及查看Javascript概況等。更多資料可以訪問http://getfirebug.com/logging.
4.面板內的子菜單
控制檯面板內有一排子菜單，分別是清除、保持、概況、全部等。
“清除”用於清除控制檯中的內容。“保持”則是把控制檯中的內容保存，即使刷新了依然還存在。“全部”則是顯示全部的信息。後面的“錯誤”、“警告”、“消息”、“調試信息”、“Cookies”菜單則是對所有進行了一個分類。
“概況”菜單用於查看函數的性能。下面通過一個例子來演示，代碼如下：
1 <button type="button" id="btn1">執行循環1</button> 2 <button type="button" id="btn2">執行循環2</button> 3 <button type="button" id="btn3">執行循環3</button> 4 <script type="text/javascript"> 5 var f1=function(){ 6 for(var i =0;i<1000;i++) 7 for(var j=0;j<1000;j++); 8 } 9 function f2(){ 10 for(var i =0;i<1000;i++) 11 for(var j=0;j<1000;j++); 12 } 13 document.getElementById("btn1").onclick=f1; 14 document.getElementById("btn2").onclick=f2; 15 document.getElementById("btn3").onclick=function(){ 16 for(var i =0;i<1000;i++) 17 for(var j=0;j<1000;j++); 18 } 19 </script>
打開頁面，顯示三個按鈕：
打開頁面後，先啓用Firebug控制檯面板，然後單擊“概況”菜單，如下圖所示：
從上圖中可以看到，出現了一行字，“概況收集中。再次點擊“概況”查看結果。”，接着，依次單擊“執行循環1”、“執行循環2”、“執行循環3”三個按鈕各一次，並再次單擊“概況菜單”，即可看到如下圖所示結果：
可以看到Firebug顯示出了非常詳細的報告。包括每個函數的函數名、調用次數、佔用時間的百分比、佔用時間、時間、平均時間、最小時間、最大時間以及所在的文件的行數等信息。
5.Ajax調試
控制檯面板也可用於Ajax調試，在一定程度上可以取代網絡面板。例如我打開一個頁面，可以在Firebug控制檯看到本次Ajax的Http請求頭信息和服務器響應頭信息。如下圖，它會顯示出本次使用的Ajax的GET方法、地址、耗時以及調用Ajax請求的代碼行數。最重要的是有5個標籤，即參數、頭信息、響應、HTML、Cookies.第一個標籤用於查看傳遞給服務器的參數；第二個標籤用於查看響應頭信息和請求頭信息；第三個標籤用於查看服務器返回的內容；第四個標籤則是查看服務器返回的HTML結構；第五個標籤用於查看相應的Cookies。
如果看不到任何信息的出現，可能是將此功能關閉了，可以單擊“控制檯”旁邊的下拉箭頭，將“顯示XMLHttpRequests”前面的勾勾選上即可。
HTML面板
1.查看和修改HTML代碼
Html面板的強大之處就是能查看和修改HTML代碼，而且這些代碼都是經過格式化的。下面以我的一個瀏覽器主頁來做講解。
在HTML控制檯的左側可以看到整個頁面當前的文檔結構，可以通過單擊“+”來展開。當單擊相應的元素時，右側面板中就會顯示出當前元素的樣式、佈局以及DOM信息。而當光標移動到HTML樹中相應元素上時，上面頁面中相應的元素將會被高亮顯示。
例如，將光標移動到一個<P>標籤上，顯示效果如下圖所示：
在頁面中藍色部分表示元素本身，紫色表示padding部分，黃色表示margin部分。同時可以實時地添加、修改和刪除HTML節點以及屬性，如下圖所示。另外，單擊script節點還可以直接查看腳本，此處的腳本無論是內嵌在HTML中還是外部導入的，都可以查看到。同樣這也適用於<style>標籤內嵌或者導入的CSS樣式和動態創建HTML代碼。
2.查看(Inspect)
利用查看(Inspect)功能，可以快速地尋找到某個元素的HTML結構，如圖：
當單擊"Inspect"按鈕後，用鼠標在網頁上選中一個元素時，元素會被一個藍色的框框住，同時下面的HTML面板中相應的HTML樹也會展開並且高亮顯示。再次單擊後即可退出該模式，並且底部的HTML樹也保持在這個狀態。通過這個功能，可以快速尋找頁面內的元素，調試和查找相應代碼非常方便。刷新網頁後，頁面顯示的仍然是用Inspect選中的區域。
HTML面板下方的“編輯”按鈕可以用於直接編輯選中的HTML代碼，而後面顯示的是當前元素在整個DOM中的結構路徑。
3.查看DOM中被腳本更改的部分
通過JavaScript來改變樣式屬性的值可以完成一些動畫效果。打開頁面後，利用查看(Inspect)功能來選擇相應的HTML代碼，例如，選中“要聞”，如下圖所示：
單擊“國內”標籤後，出現下圖所示效果：
通過上圖可以看出，HTML查看器會將頁面上改變的內容頁記錄下來，並以黃色高亮表示。有了這個功能，網頁的暗箱操作將徹底成爲歷史。我們可以使用該功能查看其它網站的動畫效果是如何實現的。
4.查看和修改元素的樣式
在右側的樣式面板中，展示了此元素當前所有的樣式。所有的樣式都可以實時地禁用和修改，如下圖所示，通過在"text-align:center"前單擊會出現禁用的標記，這樣就可以禁用此規則。通過直接在樣式value值上單擊就可以修改。
單擊“佈局”面板即可看到此元素具體的佈局屬性，這是一個標準的盒模型。通過“佈局”面板，可以很容易地看到元素的偏移量、外邊距、邊框、內邊距和元素的高度、寬度等信息，如下圖所示：
5.查看DOM的信息
單擊“DOM”面板後可以看到此元素的詳細的DOM信息以及函數和事件，如下圖所示：
CSS、DOM和網絡面板
這3個面板相對於前面2個面板比較次要，CSS和DOM面板與HTML面板中右側的面板功能相似，但不如HTML面板靈活，因此一般使用得很少。
CSS面板特有的一個功能就是可以分別詳細查看頁面中內嵌以及動態導入的樣式。如下圖所示：
單擊CSS面板後就可以分別查看相應的樣式。此處展開的樣式都是經過格式化的，適合於學習CSS的代碼格式和規範。
而在網絡面板中，相對有一些強大的功能，例如打開某個網站首頁，Firebug顯示效果如下圖所示：
該頁面可以監視每一項元素的加載情況，包括腳本，圖片等的大小以及加載用時等，對於頁面優化有着極其重要的意義。
此外，頂部還可以分類查看元素的HTML、CSS、JS等的加載情況，使分析更加靈活。
腳本面板
腳本面板不僅可以查看頁面內的腳本，而且還有強大的調試功能。
在腳本面板的右側有“監控”、“堆棧”和“斷點”三個面板，利用Firebug提供的設置斷掉的功能，可以很方便地調試程序，如下圖所示：
1.靜態斷點
例如test.html文件，代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <script type="text/javascript"> 5 function doSomething(){ 6 var lab = document.getElementById('messageLabel'); 7 arrs=[1,2,3,4,5,6,7,8,9]; 8 for(var arr in arrs){ 9 lab.innerHTML+=arr+"<br />" 10 } 11 } 12 </script> 13 </head> 14 <body> 15 <div> 16 <div id="messageLabel"></div> 17 <input type="button" value="Click Here" onClick="doSomething();"/> 18 </div> 19 </body> 20 </html>
運行代碼後可以看到下圖所示效果。圖中加粗並有顏色的行號表示此處爲JavaScript代碼，可以在此處設置斷點。比如在第6行這句代碼前面單擊一下，那它前面就會出現一個紅褐色的圓點，表示此處已經被設置了斷點。此時，在右側斷點面板的斷點列表中就出現了剛纔設置的斷點。如果想暫時禁用某個斷點，可以在斷點列表中去掉某個斷點的前面的複選框中的勾，那麼此時左側面板中相應的斷點就從紅褐色變成了紅灰褐色了。
設置完斷點之後，我們就可以調試程序了。單擊頁面中的“Click Here”按鈕，可以看到腳本停止在用談黃色底色標出的那一行上。此時用鼠標移動到某個變量上即可顯示此時這個變量的value。顯示效果如下：
此時JavaScript內容上方的
繼續執行<F8>：當通過斷點來停止執行腳本時，單擊<F8>就會恢復執行腳本。
單步進入<F11>：允許跳到頁面中的其他函數內部。
單步跳過<F10>：單擊<F10>來直接跳過函數的調用即跳到return之後。
單步退出<shift+F11>：允許恢復腳本的執行，直到下一個斷點爲止。
單擊“單步進入”按鈕，代碼會跳到下一行，顯示效果如下：
從上圖可以看出，當鼠標移動到“lab”變量上時，就可以顯示出它的內容是一個DOM元素，即“div#messageLabel”。
此時將右側面板切換到“監控”面板，這裏列出了幾個變量，包括“this”指針的指向以及“lab”變量。單擊“+”可以看到詳細的信息。顯示如下：
2.條件斷點
在“lab.innerHTML+=arr+"<br />"”這行代碼前面的序號上單擊鼠標右鍵，就可以出現設置條件斷點的輸入框。在該框內輸入“arr==5”，然後回車確認，顯示效果如下：
最後單擊頁面的“Click Here”按鈕。可以發現，腳本在“arr==5”這個表達式爲真時停下了，因此“5”以及之後的數字沒有顯示到頁面中。下圖分別是正常效果和設置了條件斷點之後的顯示效果對比：