Firebug是網頁瀏覽器 Mozilla Firefox下的一款開發類插件， 現屬於Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發 JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面， 給Web開發者帶來很大的便利。例如 Yahoo! 的網頁速度優化建議工具 YSlow。下面咱們就來學習FireBug工具的使用。如有錯，望提出修改意見。
1.編輯HTML
a.鼠標選中某個html元素，修改相關屬性，即可在頁面中動態的顯示出來
b.點擊小甲蟲右側的箭頭按鈕，就可以在頁面中點擊某個元素，FireBug中的就會定位到這個元素的html代碼中。
當然，可以使用快捷鍵。ctrl+shift+c如果需要查看或者修改快捷鍵的話，可以點擊小甲蟲圖標，在彈出的菜單中選中“自定義快捷鍵”，在彈出的界面中查看和修改即可。
c，當需要編輯html代碼的時候，我們有兩種方式，一種是雙擊html代碼，即可對html代碼進行修改，還有一種是右鍵，點擊“編輯”頁面，進入編輯頁面，這個時候，我們實時的編輯，變化都會反映在頁面上。
2.處理css
在html代碼的右側，是css屬性頁面
a.點擊html代碼，即可看到他的css屬性，我們可以在樣式中移動鼠標可以看到css樣式中字體的大小，圖片和顏色等。
雙擊css即可進行修改，如果需要添加樣式，則只需要在空白的地方就可以新建樣式，當然，我們也可以禁用樣式，當我們用鼠標移動到樣式上的時，點擊出現的禁用按鈕即可禁用樣式。
如果要刪除某些樣式，則只要雙擊樣式，樣式變成可輸入狀態時，按住鍵盤delete鍵即可。
b.當我們需要修改一些屬性是數值的類型的樣式的時候，我們可以按住鍵盤的上下鍵，即可實現微調樣式，省去我們每次輸入的時間。如果需要調整0.1個單位的話，那我們只需要按住ctrl鍵，再用鍵盤上下鍵，即可實現數值樣式的精度更細的微調。如果需要大幅調整的話，則只需要按住shift鍵，再用鍵盤上下鍵，就可以每次以10個單位調整。如果需要調整很多css代碼，則只需要點擊右側的css，即可直接編輯css代碼。
c.最右側的計算出樣式，可以看到計算出來的css樣式。布局：我們可以看到盒子模型的布局。DOM:我們可以查看整個頁面的DOM節點2事件：我們可以查看當前頁面中的事件。
3.評估頁面下載的速度
點擊firebug面板中的網絡，在載入頁面的時候，即可看到整個頁面的網絡情況。
在這個頁面中，我們可以看到每個元素所下載的時間，請求方式，狀態、html、css、js等等。
我們可以通過時間線來評估整個頁面的下載時間，我們可以單擊請求，即可查看這些請求的一些信息。請求頭信息里，我們可以看到請求頭信息，響應頭信息、和響應結果。
4.ajax請求
當我們輸入ajax請求的時候，XHR就可以監聽每一次的ajax請求。
ajax中的參數就是我們傳入或者post的一些名字和字符，頭信息是我們請求的頭信息。響應是從服務器中返回回來的我們所接受到的信息。這些信息，在開發中我們可以檢查請求是否發出，結果是否返回，返回的結果是否如我們的期望。
5.javascript控制台
a.javascript控制台中可以讀取我們在js代碼中的命令。比如：
for(var i=0;i<10;i++)
{
console.log(i);//這樣，每次i值的變化我們都可以監聽到
}
我們也可以使用這些信息
console.error(i); //錯誤信息
console.debug(i); //debug信息
console.info(i);//詳細信息
我們也可以對日志信息進行分組：
console.group("first");
console.log("11111");
console.log("22222");
console.log("33333");
console.log("44444");
console.groupEnd();
console.group("second");
console.log("aaaa");
console.groupEnd();
當我們需要顯示一個對象的所有屬性和方法的時候，我們可以使用：
console.dir();
如：console.dir(console);
當我們需要測試某些代碼的運行速度的時候我們可以使用console.time()函數來測試代碼的運行速度：
6.js調試
當我們需要調試我們的代碼的時候，我們可以通過面板中的“腳本”來調試我們的代碼。
點擊“腳本”，我們可以看到我們腳本的代碼和當前的頁面，我們可以對腳本代碼設置斷點，對代碼進行調試
在調試的時候，我們可以點擊斷點，取消調試，
如果要查看函數的調用情況：我們可以在函數中使用console.trace();
當然，我們也可以使用“概括”來收集概括信息，
