除錯工具Firebug的使用方法

Javascript的除錯，是開發Web應用尤其是AJAX應用很重要的一環，目前對Javascript進行除錯的工具很多，我比較喜歡使用的是Firebug。Firebug是Joe Hewitt開發的一套與Firefox整合在一起的功能強大的web開發工具，可以實時編輯、除錯和監測任何頁面的CSS、HTML和JavaScript。

本文主要是根據Ext JS 3.0的開發過程，介紹下除錯工具FireBug的使用方法。由於本人在開發Web過程，是FireFox表示偏愛，所以主要介紹Firefox+FireBug的詳細使用說明。而且EXT開發者都傾向於使用Firefox進行開發。

Firebug的好處在於，它可以顯示動態生成的DOM，甚至可以在Firebug裡面直接對DOM進行修改，而這些修改會反映到現實上，並且通過Firebug提供的控制檯，可以直接執行Javascript指令碼，也可以配置console.debug、console.info和console.error等日誌方法，以便於跟蹤。

Firebug是Firefox下的一款開發類外掛，現屬於Firefox的五星級強力推薦外掛之一。它集HTML檢視和編輯、Javascript控制檯、網路狀況監視器於一體，是開發JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。這是一款讓人愛不釋手的外掛，如果你以前沒有接觸過它，也許在閱讀本文之後，會有一試的慾望。目前最新版本為Firebug1.4。

一、下載FireFox3.5和Firebug1.4

注意如果你使用Firefox3.0以上的版本，就必須下載Firebug1.2以上的版本，否則不相容。

1、FireFox3.5下載地址(迅雷下載)：

thunder://QUFodHRwOi8vZnRwLnBjb25saW5lLmNvbS5jbi9wdWIvZG93bmxvYWQvMjAwOTA4L0ZpcmVmb3hfU2V0dXBfMy41LjJfY2hzLmV4ZVpa

2、FireBug1.4:

http://releases.mozilla.org/pub/mozilla.org/addons/1843/firebug-1.4.2-fx.xpi

3、安裝

(1) 首先安裝FireFox3.5

(2) 然後雙擊firebug-1.4.2-fx.xpi,選擇開啟方式為FireFox3.5(或者直接拖動到FireFox3.5也可)

(3) 重啟FireFox3.5,在檢視選單中選擇firebug即可檢視,具體展開圖如下圖所示：

圖1

二、Firebug1.4的應用

如上圖所示，我們可以檢視到firebug的Tab按鈕，具體包括:Console,HTML,CSS,Script,DOM,Net

1、Console控制檯

控制檯能夠顯示當前頁面中的javascript錯誤以及警告，並提示出錯的檔案和行號，方便除錯，這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細且具有參考價值。而且在除錯Ajax應用的時候也是特別有用，你能夠在控制檯裡看到每一個XMLHttpRequests請求post出去的引數、URL，http頭以及回饋的內容，原本似乎在幕後黑匣子裡運作的程式被清清楚楚地展示在你面前。

2、Html檢視器

圖2 Html檢視器

 

首先你看到的是已經經過格式化的HTML程式碼，它有清晰的層次，你能夠方便地分辨出每一個標籤之間的從屬並行關係，標籤的摺疊功能能夠幫助你集中精力分析程式碼。原始碼上方還標記出了DOM的層次，如圖3所示，它清楚地列出了一個hml元素的parent、child以及root元素，配合Firebug自帶的CSS檢視器使用，會給div+css頁面分析編寫帶來很大的好處。你還可以在HTML檢視器中直接修改HTML原始碼，並在瀏覽器中第一時間看到修改後的效果，光憑這一點就會讓許多頁面設計師死心塌地地成為Firebug的粉絲了。

 

利用Inspect檢查功能，我們還可以用滑鼠在頁面中直接選擇一些區塊，檢視相應的HTML原始碼和CSS樣式表，真正的做到所見即所得，如果你使用了外部編輯器修改了當前網頁，可以點選Firebug的reload圖片重新載入網頁，它會繼續跟蹤你之前用Inspect選中的區塊，方便除錯。

3、CSS除錯

Firebug的CSS偵錯程式是專為網頁設計師們量身定做的。

一個典型的應用就是頁面中的一個區塊位置顯得有些不太恰當，它需要挪動幾個象素。這時候用CSS除錯工具可以輕易編輯它的位置——你可以根據需要隨意挪動象素。如圖3中正在修改一個區塊的背景色。

圖3

4、視覺化的CSS尺標

我們可以利用Firebug來檢視頁面中某一區塊的CSS樣式表，如果進一步展開右側Layout tab的話，它會以標尺的形式將當前區塊佔用的面積清楚地標識出來，精確到象素，更讓人驚訝的是，你能夠在這個視覺化的介面中直接修改各象素的值，頁面上區塊的位置就會隨改動而變化。在頁面中某些元素出現錯位或者面積超出預料值時，該功能能夠提供有效的幫助，你可以籍此分析offset、margin、padding、size之間的關係，從而找出解決問題的辦法。如圖4所示。

圖4

5、網路狀況監測器

也許有一天，你的老闆或者客戶找到你，抱怨你製作的網頁速度奇慢，你該如何應對？你或許會說這可能是網路問題，或者是電腦配置問題，或者是程式太慢，或者直說是他們的人品問題？不管怎麼說，最後你可能被要求去解決這個有多種可能的問題。

網路狀況監視器能幫你解決這個棘手問題。Firebug的網路監視器同樣是功能強大的，它能將頁面中的CSS、javascript以及網頁中引用的圖片載入所消耗的時間以矩狀圖呈現出來，也許在這裡你能一把揪出拖慢了你的網頁的元凶，進而對網頁進行調優，最後老闆滿意客戶歡喜，你的飯碗也因此而牢固。網路監視器還有一些其它細節功能，比如預覽圖片，檢視每一個外部檔案甚至是xmlHttpRequests請求的http頭等等。具體如圖5所示。 

圖5 網路狀況監測器

6、Javascript偵錯程式

這是一個很不錯的javascript指令碼偵錯程式，佔用空間不大，但是單步除錯、設定斷點、變數檢視視窗一個不少。正所謂麻雀雖小，五臟俱全。如果你有一個網站已經建成，然而它的javascript有效能上的問題或者不是太完美，可以通過皮膚上的Profile來統計每段指令碼執行的時間，檢視到底是哪些語句執行時間過長，一步步排除問題。具體如圖6所示

圖6 Javascript偵錯程式

7、DOM檢視器

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

圖7 DOM檢視器

三、小結

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