<?XML:NAMESPACE PREFIX = O />
<!--[if !supportLists]-->1、 <!--[endif]-->安裝
Firebug是與Firefox集成的，所以我們首先要安裝的事Firefox瀏覽器。安裝好瀏覽器後，打開瀏覽器，選擇菜單欄上的“工具”菜單，選擇“附加軟件”，在彈出窗口中點擊右下角的“獲取擴展”鏈接。在打開的頁面的search輸入框中輸入“firebug”。等搜索結果出來後點擊Firbug鏈接（圖1-1紅色圈住部分）進入Firebug的下載安裝頁面。
|
<?XML:NAMESPACE PREFIX = V /><!--[if !vml]--> |
|
圖1-1 |
<!--[endif]-->
在頁面中點擊Install Now（圖1-2）按鈕。
|
<!--[if !vml]--> |
|
圖1-2 |
<!--[endif]-->
在彈出窗口（圖1-3）中等待3秒後單擊“立即安裝”按鈕。
|
<!--[if !vml]--> |
|
圖1-3 |
<!--[endif]-->
等待安裝完成後會單擊窗口（圖1-4）中的“重啓 Firefox”按鈕重新啓動Firefox。
|
<!--[if !vml]--> |
|
圖1-4 |
<!--[endif]-->
當Firefox重啓完後我們可以在狀態欄最右邊發現一個灰色圓形圖標（<!--[if !vml]-->
<!--[endif]-->），這就表示Firebug已經安裝好了。灰色圖標表示Firebug未開啓對當前網站的編輯、調試和監測功能。而綠色（<!--[if !vml]-->
<!--[endif]-->）則表示Firebug已開啓對當前網站進行編輯、調試和監測的功能。而紅色圖標（<!--[if !vml]-->
<!--[endif]-->）表示已開啓對當前網站進行編輯、調試和監測的功能，而且檢查到當前頁面有錯誤，當前圖標表示有5個錯誤。
<!--[if !supportLists]-->2、 <!--[endif]-->開啓或關閉Firebug
單擊Firebug的圖標或者按F12鍵你會發現頁面窗口被分成了兩部分，上半部分是瀏覽的頁面，下半部分則是Firebug的控制窗口（圖2-1）。如果你不喜歡這樣，可以按CTRL+F12或在前面操作後單擊右上角的上箭頭按鈕，彈出一個新窗口作爲Firebug的控制窗口。
|
<!--[if !vml]--> |
|
圖2-1 |
<!--[endif]-->
從圖2-1中我們可以看到，因爲我們開啓Firebug的編輯、調試和監測功能，所以目前只有兩個可以選擇的鏈接：“Enable Firebug”與“Enable Firebug for this web site”。如果你想對所有的網站進行編輯、調試和檢測，你可以點擊“Enable Firebug”開啓Firebug，則以後無論瀏覽任何網站，Firebug都處於活動狀態，隨時可以進行編輯、調試和檢測。不過一般的習慣我們只是對自己開發的網站進行編輯、調試和檢測，所以我們只單擊“Enable Firebug for this web site”開啓Firebug就行了。
開啓Firebug窗口（圖2-2）後，我們可以看到窗口主要有兩個區域，一個是功能區，一個是信息區。選擇功能區第二行的不同標籤，信息區的顯示會有不同，Options的選項也會不同，搜索框的搜索方式也會不同。
|
<!--[if !vml]--> |
|
圖2-2 |
<!--[endif]-->
要關閉Firebug控制窗口單擊功能區最右邊的關閉圖標或按F12鍵就行了。如果要關閉Firebug的編輯、調試和監測功能，則需要單擊功能區最左邊的臭蟲圖標，打開主菜單，選擇“Disable Firebug”或“Disable Firebug for xxxxx”。
<!--[if !supportLists]-->3、 <!--[endif]-->Firebug主菜單
單擊功能區最左邊的臭蟲圖標可打開主菜單（圖3-1），其主要功能描述請看錶1。
|
<!--[if !vml]--> |
|
圖3-1 |
<!--[endif]-->
|
菜單選項 |
說明 |
| Disable Firebug |
關閉/開啓Firebug對所有網頁的編輯、調試和檢測功能 |
|
Disable Firebug for xxxxx |
關閉/開啓Firebug對xxxxx網站的編輯、調試和檢測功能 |
|
Allowed Sites |
設置允許編輯、調試和檢測的網站 |
|
Text Size：Increase text size |
增大信息區域顯示文本的字號 |
|
Text Size：Decrease text size |
減少信息區域顯示文本的字號 |
|
Text Size：Normal text size |
信息區域以正常字體顯示 |
|
Options：Always Open in New Window |
設置Firebug控制窗口永遠在新窗口打開 |
|
Show Preview tooltips |
設置是否顯示預覽提示。 |
|
Shade Box Model |
當前查看狀態爲HTML，鼠標在HTML element標籤上移動時，頁面會相應在當前標籤顯示位置顯示一個邊框表示該標籤範圍。這個選項的作用是設置是否用不同顏色背景表示標籤範圍。 |
|
Firebug Website.. |
打開Firebug主頁。 |
|
Documentation.. |
打開Firebug文檔頁。 |
|
Discussion Group |
打開Firebug討論組。 |
|
Contribute |
打開捐助Firebug 頁面。 |
|
表1 | |
<!--[if !supportLists]-->4、 <!--[endif]-->控制檯（Console）
單擊功能區第二欄的“Console”標籤可切換到控制檯（圖4-1）。控制檯的作用是顯示各種錯誤信息（可在Options裏定義），顯示腳本代碼中內嵌的控制檯調試信息，通過命令行對腳本進行調試，通過單擊Profile對腳本進行性能測試。 控制檯分兩個區域，一個是信息區，一個是命令行，通過Options菜單的“Larger Command Line”可改變命令行位置。
|
<!--[if !vml]--> |
|
圖4-1 |
<!--[endif]-->
Options菜單的選項請看錶2。
|
菜單選項 |
說明 |
| Show JavaScript Errors | 顯示腳本錯誤。 |
|
Show JavaScript Warnings |
顯示腳本警告。 |
|
Show CSS Errors |
顯示CSS錯誤。 |
|
Show XML Errors |
顯示XML錯誤。 |
|
Show XMLHttpRequests |
顯示XMLHttpRequests。 |
|
Larger Command Line |
將命令行顯示從控制窗口底部移動右邊，擴大輸入區域。 |
|
表2 | |
單擊“Clear”按鈕可清除控制檯的控制信息。
<!--[if !supportLists]-->5、 <!--[endif]-->頁面源代碼查看功能
單擊功能區第二欄的“HTML”標籤可切換到源代碼查看功能（圖5-1）。雖然Firefox也提供了查看頁面源代碼的功能，但它顯示的只是頁面文件本身的源代碼，通過腳本輸出的HTML源碼是看不到。而Firebug則是所見即所得，是最終的源代碼。
|
<!--[if !vml]--> |
|
圖5-1 |
<!--[endif]-->
我們來看一個例子，文件源代碼如下：
|
<!DOCTYPE HTML PUBLIC "-//W<?XML:NAMESPACE PREFIX = ST1 />3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>簡單的例子</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> #div1{background:red;width:100px;height:100px;} #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;} #div3{background:yellow;width:50px;height:50px;margin-left:25px;} </style> </head> <body scroll="no"> <div id="div1">方塊一</div> <div id="div2">方塊二</div> <script> document.getElementById('div1').innerHTML+='<div id="div3">方塊三</div>'; </script> </body> </html> |
在例子中我們通過JavaScript在“div1”中加入了“div3”，在Firefox中查看源代碼你是看不到“div1”中包含有代碼“<div id="div3">方塊三</div>”的，但是Firebug中我們是可以看見的（圖5-2選中部分）。
|
<!--[if !vml]--> |
|
圖5-2 |
<!--[endif]-->
從圖5-1中我們可以看到，信息區被分成了兩個部分，左邊是顯示源代碼，右邊是一個功能區，可以從這裏查看到HTML Element中的CSS定義、佈局情況和DOM結構。
從圖5-2中我們可以看到，源代碼按DOM結構分層次顯示的，通過層次摺疊功能，我們就可以很方便分析代碼。在功能區的第一行還根據你的選擇，清晰的按子、父、根列出了當前源代碼的層次（圖5-2紅色部分），單擊各部分，則會即刻轉到該部分的源代碼。
|
<!--[if !vml]--> |
|
圖5-3 |
<!--[endif]-->
在源代碼上移動鼠標，頁面就會出現一個半透明的方塊，指示當前鼠標所指源代碼的顯示區域，當選擇。在圖5-4中，鼠標正指向“div1”，而在頁面中“div1”的顯示區域上被一個半透明的方塊遮蓋了。
|
<!--[if !vml]--> |
|
圖5-4 |
<!--[endif]-->如果你把“Inspect”按鈕按下，功能正好相反，在頁面中移動鼠標，則當前顯示區域的源代碼會被加亮顯示出來。在圖5-5中，我們可以看到鼠標指針正指向“方塊二”，而在源代碼中可以看到，“方塊二”的源代碼“<div id="div2">方塊二</div>”已被加亮顯示（紅色部分）。如果你單擊某個顯示區域，則該區域的源代碼會被選中。
|
<!--[if !vml]--> |
|
圖5-5 |
<!--[endif]-->是不是很方便？方便是方便，但是我的源代碼很多，而且有些區域在頁面中不方便鼠標指定，怎麼辦？沒關係，我們還有一個厲害武器，搜索功能。譬如我們知道某個HTML Element的ID是“div2”，但在層層疊疊的源代碼中不好找，在頁面中鼠標也很難找到，那我們就在功能區的搜索框中輸入“div2”，再看看源代碼區域，“div2”被加亮顯示出來了（圖5-6紅色部分）。在這個簡單的例子可能看不出很好的效果，大家可以嘗試一下把“div1”先摺疊起來，然後在搜索框輸入“div3”，你可以看到“div1”會自動展開，並將“div3”加亮顯示，如果還覺得不夠理想，可以找一個源代碼比較多的例子測試一下。
|
<!--[if !vml]--> |
|
圖5-6 |
<!--[endif]-->
除了通過按下“Inspect”按鈕，單擊顯示區域選擇源代碼，我們還可以通過單擊源代碼中的HTML標記（開始或結束標記都可以）來選擇。我們嘗試一下把鼠標移動到HTML標記，會發現鼠標指針變成了手的形狀，這說明我們可以通過單擊選擇該源代碼。選擇源代碼後，我們就可以通過右邊的功能區查看、編輯和調試它的CSS定義和盒子模型（CSS盒子模型請參閱相關說明，這裏就不再贅述了），還有一個很好的功能就是當外部編輯器修改了源代碼（沒有刪除該源代碼，只是修改），我們在瀏覽器重新加載頁面後，選擇的源代碼不會改變，我們可以很方便的觀察源代碼的變化與效果。
有沒有經常爲調試某個頁面效果在源代碼編輯器和瀏覽器之間切換，一次又一次的刷新而感到懊惱？有了Firebug你就不用再懊惱了。你可以直接在源代碼中進行編輯，然後查看效果。如果只是修改已經存在的屬性，例如要修改“div2”的內部文本，則直接將鼠標移動到文本上面，等鼠標指針換成“I”，單擊即可進行編輯了。其它已存在的屬性和屬性值也可以這樣直接進行編輯。如果要爲某Element添加屬性，請將鼠標移動到該Element上，等光標變爲“I”的時候，單擊鼠標右鍵，從菜單中選擇“New Attribute..”，在顯示的編輯框中輸入你要添加的屬性名稱就可以了。
|
<!--[if !vml]--> |
<!--[endif]-->
