WEB開發_Firebug閑談

文章目錄

• 什麼是Firebug
• 應用
• Console 控制台
• HTML查看和修改
• CSS調試
• 可視化的CSS尺標
• 網路狀況監視器
• Javascript調試器
• DOM查看器
• 小結

特別說明：此文轉載，地址為：http://www.21andy.com/blog/20080223/988.html

什麼是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所示。

圖1：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, 最簡單的列印日誌的文法是這樣的：

1. console.log("hello world")

如果你有一堆參數需要組合在一起輸出，可以寫成這樣：

1. 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樣式表，真正的做到所見即所得 (WYSIWYG)，如果你 使用了外部編輯器修改了當前網頁，可以點擊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的網路監視器同樣是功能強大的，它能將頁面中的CSS、javascript以及網頁中引用 的圖片載入所消耗的時間以矩狀圖呈現出來，也許在這裡你能一把揪出拖慢了你的網頁的元兇，進而對網頁進行調優，最後老闆滿意客戶歡喜，你的飯碗也因此而牢 固。

網路監視器還有一些其它細節功能，比如預覽圖片，查看每一個外部檔案甚至是xmlHttpRequests請求的http頭等等。

圖6：網路狀況監視器

Javascript調試器

這是一個很不錯的javascript指令碼調試器，佔用空間不大，但是單步調試、設定斷點、變數查看視窗一個不少。正所謂麻雀雖小，五髒俱全。

如果你有一個網站已經建成，然而它的javascript有效能上的問題或者不是太完美，可以通過面板上的Profile來統計每段指令碼啟動並執行時間，查看到底是哪些語句執行時間過長，一步步排除問題。

圖7：javascript調試器

DOM查看器

DOM(Document Object Model)裡頭包含了大量的Object以及函數、事件，在從前，你要想從中查到需要的內容，絕非易事，這好比你去了一個巨大的圖書館，想要找到幾本名 字不太確切的小書，眾多的選擇會讓你無所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內部結構，協助你快速定位DOM對象。雙擊一個 DOM對象，就能夠編輯它的變數或值，編輯的同時，你可能會發現它還有自動完成功能，當你輸入document.get之後，按下tab鍵就能補齊為 document.getElementById，非常方便。如果你認為補齊得不夠理想，按下shift+tab又會恢複原狀。用了Firebug的
DOM查看器，你的javascript從此找到了驅使的對象，Web開發也許就成了一件樂事。

圖8: Dom查看器

小結

Firebug外掛程式提供了一整套web開發所必需的工具。從HTML的編寫，到CSS樣式表的美化調優，以及用javascript指令碼開發，亦或 是Ajax應用，Firebug外掛程式都會成為你的得力助手。所謂工欲善其事，必先利其器。在Web2.0的時代，言必稱Ajax，動輒就是使用者體驗提升， 如果把Firebug工具用好，必能讓你如虎添翼，將HTML、CSS、javascript整理得服服帖帖，從此成為web開發中的專家級人物。

說明

Firebug的中文含義是螢火蟲，作者是Joe Hewitt，官方網頁 http://www.getfirebug.com
Firefox亦即Firefox瀏覽器，是近年來撼動IE瀏覽器市場佔有率的一支強大力量，要不是它的出現，我想有生之年說不定也看不到IE 7的發布了，官方網頁 http://www.firefox.com