liubijin

簡單來說，Firebug是Firefox上用來監視、編輯和調試站點的CSS、HTML、DOM和JavaScript的擴展工具。

我們先到Firebug的主頁上下載最新的版本裝上，下面開始調試：

1、查看、編輯HTML元素及其CSS

安裝好Firebug之后，你可以通過點擊瀏覽器右下方的小蟲子打開Firebug，如圖：

或者直接按F12，如果要以窗口形式打開的話，就按下CTRL+F12

打開Firebug之后，點擊“查看”，然后選擇頁面上任何需要編輯的地方，Firebug會將其選中，并且在HTML結構中將其高亮，如圖：

之后你可以對該元素的HTML結構、屬性進行任意的編輯，修改后的效果都會實時的展現在頁面當中。

同時在Firebug的右側是該元素對應的CSS樣式，如下圖：

圖中的樣式，顯示了該元素被重新定義的樣式繼承關系，比如“繼承自body.CurHome”的“text-align”屬性被“繼承自div.shell”的“text-align”覆蓋，原先的屬性就會以中橫線的形式表示出來。如果要查看所有的屬性，請勾選圖中標“1”的選項。
單擊“2”可以禁用/打開某條CSS屬性；單擊任意一個屬性或者屬性值可以進行CSS的編輯，如“3”；雙擊“4”則可以新建一條CSS屬性。現在我們點擊下“5”來看看CSS布局面板：

上面這幅圖展現的是一個HTML結構的標準盒模型，通過點擊相應的數值可以修改該值，同時在瀏覽器窗口中顯示出對應的效果來。

2、查看動態生成的HTML代碼的方法

通過“查看源代碼”的方法，無法看到由JS動態生成的HTML結構，這里我們可以通過Firebug來查看，如下圖，選中“body”節點，按下“編輯”，即可輸出頁面上源文件的代碼以及動態生成的代碼。

還有另外一種簡單的方法，選中你要查看的頁面元素，然后在右鍵菜單中選擇“查看選中部分源代碼”

3、查看/測試頁面的函數執行效率

查看頁面上所有函數執行效率可以很容易的找到運行最慢的函數，從而幫助WD有針對性的進行頁面的JS優化。如圖，為需要調試的頁面“啟用控制臺”：

點擊“概況”開始收集，再次點擊即可停止，然后進行查看。

在firebug控制臺的最底下是一排命令行，在這里你可以輸入任意JS語句，按下回車鍵即可執行：

使用console，還可以測試一段代碼或者函數的執行時間，點擊命令行最右側的紅色按鈕切換到命令行多行模式：

4、使用Firebug查看XMLHttpRequest

使用Firebug查看XMLHttpRequest，對于調試AJAX是很有幫助的。如圖：

為需要調試的站點開啟“網絡”監控功能，其實該功能可以查看頁面上所有類型的post和get請求，并且還會顯示出請求消耗的時間。對于XMLHttpRequest會有詳細的參數與返回值。

5、查看頁面上所有的CSS與JS

在頁面調試中我們發現，對于外部引用的CSS與JS很難進行調試，使用基于Firebug的Yslow擴展即可解決該問題。首先在Yslow的主頁上下載一個最新的版本裝上：http://developer.yahoo.com/yslow/

在Firebug小蟲子的右邊就是Yslow，后面的數值是當前頁面完全加載所消耗的時間，點擊Yslow即可打開（或者通過Firebug的Yslow面板，運行“Performance”進行頁面分析）。

如上圖，選擇“All JS”后，當前頁面的所有內部JS和外部JS都會被顯示在一個新開的頁面中，這樣查看頁面上所有的JS源代碼就變得方便多了。

6、查看頁面上所有的資源列表

其實前面第四點介紹到的“網絡”功能就可以查看所有資源列表，而且可以通過查看狀態來進行對應的優化（例如排查404元素）。這里可以通過Yslow的components功能看到到包括類型與詳細路徑的資源列表：

鼠標hover可以看到對應的縮略圖，點擊則可在新窗口中打開。更多Yslow功能請查看其主頁。

7、使用Firecookie調試頁面cookie

Firecookie是基于Firebug的cookie調試工具，先到作者的主頁上了解下詳細信息，再下載一個安裝上。
http://www.softwareishard.com/blog/firecookie/
安裝好之后，Firebug中會多出一個“cookie”面板，你可以為需要調試的頁面添加、刪除、修改cookie信息。

Firebug是一款能夠為WD提高效率的調試利器，希望大家都能用上。關于Firebug的更多信息：

• 基于Firebug的firefox擴展
• Firebug視頻教程
• Firebug Console