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