安裝好Firebug之后，你可以通過點擊瀏覽器右下方的小蟲子打開Firebug，如圖：
或者直接按F12，如果要以窗口形式打開的話，就按下CTRL+F12
打開Firebug之后，點擊“查看”，然后選擇頁面上任何需要編輯的地方，F(xiàn)irebug會將其選中，并且在HTML結構中將其高亮，如圖：
之后你可以對該元素的HTML結構、屬性進行任意的編輯，修改后的效果都會實時的展現(xiàn)在頁面當中。
同時在Firebug的右側是該元素對應的CSS樣式，如下圖：
圖中的樣式，顯示了該元素被重新定義的樣式繼承關系，比如“繼承自body.CurHome”的“text-align”屬性被“繼承自div.shell”的“text-align”覆蓋，原先的屬性就會以中橫線的形式表示出來。如果要查看所有的屬性，請勾選圖中標“1”的選項。
單擊“2”可以禁用/打開某條CSS屬性；單擊任意一個屬性或者屬性值可以進行CSS的編輯，如“3”；雙擊“4”則可以新建一條CSS屬性?，F(xiàn)在我們點擊下“5”來看看CSS布局面板：
上面這幅圖展現(xiàn)的是一個HTML結構的標準盒模型，通過點擊相應的數值可以修改該值，同時在瀏覽器窗口中顯示出對應的效果來。
通過“查看源代碼”的方法，無法看到由JS動態(tài)生成的HTML結構，這里我們可以通過Firebug來查看，如下圖，選中“body”節(jié)點，按下“編輯”，即可輸出頁面上源文件的代碼以及動態(tài)生成的代碼。
還有另外一種簡單的方法，選中你要查看的頁面元素，然后在右鍵菜單中選擇“查看選中部分源代碼”
查看頁面上所有函數執(zhí)行效率可以很容易的找到運行最慢的函數，從而幫助WD有針對性的進行頁面的JS優(yōu)化。如圖，為需要調試的頁面“啟用控制臺”：
點擊“概況”開始收集，再次點擊即可停止，然后進行查看。
在firebug控制臺的最底下是一排命令行，在這里你可以輸入任意JS語句，按下回車鍵即可執(zhí)行：
使用console，還可以測試一段代碼或者函數的執(zhí)行時間，點擊命令行最右側的紅色按鈕切換到命令行多行模式：
使用Firebug查看XMLHttpRequest，對于調試AJAX是很有幫助的。如圖：
為需要調試的站點開啟“網絡”監(jiān)控功能，其實該功能可以查看頁面上所有類型的post和get請求，并且還會顯示出請求消耗的時間。對于XMLHttpRequest會有詳細的參數與返回值。
在頁面調試中我們發(fā)現(xiàn)，對于外部引用的CSS與JS很難進行調試，使用基于Firebug的Yslow擴展即可解決該問題。首先在Yslow的主頁上下載一個最新的版本裝上：http://developer.yahoo.com/yslow/
在Firebug小蟲子的右邊就是Yslow，后面的數值是當前頁面完全加載所消耗的時間，點擊Yslow即可打開（或者通過Firebug的Yslow面板，運行“Performance”進行頁面分析）。
如上圖，選擇“All JS”后，當前頁面的所有內部JS和外部JS都會被顯示在一個新開的頁面中，這樣查看頁面上所有的JS源代碼就變得方便多了。
其實前面第四點介紹到的“網絡”功能就可以查看所有資源列表，而且可以通過查看狀態(tài)來進行對應的優(yōu)化（例如排查404元素）。這里可以通過Yslow的components功能看到到包括類型與詳細路徑的資源列表：
鼠標hover可以看到對應的縮略圖，點擊則可在新窗口中打開。更多Yslow功能請查看其主頁。
Firecookie是基于Firebug的cookie調試工具，先到作者的主頁上了解下詳細信息，再下載一個安裝上。
http://www.softwareishard.com/blog/firecookie/
安裝好之后，F(xiàn)irebug中會多出一個“cookie”面板，你可以為需要調試的頁面添加、刪除、修改cookie信息。
Firebug是一款能夠為WD提高效率的調試利器，希望大家都能用上。關于Firebug的更多信息：
