網頁開發好幫手 - Firebug ，簡易使用教程

什麼是Firebug？
Firebug是Firefox的一個附加元件(plug-in)，有著很多強大的功能，特別有助於網頁的開發。

如何安裝Firebug？
先到Firefox的附加元件下載頁，搜尋Firebug就能輕易找到。

安裝完成後，可以於右下角找到一個「曱甴」的圖示，按下就能開啟Firebug的介面。開啟所有項目。(Cookie是另一附加元件的選項 - FireCookie)

開啟完成後，你就可以體驗到Firebug的強大功能了。

Firebug有什麼功能呢？
1 - 網頁瀏覽速度一目了然
先選取「網路」(Net)，每一個HTML Request的大小、存取時間、標頭(Header)甚至回應(Response)的內容也能一覽無遺。讓你可以準備知道要求(Request)是否成功發出，與及能網頁瀏覽時速度的樽頸位置。


2 - 直接執行Javascript指令
選擇「主控台」(Console)，就能看到Firebug的log，當中包括了Javascript的exception與及其他重要資料。同時，在下方可以鍵入你想執行的Javascript指令，方便於瀏覽網頁過程中進行測試。


3 - 觀察網頁內容
先選取「觀察」，再把滑鼠移至網頁內，下面的html原始碼會標亮相應內容，令你能即時知道該部份的原始碼，方便修改。同時，右方的樣式(style)會顯示該部份受影響的css style(包括被override)，令你清楚每個字、每一個table的style是怎樣形成。


4 - 網頁內容即時修改功能
在觀察的過程中，在html原始碼上右鍵，選擇「編輯html」或在原始瑪上連按左鍵，就能對該部份作出修改，效果亦會即時在瀏覽器上出現，當然這不會影響原檔案。

你亦可對樣式(style)進行修改，或是暫時關閉某些樣式的設定，同樣效果也是即時在瀏覽器上出現。


5 - 設立script中斷點
先選擇「Script」，在原始碼左邊點擊來設立中斷點，以後再使用各樣trace功能來debug。


6 - 詳列DOM內容
先選擇「DOM」，就能看到現有網頁內各DOM的情況。


Firebug功能實在非常強大，靈活運用幾乎能解決大部份遇到的frontend編程問題。

還有什麼有關Firebug的資訊？
其實Firebug已經開返了非Firefox使用的版本名叫「Firebug Lite」
http://getfirebug.com/lite.html
另外，你可以安裝其他Firefox元件來加強Firebug的功能，例如：FireCookie，可以讓你即時觀察現處網頁的Cookie與及進行修改。


快來試一試，你就會知道網頁開發並不是什麼難事。