學習WEB開發，從此我愛上了火狐的FireBug
做了牛腩新聞釋出系統 ，自己也就開始了真正的B/S學習！開始了真正的入門功課。
現在的Web開發工作，越來越覺得現在對WEB開發有了更高的要求。要寫出漂亮的HTML程式碼；要編寫精緻的CSS樣式表展示每個頁面模組；要除錯javascript給頁 面增加一些更活潑的要素；要使用Ajax給使用者帶來更好的體驗。一個優秀的WEB開發人員需要顧及更多層面，才能交出一份同樣優秀的作業。為幫助廣大正處於Web2.0洪流中的開發人員，在這裡為大家介紹一款輕巧靈活的輔助開發工具。
什麼是Firebug
Firebug是firefox下的一個外掛,能夠除錯所有網站語言，如Html,Css等，但FireBug最吸引我的就是javascript除錯功能，使用起來非常方便，而且在各種瀏覽器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能還很強大，比如html,css,dom的檢視與除錯，網站整體分析等等。總之就是一整套完整而強大的WEB開發工具。再有就是其為開源的軟體
Firebug是Firefox下的一款開發類外掛，現屬於Firefox的五星級強力推薦外掛之一。它集HTML檢視和編輯、Javascript控制檯、網路狀況監視器於一體，是開發JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
應用
Firebug外掛雖然功能強大，但是它已經和Firefox瀏覽器無縫地結合在一起，使用簡單直觀。如果你擔心它會佔用太多的系統資源，也可以方便地啟用/關閉這個外掛，甚至針對特定的站點開啟這個外掛。在安裝好外掛之後，先用Firefox
圖1：Firebug外掛展開圖示
從圖1中看到，Firebug有6個主要的Tab按鈕，下文將主要介紹介紹這幾方面的功能。
Console HTML CSS Script Dom Net
控制檯 Html檢視器 Css檢視器 指令碼條時期 Dom檢視器 網路狀況監視
Console 控制檯
控制檯能夠顯示當前頁面中的javascript錯誤以及警告，並提示出錯的檔案和行號，方便除錯，這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細且具有參考價值。而且在除錯Ajax應用的時候也是特別有用，你能夠在控制檯裡看到每一個XMLHttpRequests請求post出去的引數、URL，http頭以及回饋的內容，原本似乎在幕後黑匣子裡運作的程式被清清楚楚地展示在你面前。像Cshell或Python shell一樣，你還能在控制檯中檢視變數內容，直接執行javascript語句，就算是大段的javascript程式也能夠正確執行並拿到執行期的資訊。
控制檯還有個重要的作用就是檢視指令碼的log, 從前你也許習慣了使用alert來列印變數，但是Firebug給我們帶來了一個新朋友 —— console.log, 最簡單的列印日誌的語法是這樣的：
console.log(“hello world”)
如果你有一堆引數需要組合在一起輸出，可以寫成這樣：
console.log(2,4,6,8,”foo”,bar).
Firebug的日誌輸出有多種可選的格式以及語法，甚至可以定製彩色輸出，比起單調的alert，顯然更加方便，限於篇幅，這裡不做詳細說明，但是有志於提高debug效率的讀者，可以到Firebug的官方站點（見附錄）檢視更詳細的教程。
圖2：在控制檯裡除錯javascript
檢視和修改HTML
第一次看到Firebug強大的HTML程式碼檢視器，就覺得它與眾不同，相比於Firefox自帶的HTML檢視器，它的功能強大了許多。 HTML首先你看到的是已經經過格式化的HTML程式碼，它有清晰的層次，你能夠方便地分辨出每一個標籤之間的從屬並行關係，標籤的摺疊功能能夠幫助你集中精力分析程式碼。原始碼上方還標記出了DOM的層次，如圖3所示，它清楚地列出了一個hml元素的parent、child以及root元素，配合Firebug自帶的CSS檢視器使用，會給div+css頁面分析編寫帶來很大的好處。你還可以在HTML檢視器中直接修改HTML原始碼，並在瀏覽器中第一時間看到修改後的效果，光憑這一點就會讓許多頁面設計師死心塌地地成為Firebug的粉絲了。
有時候頁面中的javascript會根據使用者的動作如滑鼠的onmouseover來動態改變一些HTML元素的樣式表或背景色，HTML檢視器會將頁面上改變的內容也抓下來，並以黃色高亮標記，讓網頁的暗箱操作徹底成為歷史。
利用Inspect檢查功能，我們還可以用滑鼠在頁面中直接選擇一些區塊，檢視相應的HTML原始碼和CSS樣式表，真正的做到所見即所得，如果你使用了外部編輯器修改了當前網頁，可以點選Firebug的reload圖片重新載入網頁，它會繼續跟蹤你之前用Inspect選中的區塊，方便除錯。
圖3:：HTML檢視器
CSS除錯
Firebug的CSS偵錯程式是專為網頁設計師們量身定做的。如今的網頁設計言必稱div+css，如果你是用table套出來的HTML頁面，就得按這規矩重構一遍，否則顯得你不夠時髦！用div做出來的頁面的確能精簡HTML程式碼，HTML標籤減肥的結果就是CSS樣式表的編寫成了頁面製作的重頭戲。Firebug的CSS檢視器不僅自下向上列出每一個CSS樣式表的從屬繼承關係，還列出了每一個樣式在哪個樣式檔案中定義。你可以在這個檢視器中直接新增、修改、刪除一些CSS樣式表屬性，並在當前頁面中直接看到修改後的結果。
一個典型的應用就是頁面中的一個區塊位置顯得有些不太恰當，它需要挪動幾個象素。這時候用CSS除錯工具可以輕易編輯它的位置——你可以根據需要隨意挪動象素。
如圖4中正在修改一個區塊的背景色。
提示：如果你正在學習CSS樣式表的應用，但是總記不住常用的樣式表有哪些值，可以嘗試在CSS偵錯程式中選中一個樣式表屬性，然後用上下方向鍵來改變它的值，它會把可能的值一個個遍歷給你看。
圖4:CSS檢視器，能夠直接修改樣式表
視覺化的CSS尺標
我們可以利用Firebug來檢視頁面中某一區塊的CSS樣式表，如果進一步展開右側Layout tab的話，它會以標尺的形式將當前區塊佔用的面積清楚地標識出來，精確到象素，更讓人驚訝的是，你能夠在這個視覺化的介面中直接修改各象素的值，頁面上區塊的位置就會隨改動而變化。在頁面中某些元素出現錯位或者面積超出預料值時，該功能能夠提供有效的幫助，你可以籍此分析offset、margin、padding、size之間的關係，從而找出解決問題的辦法。圖5：Firebug中的CSS標尺
以上就是火狐firebug外掛的簡單使用，如果有出入還請見諒。