FireBug是一個用於網站前端開發的工具，它是FireFox瀏覽器的一個擴展插件。它能夠用於調試JavaScript、查看DOM、分析CSS、監控網絡流量以及進行Ajax交互等。它提供了幾乎前端開發須要的所有功能。官方網站：www.getfirebug.comjavascript
如何獲取Firebug？php
由於它是Firefox瀏覽器的一個擴展插件，因此首先須要下載Firefox瀏覽器。讀者能夠訪問www.mozilla.com下載並安裝Firefox瀏覽器。安裝完成後用它訪問https://addons.mozilla.org/zh-CN/firefox/collections/mozilla/webdeveloper/html
進入下圖所示頁面。點擊"添加到Firefox"，而後點擊"當即安裝"，最後從新啓動Firefox瀏覽器便可完成安裝。前端
主面板
安裝完成以後，在Firefox瀏覽器的地址後方就會有一個小蟲子的圖標。單擊該圖標後便可展開Firebug的控制檯，也能夠經過快捷鍵<F12>來打開控制檯。使用Ctrl+F12快捷鍵可使Firebug獨立打開一個窗口而不佔用Firefox頁面底部的空間。java
從上圖中能夠看出，Firebug包括7個面板：web
控制檯面板：用於記錄日誌、概覽、錯誤提示和執行命令行，同時也用於Ajax的調試；瀏覽器
HTML面板：用於查看HTML元素，能夠實時地編輯HTML和改變CSS樣式，它包括3個子面板，分別是樣式、佈局和DOM面板；服務器
CSS面板：用於查看全部頁面上的CSS文件，能夠動態地修改CSS樣式，因爲HTML面板中已經包含了一個CSS面板，所以該面板將不多用到；cookie
腳本面板：用於顯示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」以及以後的數字沒有顯示到頁面中。下圖分別是正常效果和設置了條件斷點以後的顯示效果對比：
資源
快捷鍵：按<F12>能夠快速開啓Firebug，若是想獲取完整的快捷鍵列表，能夠訪問http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts.
問題：若是安裝過程當中遇到了困難，能夠查看Firebug的Q&A，網址爲http://getfirebug.com/wiki/index.php/FAQ.
Firebug插件：Firebug除了自己強大的功能以外，還有基於Firebug的插件，它們用於擴充Firebug的功能。好比Google公司開發Page Speed插件，開發人員可使用它來評估他們網頁的性能，並得到有關如何改進性能的建議。Yahoo公司開發的用於檢測頁面總體性能的YSlow和用於調試PHP的FirePHP。還有用於調試Cookie的Firecookie等。
總結
經過本文的學習，讀者能夠掌握Firebug的基本功能。Firebug已經逐漸成爲一個調試平臺，而不只僅是一個簡單的Firefox擴展插件。學好Firebug能給之後的學習和工做提供必定的幫助。
來自：http://www.cnblogs.com/allenben/p/4757274.html