Firebug是網(wǎng)頁瀏覽器Firefox下的一款開發(fā)類插件。它集HTML查看和編輯、javascript控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)javascript、CSS,HTML和Ajax的得力助手。
以下是相關(guān)Firebug調(diào)試工具的知識點(diǎn)，希望對讀者們有所幫助：
首先，需要了解如何<a>下載火狐瀏覽器的firebug插件:
（我的火狐版本）
第一種方法
在火狐瀏覽器中，點(diǎn)擊右上角--選擇附加組件
選擇獲取附加組件--選擇查看更多附加組件
在搜索框上搜索Firebug—選擇Firebug右邊的添加到Firefox
右上角出現(xiàn)小蟲標(biāo)志就是安裝成功插件（本人使用的是第一種方法）
第二種方法：
注意：按紅色按鈕是下載Firebug插件；下載完插件后，重新啟動Firefox瀏覽器就可以使用
接著，介紹關(guān)于<a>web調(diào)試工具的一些知識點(diǎn):
說明：安裝好Firebug插件后，如何在Firefox瀏覽器打開和關(guān)閉web調(diào)試工具:
（1）可以按右上角小蟲標(biāo)志
（2）可以按快捷鍵F12
按ctrl+F12鍵打開新的窗口顯示web調(diào)試工具
控制臺：
HTML：
Css:
腳本:
DOM:
網(wǎng)絡(luò)：
Cookies:
注意：點(diǎn)擊左上角小蟲標(biāo)志可以顯示下列框—可見面板（是否勾選—代表在調(diào)試面板里是否顯示此面板)
說明：每對應(yīng)一個面板都有搜索框，如在HTML面板中，可以在搜索框中搜索對應(yīng)的標(biāo)簽屬性（如div），在HTML文件代碼中div標(biāo)簽就會顯示出來（灰色填充色就是）
關(guān)于HTML面板說明：
選中對應(yīng)的元素顯示對應(yīng)的源代碼的方法：
第一種：
說明：選中元素，按鼠標(biāo)右鍵—選擇使用Firebug查看元素（就可以選中對應(yīng)的元素的源代碼）
第二種：
說明：可以點(diǎn)擊左上角小蟲標(biāo)志隔壁那標(biāo)志（點(diǎn)擊查看頁面中的元素)
效果圖:
關(guān)于調(diào)試工具中使用的一些<a>快捷鍵:
說明：點(diǎn)擊右上角的小蟲標(biāo)志—自定義快捷鍵（彈出快捷鍵對話框)
如何編輯HTML文件里的代碼:
第一種方法:
(1)可以選中代碼雙擊
第二種
(1)可以點(diǎn)擊鼠標(biāo)右鍵—選擇編輯HTML…
進(jìn)入到此頁面:
可以在此頁面<a>直接編輯</a>，如圖：在hao123后面加上456，頁面隨之改變
Css面板：
在HTML右側(cè)顯示相對于的樣式
可以雙擊代碼編輯，然后按enter鍵就可以編輯成功
例子
沒改變源代碼：
改變源代碼后：
如何添加和刪除樣式：（可以在css面板中點(diǎn)擊css源代碼編輯）
（也可以在html面板右邊側(cè)顯示的樣式編輯）如果需要添加新的樣式，需要在代碼右邊空白地方雙擊就可以編輯，如圖：
例子：
（添加color樣式）
如何刪除樣式（雙擊需要刪除的樣式，然后按delete鍵刪除就可以）
如何設(shè)置禁用和取消樣式：
當(dāng)鼠標(biāo)移到代碼行上會出現(xiàn)禁用或者取消禁用代碼的標(biāo)志，點(diǎn)擊一下就可以設(shè)置禁用或者取消禁用代碼
如何快速調(diào)整樣式的大小：
(1)
按上下鍵，可以快速調(diào)整大小（以個位遞增）
(2)
按ctrl+上下鍵，可以快速調(diào)整大小（以小數(shù)位調(diào)整）
(3)
<p><strong><em>按shift+上下鍵，可以快速調(diào)整上下鍵（以十位數(shù)調(diào)整）</em></strong></p>
Html面板右側(cè)還有其他面板顯示：
計算出的樣式
布局
DOM
Events
評估頁面下載功能：
可以點(diǎn)擊網(wǎng)絡(luò)面板，如圖:
說明：可以查看全部，也可以單獨(dú)點(diǎn)擊html、css、JavaScript、XHR（即ajax）、圖片、插件、媒體、字體查看（時間線就可以看到時間快慢）
我們可以點(diǎn)擊里面的請求，顯示出此請求的參數(shù)、頭信息、響應(yīng)、緩存,Cookies：
Ajax監(jiān)聽：
在網(wǎng)絡(luò)面板中的XHR（即ajax）：
注意：每輸入一個字母就會觸發(fā)一個事件，因此顯示更多請求
點(diǎn)擊里面的請求，顯示出此請求的參數(shù)、頭信息、響應(yīng)、緩存、Cookies
參數(shù)：是請求get或post中的一些名字或字符
頭信息：是請求和回應(yīng)的頭信息
響應(yīng)：是實際上從服務(wù)器中我們所接收到的信息
(這些功能對于編寫和調(diào)試程序非常的有用)
參數(shù)中的顯示的就是搜索關(guān)鍵字：
JavaScript控制臺
Js文件：
控制臺顯示的信息：
說明：除了console.log(i);外，還有其他三種在控制臺上顯示的信息
控制臺顯示的信息：
可以在控制臺右側(cè)輸入測試代碼來運(yùn)行：
補(bǔ)充：
有整數(shù)、浮點(diǎn)數(shù)、字符串
例子
利用整數(shù)和字符串
分組：
console.group();
運(yùn)行console對象有哪些方法：
測試時間分鐘：
console.time();
JavaScript代碼調(diào)試
腳本面板：
這里可以看到所有代碼：
可以給代碼設(shè)置斷點(diǎn)：
(紅色的小圓圈就是設(shè)置斷點(diǎn))
設(shè)置后如圖：（不在顯示i--）
補(bǔ)充：腳本面板右上角的四個標(biāo)志：
第一個標(biāo)志:是在cookie改變時中斷
第二個標(biāo)志:是單步進(jìn)入
第三個標(biāo)志:是單步跳過（F10）
第四個標(biāo):是單步退出（Shift+F11）
監(jiān)控面板：
說明：可以改變斷點(diǎn)中相應(yīng)的變量（雙擊對應(yīng)值可以修改）
想知道此函數(shù)是如何被調(diào)用，可以在js文件中加上<a>console.trace();</a>
因此，可以在控制臺中看到此函數(shù)被調(diào)到的情況
也可以利用控制臺的概況進(jìn)行查看此函數(shù)調(diào)用的情況
點(diǎn)擊概況查看結(jié)果后
本文作者lilyping
越努力，越幸運(yùn)
原文鏈接：http://www.itdecent.cn/u/3908e601f4ec
微信公眾號：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping
