什麼是Firebug
從事了數年的Web開發工作，越來越覺得現在對WEB開發有了更高的要求。要寫出漂亮的HTML代碼；要編寫精緻的CSS樣式表展示每個頁面模塊；要調試javascript給頁面增加一些更活潑的要素；要使用Ajax給用戶帶來更好的體驗。一個優秀的WEB開發人員需要顧及更多層面，才能交出一份同樣優秀的作業。爲幫助廣大正處於Web2.0洪流中的開發人員，在這裏爲大家介紹一款輕巧靈活的輔助開發工具。
Firebug是Firefox下的一款開發類插件，現屬於Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制檯、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。這是一款讓人愛不釋手的插件，如果你以前沒有接觸過它，也許在閱讀本文之後，會有一試的慾望。筆者在撰寫此文的時候，正逢Firebug發佈1.0正式版，這不能不說是種巧合。
應 用
Firebug插件雖然功能強大，但是它已經和Firefox瀏覽器無縫地結合在一起，使用簡單直觀。如果你擔心它會佔用太多的系統資源，也可以方便地啓用/關閉這個插件，甚至針對特定的站點開啓這個插件。
在安裝好插件之後，先用Firefox瀏覽器打開需要測試的頁面，然後點擊右下方的綠色按鈕或使用快捷鍵F12喚出Firebug插件，它會將當前頁面分成上下兩個框架。
從圖1中看到，Firebug有6個主要的Tab按鈕，下文將主要介紹介紹這幾方面的功能。
|
Console |
HTML |
CSS |
Script |
Dom |
Net |
|
控制檯 |
Html查看器 |
Css查看器 |
腳本調試期 |
Dom查看器 |
網絡狀況監視 |
Console 控制檯
控制檯能夠顯示當前頁面中的javascript錯誤以及警告，並提示出錯的文件和行號，方便調試，這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細且具有參考價值。而且在調試Ajax應用的時候也是特別有用，你能夠在控制檯裏看到每一個XMLHttpRequests請求post出去的參數、 URL，http頭以及回饋的內容，原本似乎在幕後黑匣子裏運作的程序被清清楚楚地展示在你面前。
像C shell或Python shell一樣，你還能在控制檯中查看變量內容，直接運行javascript語句，就算是大段的javascript程序也能夠正確運行並拿到運行期的信息。
控制檯還有個重要的作用就是查看腳本的log,從前你也許習慣了使用alert來打印變量，但是Firebug給我們帶來了一個新朋友 —— console.log,最簡單的打印日誌的語法是這樣的：
PLAIN TEXT
CODE:
console.log("hello world")
如果你有一堆參數需要組合在一起輸出，可以寫成這樣：
PLAIN TEXT
CODE:
console.log(2 ,4 ,6 ,8 ,"foo" ,bar).
Firebug的日誌輸出有多種可選的格式以及語法，甚至可以定製彩色輸出，比起單調的alert，顯然更加方便，限於篇幅，這裏不做詳細說明，但是有志於提高debug效率的讀者，可以到Firebug的官方站點（見附錄）查看更詳細的教程。
查看和修改HTML
第一次看到Firebug強大的HTML代碼查看器，就覺得它與衆不同，相比於Firefox自帶的HTML查看器，它的功能強大了許多。
首先你看到的是已經經過格式化的HTML代碼，它有清晰的層次，你能夠方便地分辨出每一個標籤之間的從屬並行關係，標籤的摺疊功能能夠幫助你集中精力分析代碼。源代碼上方還標記出了DOM的層次，如圖3所示，它清楚地列出了一個html元素的parent、child以及root元素，配合 Firebug自帶的CSS查看器使用，會給div+css頁面分析編寫帶來很大的好處。你還可以在HTML查看器中直接修改HTML源代碼，並在瀏覽器中第一時間看到修改後的效果，光憑這一點就會讓許多頁面設計師死心塌地地成爲Firebug的粉絲了。
有時候頁面中的javascript會根據用戶的動作如鼠標的onmouseover來動態改變一些HTML元素的樣式表或背景色，HTML查看器會將頁面上改變的內容也抓下來，並以黃色高亮標記，讓網頁的暗箱操作徹底成爲歷史。
利用Inspect檢查功能，我們還可以用鼠標在頁面中直接選擇一些區塊，查看相應的HTML源代碼和CSS樣式表，真正的做到所見即所得，如果你使用了外部編輯器修改了當前網頁，可以點擊Firebug的reload圖片重新載入網頁，它會繼續跟蹤你之前用Inspect選中的區塊，方便調試。
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之間的關係，從而找出解決問題的辦法。
網絡狀況監視器
也許有一天，你的老闆或者客戶找到你，抱怨你製作的網頁速度奇慢，你該如何應對？你或許會說這可能是網絡問題，或者是電腦配置問題，或者是程序太慢，或者直說是他們的人品問題？不管怎麼說，最後你可能被要求去解決這個有多種可能的問題。
網絡狀況監視器能幫你解決這個棘手問題。Firebug的網絡監視器同樣是功能強大的，它能將頁面中的CSS、javascript以及網頁中引用的圖片載入所消耗的時間以矩狀圖呈現出來，也許在這裏你能一把揪出拖慢了你的網頁的元兇，進而對網頁進行調優，最後老闆滿意客戶歡喜，你的飯碗也因此而牢固。
網絡監視器還有一些其它細節功能，比如預覽圖片，查看每一個外部文件甚至是xmlHttpRequests請求的http頭等等。
Javascript調試器
這是一個很不錯的javascript腳本調試器，佔用空間不大，但是單步調試、設置斷點、變量查看窗口一個不少。正所謂麻雀雖小，五臟俱全。
如果你有一個網站已經建成，然而它的javascript有性能上的問題或者不是太完美，可以通過面板上的Profile來統計每段腳本運行的時間，查看到底是哪些語句執行時間過長，一步步排除問題。
DOM查看器
DOM(Document Object Model)裏頭包含了大量的Object以及函數、事件，在從前，你要想從中查到需要的內容，絕非易事，這好比你去了一個巨大的圖書館，想要找到幾本名字不太確切的小書，衆多的選擇會讓你無所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內部結構，幫助你快速定位DOM對象。雙擊一個 DOM對象，就能夠編輯它的變量或值，編輯的同時，你可能會發現它還有自動完成功能，當你輸入document.get之後，按下tab鍵就能補齊爲 document.getElementById，非常方便。如果你認爲補齊得不夠理想，按下shift+tab又會恢復原狀。用了Firebug的 DOM查看器，你的javascript從此找到了驅使的對象，Web開發也許就成了一件樂事。
小結
Firebug插件提供了一整套web開發所必需的工具。從HTML的編寫，到CSS樣式表的美化調優，以及用javascript腳本開發，亦或是Ajax應用，Firebug插件都會成爲你的得力助手。所謂工欲善其事，必先利其器。在Web2.0的時代，言必稱Ajax，動輒就是用戶體驗提升，如果把Firebug工具用好，必能讓你如虎添翼，將HTML、CSS、javascript整理得服服帖帖，從此成爲web開發中的專家級人物。
Firebug+Firefox 調試方法初探
最近項目第一階段告一段落，用aptana+firefox開發了完了一套完整的js組件，便於後期結合ajax開發。
但是現在如何在eclipse的環境下搭建一個js的調試環境呢？
將aptana的調試功能結合到eclipse裏面基本上不可能，因爲要啓動aptana的調試功能，必須開啓一個aptana的本地web server，而這個server和eclipse的web server是相互獨立的. 所以後期後臺結合前臺開發，javascript的調試問題成了重中之重的問題。
上網搜索了下，發現目前比較流行的方法有:
IE 上支持調試的插件有: Microsoft script debug, visual interdev,或者visual studio 200x版本，同時需要啓動IE的debug功能和debug服務。最好結合 http watch一起調試。 不過基本上沒有免費的，而且破解版很難找。
eclipse調試js的插件有 jseditor ( http://eclipse.moelleryoung.com/jseditor/ )和 JSEclipse（ http://www.interaktonline.com/Products/Eclipse/JSEclipse/）， 不過看過用過的人對它的評價平平，自己也沒試。
firefox 下的調試，工具欄裏面的 錯誤控制檯 結合 插件 firebug (http://www.getfirebug.com/ ) 構成的輕型調試工具用起來很好，而且這種架構很輕，用攔截器的方式對js進行調試，適用於任何的開發平臺下的web server.並且用它對gmail進行了下調試，感覺功能很強，應付我的需求搓搓由於。
綜合上面的3種調試方法，因爲項目要求必須兼容firefox和IE，我毫不猶豫的採用了firebug來進行js調試，至於IE上的一些不兼容問題，就用最笨的方法alert吧
下面我對它的一些大致用法和感受描述下
1. 安裝好firebug插件，重啓firefox，會在工具裏面出現 firebug工具欄。
2. 寫一個很簡單的js程序來調試下 test.html：
<html>
<head>
<scriptlanguage='javascript'>
function test()
{
var a =1
var b = 2
var c =3
var d =a+b+c+d
alert(d)
varstr = '這是個調用腳本調試器的例子';
alert(str);
}
</script>
</head>
<body οnlοad='test()'>
這是個調用腳本調試器的例子。
</body>
</html>
3. 用firefox從本地打開該文件 test.html，然後從工具欄中 選擇 openfirebug, 然後會在 firefox的窗體的下部顯示出調試窗口，另外可以啓動 open firebug in new window,會彈出一個小的調試窗體。如圖：（插入本地圖片始終不成功，那還是儘量用語言描述吧 ：（)
4. 如何設置斷點，
首先在調試窗口中查看console裏面，是否存在嚴重錯誤，必須首先修正這裏的錯誤後，斷點調試纔會啓動。
然後在 script裏面 找到你的 javascript源碼， 設置你的斷點。
5. 斷點調試：
ok,設置好斷點後，把之前打開的頁面刷新下，這個時候fire bug會攔截該網頁， 然後點擊右上方提供的調試按鈕進行調試即可。
我會在我的後期項目開發中，將使用firebug的心得體會、優勢和不足寫下來。
使用firefox調試js
文章分類:Java編程
Firefox(火狐瀏覽器) 調試js設置
步驟1： 安裝插件
在Firefox(火狐瀏覽器) 的菜單欄目中點“工具”-》“附加組件”-》找到“Firebug”組件，進行安裝。
或是從網上下個 firebug-1.2.0-fx.xpi 直接拖拽到 “附加組件” 的框內，即可安裝。
步驟2：呼出插件
點擊 右下角的那個爬蟲標誌 即可呼出Firebug
步驟3： 調試
在 “DOM”裏選中要調試的位置。並加上斷點，即可調試
對於JavaScript程序來說，困難的就是調試問題，現有的調試軟件也不少，可以在網上找到好幾種，自己比較喜歡用Firebug.使用Firebug首先要安裝Firefox瀏覽器，現在的版本是3.0，下載地址是：http://www.mozilla.com/en-US/ 。在firefox中安裝Firebug很簡單，打開網頁https://addons.mozilla.org/en-US/firefox/search?q=firebug&cat=all
單擊右上角的 “add to Firefox” 按鈕，便可以安裝。
安裝好後，可以在firefox瀏覽器的菜單欄中“工具”的下拉菜單中看到“firebug” 。
在firebug中，可以爲JavaScript設置斷點，方便調試。