初識Firebug 全文 — firebug的使用
本文最初發(fā)表《程序員》雜志第三期，現將全文貼上，內容已經(jīng)過(guò)編輯修飾了很多:)
什么是Firebug
從事了數年的Web開(kāi)發(fā)工作，越來(lái)越覺(jué)得現在對WEB開(kāi)發(fā)有了更高的要求。要寫(xiě)出漂亮的HTML代碼；要編寫(xiě)精致的CSS樣式表展示每個(gè)頁(yè)面模塊；要調試javascript給頁(yè)面增加一些更活潑的要素；要使用Ajax給用戶(hù)帶來(lái)更好的體驗。一個(gè)優(yōu)秀的WEB開(kāi)發(fā)人員需要顧及更多層面，才能交出一份同樣優(yōu)秀的作業(yè)。為幫助廣大正處于Web2.0洪流中的開(kāi)發(fā)人員，在這里為大家介紹一款輕巧靈活的輔助開(kāi)發(fā)工具。
Firebug是Firefox下的一款開(kāi)發(fā)類(lèi)插件，現屬于Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制臺、網(wǎng)絡(luò )狀況監視器于一體，是開(kāi)發(fā)JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個(gè)不同的角度剖析Web頁(yè)面內部的細節層面，給Web開(kāi)發(fā)者帶來(lái)很大的便利。這是一款讓人愛(ài)不釋手的插件，如果你以前沒(méi)有接觸過(guò)它，也許在閱讀本文之后，會(huì )有一試的欲望。筆者在撰寫(xiě)此文的時(shí)候，正逢Firebug發(fā)布1.0正式版，這不能不說(shuō)是種巧合。
應用
Firebug插件雖然功能強大，但是它已經(jīng)和Firefox瀏覽器無(wú)縫地結合在一起，使用簡(jiǎn)單直觀(guān)。如果你擔心它會(huì )占用太多的系統資源，也可以方便地啟用/關(guān)閉這個(gè)插件，甚至針對特定的站點(diǎn)開(kāi)啟這個(gè)插件。
在安裝好插件之后，先用Firefox瀏覽器打開(kāi)需要測試的頁(yè)面，然后點(diǎn)擊右下方的綠色按鈕或使用快捷鍵F12喚出Firebug插件，它會(huì )將當前頁(yè)面分成上下兩個(gè)框架，如圖1所示。
圖1：Firebug插件展開(kāi)圖示
從圖1中看到，Firebug有6個(gè)主要的Tab按鈕，下文將主要介紹介紹這幾方面的功能。
| Console | HTML | CSS | Script | Dom | Net |
| 控制臺 | Html查看器 | Css查看器 | 腳本條時(shí)期 | Dom查看器 | 網(wǎng)絡(luò )狀況監視 |
Console 控制臺
控制臺能夠顯示當前頁(yè)面中的javascript錯誤以及警告，并提示出錯的文件和行號，方便調試，這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細且具有參考價(jià)值。而且在調試Ajax應用的時(shí)候也是特別有用，你能夠在控制臺里看到每一個(gè)XMLHttpRequests請求post出去的參數、URL，http頭以及回饋的內容，原本似乎在幕后黑匣子里運作的程序被清清楚楚地展示在你面前。
象C shell或Python shell一樣，你還能在控制臺中查看變量?jì)热?，直接運行javascript語(yǔ)句，就算是大段的javascript程序也能夠正確運行并拿到運行期的信息。
控制臺還有個(gè)重要的作用就是查看腳本的log, 從前你也許習慣了使用alert來(lái)打印變量，但是Firebug給我們帶來(lái)了一個(gè)新朋友 —— console.log, 最簡(jiǎn)單的打印日志的語(yǔ)法是這樣的：
- console.log("hello world")
如果你有一堆參數需要組合在一起輸出，可以寫(xiě)成這樣：
- console.log(2,4,6,8,"foo",bar).
Firebug的日志輸出有多種可選的格式以及語(yǔ)法，甚至可以定制彩色輸出，比起單調的alert，顯然更加方便，限于篇幅，這里不做詳細說(shuō)明，但是有志于提高debug效率的讀者，可以到Firebug的官方站點(diǎn)（見(jiàn)附錄）查看更詳細的教程。
圖2： 在控制臺里調試javascript
查看和修改HTML
第一次看到Firebug強大的HTML代碼查看器，就覺(jué)得它與眾不同，相比于Firefox自帶的HTML查看器，它的功能強大了許多。 HTML
首先你看到的是已經(jīng)經(jīng)過(guò)格式化的HTML代碼，它有清晰的層次，你能夠方便地分辨出每一個(gè)標簽之間的從屬并行關(guān)系，標簽的折疊功能能夠幫助你集中精力分析代碼。源代碼上方還標記出了DOM的層次，如圖3所示，它清楚地列出了一個(gè)hml元素的parent、child以及root元素，配合Firebug自帶的CSS查看器使用，會(huì )給div+css頁(yè)面分析編寫(xiě)帶來(lái)很大的好處。你還可以在HTML查看器中直接修改HTML源代碼，并在瀏覽器中第一時(shí)間看到修改后的效果，光憑這一點(diǎn)就會(huì )讓許多頁(yè)面設計師死心塌地地成為Firebug的粉絲了。
有時(shí)候頁(yè)面中的javascript會(huì )根據用戶(hù)的動(dòng)作如鼠標的onmouseover來(lái)動(dòng)態(tài)改變一些HTML元素的樣式表或背景色，HTML查看器會(huì )將頁(yè)面上改變的內容也抓下來(lái)，并以黃色高亮標記，讓網(wǎng)頁(yè)的暗箱操作徹底成為歷史。
利用Inspect檢查功能，我們還可以用鼠標在頁(yè)面中直接選擇一些區塊，查看相應的HTML源代碼和CSS樣式表，真正的做到所見(jiàn)即所得，如果你使用了外部編輯器修改了當前網(wǎng)頁(yè)，可以點(diǎn)擊Firebug的reload圖片重新載入網(wǎng)頁(yè)，它會(huì )繼續跟蹤你之前用Inspect選中的區塊，方便調試。
圖3:：HTML查看器
CSS調試
Firebug的CSS調試器是專(zhuān)為網(wǎng)頁(yè)設計師們量身定做的。
如今的網(wǎng)頁(yè)設計言必稱(chēng)div+css，如果你是用table套出來(lái)的HTML頁(yè)面，就得按這規矩重構一遍，否則顯得你不夠時(shí)髦！用div做出來(lái)的頁(yè)面的確能精簡(jiǎn)HTML代碼，HTML標簽減肥的結果就是CSS樣式表的編寫(xiě)成了頁(yè)面制作的重頭戲。Firebug的CSS查看器不僅自下向上列出每一個(gè)CSS樣式表的從屬繼承關(guān)系，還列出了每一個(gè)樣式在哪個(gè)樣式文件中定義。你可以在這個(gè)查看器中直接添加、修改、刪除一些CSS樣式表屬性，并在當前頁(yè)面中直接看到修改后的結果。
一個(gè)典型的應用就是頁(yè)面中的一個(gè)區塊位置顯得有些不太恰當，它需要挪動(dòng)幾個(gè)象素。這時(shí)候用CSS調試工具可以輕易編輯它的位置——你可以根據需要隨意挪動(dòng)象素。
如圖4中正在修改一個(gè)區塊的背景色。
提示：如果你正在學(xué)習CSS樣式表的應用，但是總記不住常用的樣式表有哪些值，可以嘗試在CSS調試器中選中一個(gè)樣式表屬性，然后用上下方向鍵來(lái)改變它的值，它會(huì )把可能的值一個(gè)個(gè)遍歷給你看。
圖4: CSS查看器，能夠直接修改樣式表
可視化的CSS尺標
我們可以利用Firebug來(lái)查看頁(yè)面中某一區塊的CSS樣式表，如果進(jìn)一步展開(kāi)右側Layouttab的話(huà)，它會(huì )以標尺的形式將當前區塊占用的面積清楚地標識出來(lái)，精確到象素，更讓人驚訝的是，你能夠在這個(gè)可視化的界面中直接修改各象素的值，頁(yè)面上區塊的位置就會(huì )隨改動(dòng)而變化。在頁(yè)面中某些元素出現錯位或者面積超出預料值時(shí)，該功能能夠提供有效的幫助，你可以籍此分析offset、margin、padding、size之間的關(guān)系，從而找出解決問(wèn)題的辦法。
圖5：Firebug中的CSS標尺
網(wǎng)絡(luò )狀況監視器
也許有一天，你的老板或者客戶(hù)找到你，抱怨你制作的網(wǎng)頁(yè)速度奇慢，你該如何應對？你或許會(huì )說(shuō)這可能是網(wǎng)絡(luò )問(wèn)題，或者是電腦配置問(wèn)題，或者是程序太慢，或者直說(shuō)是他們的人品問(wèn)題？不管怎么說(shuō)，最后你可能被要求去解決這個(gè)有多種可能的問(wèn)題。
網(wǎng)絡(luò )狀況監視器能幫你解決這個(gè)棘手問(wèn)題。Firebug的網(wǎng)絡(luò )監視器同樣是功能強大的，它能將頁(yè)面中的CSS、javascript以及網(wǎng)頁(yè)中引用的圖片載入所消耗的時(shí)間以矩狀圖呈現出來(lái)，也許在這里你能一把揪出拖慢了你的網(wǎng)頁(yè)的元兇，進(jìn)而對網(wǎng)頁(yè)進(jìn)行調優(yōu)，最后老板滿(mǎn)意客戶(hù)歡喜，你的飯碗也因此而牢固。
網(wǎng)絡(luò )監視器還有一些其它細節功能，比如預覽圖片，查看每一個(gè)外部文件甚至是xmlHttpRequests請求的http頭等等。
圖6：網(wǎng)絡(luò )狀況監視器
Javascript調試器
這是一個(gè)很不錯的javascript腳本調試器，占用空間不大，但是單步調試、設置斷點(diǎn)、變量查看窗口一個(gè)不少。正所謂麻雀雖小，五臟俱全。
如果你有一個(gè)網(wǎng)站已經(jīng)建成，然而它的javascript有性能上的問(wèn)題或者不是太完美，可以通過(guò)面板上的Profile來(lái)統計每段腳本運行的時(shí)間，查看到底是哪些語(yǔ)句執行時(shí)間過(guò)長(cháng)，一步步排除問(wèn)題。
圖7：javascript調試器
DOM查看器
DOM(Document ObjectModel)里頭包含了大量的Object以及函數、事件，在從前，你要想從中查到需要的內容，絕非易事，這好比你去了一個(gè)巨大的圖書(shū)館，想要找到幾本名字不太確切的小書(shū)，眾多的選擇會(huì )讓你無(wú)所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內部結構，幫助你快速定位DOM對象。雙擊一個(gè)DOM對象，就能夠編輯它的變量或值，編輯的同時(shí)，你可能會(huì )發(fā)現它還有自動(dòng)完成功能，當你輸入document.get之后，按下tab鍵就能補齊為document.getElementById，非常方便。如果你認為補齊得不夠理想，按下shift+tab又會(huì )恢復原狀。用了Firebug的DOM查看器，你的javascript從此找到了驅使的對象，Web開(kāi)發(fā)也許就成了一件樂(lè )事。
圖8: Dom查看器
小結
Firebug插件提供了一整套web開(kāi)發(fā)所必需的工具。從HTML的編寫(xiě)，到CSS樣式表的美化調優(yōu)，以及用javascript腳本開(kāi)發(fā)，亦或是Ajax應用，Firebug插件都會(huì )成為你的得力助手。所謂工欲善其事，必先利其器。在Web2.0的時(shí)代，言必稱(chēng)Ajax，動(dòng)輒就是用戶(hù)體驗提升，如果把Firebug工具用好，必能讓你如虎添翼，將HTML、CSS、javascript整理得服服帖帖，從此成為web開(kāi)發(fā)中的專(zhuān)家級人物。
附
Firebug的中文含義是螢火蟲(chóng)，作者是Joe Hewitt，官方網(wǎng)頁(yè) http://www.getfirebug.com
Firefox亦即火狐瀏覽器，是近年來(lái)撼動(dòng)IE瀏覽器市場(chǎng)占有率的一支強大力量，要不是它的出現，我想有生之年說(shuō)不定也看不到IE 7的發(fā)布了，官方網(wǎng)頁(yè) http://www.firefox.com
版權聲明：可以任意轉載，轉載時(shí)請務(wù)必以超鏈接形式標明文章原始出處和作者信息及本聲明
