Firebug介紹及使用技巧

1、介紹

Firebug是網頁瀏覽器Firefox下的一款開發調試工具。安裝firebug後在瀏覽器的插件工具欄中（上方）會有一個小甲蟲的圖標。 F12打開和關閉Firebug窗口。

 

2、FireBug窗口功能：

控制檯：JavaScript命令行操做、顯示JS錯誤信息、提示信息、日誌信息，右側可寫本身的JS命令。
HTML：顯示頁面的HTML源碼。
CSS：編輯頁面的CSS源碼。
腳本：顯示頁面腳本和調試。
DOM：顯示頁面對象和DOM屬性。
網絡：顯示頁面下載和花費時間。
Cookies：顯示頁面請求的Cookies，及查看和修改。

提示

每一個功能標籤能夠經過點擊下拉菜單設置爲「啓用」或「停用」。
小甲蟲能夠設置顯示或不顯示某些功能標籤。
功能標籤右側搜索框能夠進行相應的搜索。

 

3、HTML功能：

定位元素
一、Ctrl+Shift+C 快速定位元素
二、在網頁選中元素，右鍵點擊「使用Firebug查看元素」也能夠定位元素
三、點擊左上第二個圖標，在頁面選擇要定位的元素
四、右上角搜索框能夠輸入要定位的元素
編輯元素
一、雙擊要編輯的html元素
二、選中要編輯的元素右鍵點擊「編輯HTML」
處理css樣式
一、在右側樣式標籤能夠查看元素的樣式。
二、雙擊相應的樣式能夠進行修改。
三、點擊樣式前面的啓用/禁用圖標能夠啓用/禁用樣式。
四、雙擊樣式的結束位置能夠添加一行新樣式。
五、雙擊樣式按delete便可刪除樣式。
六、鼠標上下鍵調整css避屬性數字的大小（Ctrl慢調、Shift快調）。
七、也能夠點擊css樣式地址，在源碼中進行修改。

 

4、網絡功能：

一、分類別的查看下載文件和http請求
二、能夠查看http請示的詳細信息，是否成功、是否緩存、請求參數、響應的結果等
三、監控ajax的請求詳細信息(XHR)

 

5、控制檯功能：

一、利用console向控制檯輸出一些log及其它調試信息，控制檯能夠顯示出這些信息，經常使用consolog函數以下:
console.log();
console.info();
console.dir();
console.debug();
console.warn();
console.error();
console.group();
console.groupEnd();
console.time();
console.timeEnd();
二、在控制檯輸入js代碼，能夠執行輸入的js代碼
三、輸入相應的js代碼內容後點擊"Tab"自動提示

 

6、腳本功能：

一、查看JS代碼，設置斷點（點擊左側行號便可）
二、調試js功能代碼
F8：繼續
F10:單步跳過
F11：單步進入
Shift+F11：單步退出
三、console.trace()能夠知道函數如何被調用。

 

7、其它使用技巧：

一、點擊全部能夠點擊的地方，發現其它功能
二、全部點擊的地方右鍵功能
三、全部下拉菜單功能
四、小甲蟲的菜單功能
五、各處瀏覽器及開發人員工具結合使用