作者：惟吾德馨‘
原文地址：http://www.cnblogs.com/allenben/p/4757274.html
概述
FireBug是一個用于網(wǎng)站前端開發(fā)的工具，它是FireFox瀏覽器的一個擴展插件。它可以用于調(diào)試JavaScript、查看DOM、分析CSS福侈、監(jiān)控網(wǎng)絡(luò)流量以及進行Ajax交互等。它提供了幾乎前端開發(fā)需要的全部功能戳葵。
官方網(wǎng)站：www.getfirebug.com
如何獲取Firebug邻梆？
因為它是Firefox瀏覽器的一個擴展插件，所以首先需要下載Firefox瀏覽器。讀者可以訪問www.mozilla.com下載并安裝Firefox瀏覽器。安裝完成后用它訪問這里
進入下圖所示頁面。點擊"添加到Firefox"郁惜，然后點擊"立即安裝"，最后重新啟動Firefox瀏覽器即可完成安裝包蓝。
主面板
安裝完成之后绳泉，在Firefox瀏覽器的地址后方就會有一個小蟲子的圖標四苇。單擊該圖標后即可展開Firebug的控制臺，也可以通過快捷鍵<F12>來打開控制臺苫纤。使用Ctrl+F12快捷鍵可以使Firebug獨立打開一個窗口而不占用Firefox頁面底部的空間。
從上圖中可以看出祝高，F(xiàn)irebug包括7個面板：
- 控制臺面板：用于記錄日志恭金、概覽、錯誤提示和執(zhí)行命令行褂策，同時也用于Ajax的調(diào)試横腿；
- HTML面板：用于查看HTML元素，可以實時地編輯HTML和改變CSS樣式斤寂，它包括3個子面板耿焊，分別是樣式、布局和DOM面板遍搞；
- CSS面板：用于查看所有頁面上的CSS文件罗侯，可以動態(tài)地修改CSS樣式，由于HTML面板中已經(jīng)包含了一個CSS面板溪猿，因此該面板將很少用到钩杰；
- 腳本面板：用于顯示Javascript文件及其所在的頁面，也可以用來顯示Javascript的Debug調(diào)試诊县，包含3個子面板讲弄，分別是監(jiān)控、堆棧和斷點依痊；
- DOM面板：用于顯示頁面上的所有對象避除；
- 網(wǎng)絡(luò)面板：用于監(jiān)視網(wǎng)絡(luò)活動，可以幫助查看一個頁面的載入情況胸嘁，包括文件下載所占用的時間和文件下載出錯等信息瓶摆，也可以用于監(jiān)視Ajax行為；
- Cookies面板：用于查看和調(diào)整cookie(需要安裝下文資源中所提到的Firecookie)性宏。
控制臺面板
1.控制臺面板概覽此面板可以用于記錄日志群井，也可以用于輸入腳本的命令行。
2.記錄日志Firebug提供如下幾個常用的記錄日志的函數(shù)：
-
console.log：簡單的記錄日志毫胜； -
console.debug：記錄調(diào)試信息书斜，并且附上行號的超鏈接诬辈； -
console.error：在消息前顯示錯誤圖標，并且附上行號的超鏈接菩佑； -
console.info：在消息前顯示消息圖標，并且附上行號的超鏈接凝化； -
console.warn：在纖細錢顯示警告圖標稍坯，并且附行號的超鏈接。
在空白的html頁面中搓劫，向<body>標簽中加入<script>標簽瞧哟，代碼如下：
<script type="text/javascript">
console.log('this is log message');
console.debug('this is debug message');
console.error('this is error message');
console.info('this is info message');
console.warn('this is warn message');
</script>
執(zhí)行代碼后可以在Firebug中看到下圖所示的結(jié)果，以前習慣了用alert來調(diào)試程序枪向，然而在Firebug下可以使用console勤揩。
3.格式化字符串輸出和多變量輸出
這個功能類似于C語言中的語法，可以在console記錄日志的方法里使用秘蛔。
%s:字符串 %d,%i:數(shù)字 %f:浮點數(shù) %o:鏈接對象
同時陨亡，這幾個函數(shù)支持多個變量。代碼如下：
<script type="text/javascript">
var kid="孩子",count="3",man="Allen";
var sport1="籃球",sport2="羽毛球",sport3="網(wǎng)球";
console.log("%d個%s在玩游戲",count,kid);
console.log(count,"個",kid,"在玩游戲");
console.log("%s擅長的運動有：",man,sport1,sport2,sport3);
</script>
運行代碼后效果如下圖所示：
Firebug控制臺還提供了其他功能深员，例如檢測函數(shù)執(zhí)行時間负蠕、消息分組、測試驅(qū)動倦畅、跟蹤遮糖、計數(shù)以及查看Javascript概況等。更多資料可以訪問這里叠赐。
4.面板內(nèi)的子菜單
控制臺面板內(nèi)有一排子菜單欲账，分別是清除、保持芭概、概況赛不、全部等。
“清除”用于清除控制臺中的內(nèi)容罢洲《砩荆“保持”則是把控制臺中的內(nèi)容保存，即使刷新了依然還存在奏路〕胍“全部”則是顯示全部的信息。后面的“錯誤”鸽粉、“警告”斜脂、“消息”、“調(diào)試信息”触机、“Cookies”菜單則是對所有進行了一個分類帚戳。
“概況”菜單用于查看函數(shù)的性能玷或。下面通過一個例子來演示，代碼如下：
<button type="button" id="btn1">執(zhí)行循環(huán)1</button>
<button type="button" id="btn2">執(zhí)行循環(huán)2</button>
<button type="button" id="btn3">執(zhí)行循環(huán)3</button>
<script type="text/javascript">
var f1=function(){
for(var i =0;i<1000;i++)
for(var j=0;j<1000;j++);
}
function f2(){
for(var i =0;i<1000;i++)
for(var j=0;j<1000;j++);
}
document.getElementById("btn1").onclick=f1;
document.getElementById("btn2").onclick=f2;
document.getElementById("btn3").onclick=function(){
for(var i =0;i<1000;i++)
for(var j=0;j<1000;j++);
}
</script>
打開頁面片任，顯示三個按鈕：
打開頁面后偏友，先啟用Firebug控制臺面板，然后單擊“概況”菜單对供，如下圖所示：
從上圖中可以看到位他，出現(xiàn)了一行字，“概況收集中产场。再次點擊“概況”查看結(jié)果鹅髓。”京景，接著窿冯，依次單擊“執(zhí)行循環(huán)1”、“執(zhí)行循環(huán)2”确徙、“執(zhí)行循環(huán)3”三個按鈕各一次醒串，并再次單擊“概況菜單”，即可看到如下圖所示結(jié)果：
可以看到Firebug顯示出了非常詳細的報告鄙皇。包括每個函數(shù)的函數(shù)名厦凤、調(diào)用次數(shù)、占用時間的百分比育苟、占用時間较鼓、時間、平均時間违柏、最小時間博烂、最大時間以及所在的文件的行數(shù)等信息。
5.Ajax調(diào)試
控制臺面板也可用于Ajax調(diào)試漱竖，在一定程度上可以取代網(wǎng)絡(luò)面板禽篱。例如我打開一個頁面，可以在Firebug控制臺看到本次Ajax的Http請求頭信息和服務(wù)器響應(yīng)頭信息馍惹。如下圖躺率，它會顯示出本次使用的Ajax的GET方法、地址万矾、耗時以及調(diào)用Ajax請求的代碼行數(shù)悼吱。最重要的是有5個標簽，即參數(shù)良狈、頭信息后添、響應(yīng)、HTML薪丁、Cookies.第一個標簽用于查看傳遞給服務(wù)器的參數(shù)遇西；第二個標簽用于查看響應(yīng)頭信息和請求頭信息馅精；第三個標簽用于查看服務(wù)器返回的內(nèi)容；第四個標簽則是查看服務(wù)器返回的HTML結(jié)構(gòu)粱檀；第五個標簽用于查看相應(yīng)的Cookies洲敢。
如果看不到任何信息的出現(xiàn)，可能是將此功能關(guān)閉了茄蚯，可以單擊“控制臺”旁邊的下拉箭頭压彭，將“顯示XMLHttpRequests”前面的勾勾選上即可。
HTML面板
1.查看和修改HTML代碼
Html面板的強大之處就是能查看和修改HTML代碼第队，而且這些代碼都是經(jīng)過格式化的哮塞。下面以我的一個瀏覽器主頁來做講解刨秆。
在HTML控制臺的左側(cè)可以看到整個頁面當前的文檔結(jié)構(gòu)凳谦，可以通過單擊“+”來展開。當單擊相應(yīng)的元素時衡未，右側(cè)面板中就會顯示出當前元素的樣式尸执、布局以及DOM信息。而當光標移動到HTML樹中相應(yīng)元素上時缓醋，上面頁面中相應(yīng)的元素將會被高亮顯示如失。
例如，將光標移動到一個<P>標簽上送粱，顯示效果如下圖所示：
在頁面中藍色部分表示元素本身褪贵，紫色表示padding部分，黃色表示margin部分抗俄。同時可以實時地添加脆丁、修改和刪除HTML節(jié)點以及屬性，如下圖所示动雹。另外槽卫，單擊script節(jié)點還可以直接查看腳本，此處的腳本無論是內(nèi)嵌在HTML中還是外部導入的胰蝠，都可以查看到歼培。同樣這也適用于<style>標簽內(nèi)嵌或者導入的CSS樣式和動態(tài)創(chuàng)建HTML代碼。
2.查看(Inspect)
利用查看(Inspect)功能茸塞，可以快速地尋找到某個元素的HTML結(jié)構(gòu)躲庄，如圖：
當單擊"Inspect"按鈕后，用鼠標在網(wǎng)頁上選中一個元素時钾虐，元素會被一個藍色的框框住读跷，同時下面的HTML面板中相應(yīng)的HTML樹也會展開并且高亮顯示。再次單擊后即可退出該模式禾唁，并且底部的HTML樹也保持在這個狀態(tài)效览。通過這個功能无切，可以快速尋找頁面內(nèi)的元素，調(diào)試和查找相應(yīng)代碼非常方便丐枉。刷新網(wǎng)頁后哆键，頁面顯示的仍然是用Inspect選中的區(qū)域。
HTML面板下方的“編輯”按鈕可以用于直接編輯選中的HTML代碼瘦锹，而后面顯示的是當前元素在整個DOM中的結(jié)構(gòu)路徑籍嘹。
3.查看DOM中被腳本更改的部分
通過JavaScript來改變樣式屬性的值可以完成一些動畫效果。打開頁面后弯院，利用查看(Inspect)功能來選擇相應(yīng)的HTML代碼辱士，例如，選中“要聞”听绳，如下圖所示：
單擊“國內(nèi)”標簽后颂碘，出現(xiàn)下圖所示效果：
通過上圖可以看出，HTML查看器會將頁面上改變的內(nèi)容頁記錄下來椅挣，并以黃色高亮表示头岔。有了這個功能，網(wǎng)頁的暗箱操作將徹底成為歷史鼠证。我們可以使用該功能查看其它網(wǎng)站的動畫效果是如何實現(xiàn)的峡竣。
4.查看和修改元素的樣式
在右側(cè)的樣式面板中，展示了此元素當前所有的樣式量九。所有的樣式都可以實時地禁用和修改适掰，如下圖所示，通過在"text-align:center"前單擊會出現(xiàn)禁用的標記荠列，這樣就可以禁用此規(guī)則类浪。通過直接在樣式value值上單擊就可以修改。
單擊“布局”面板即可看到此元素具體的布局屬性弯予，這是一個標準的盒模型戚宦。通過“布局”面板，可以很容易地看到元素的偏移量锈嫩、外邊距受楼、邊框、內(nèi)邊距和元素的高度呼寸、寬度等信息艳汽，如下圖所示：
5.查看DOM的信息
單擊“DOM”面板后可以看到此元素的詳細的DOM信息以及函數(shù)和事件，如下圖所示：
CSS对雪、DOM和網(wǎng)絡(luò)面板
這3個面板相對于前面2個面板比較次要河狐，CSS和DOM面板與HTML面板中右側(cè)的面板功能相似，但不如HTML面板靈活，因此一般使用得很少馋艺。
CSS面板特有的一個功能就是可以分別詳細查看頁面中內(nèi)嵌以及動態(tài)導入的樣式栅干。如下圖所示：
單擊CSS面板后就可以分別查看相應(yīng)的樣式。此處展開的樣式都是經(jīng)過格式化的捐祠，適合于學習CSS的代碼格式和規(guī)范碱鳞。
而在網(wǎng)絡(luò)面板中，相對有一些強大的功能踱蛀，例如打開某個網(wǎng)站首頁窿给，F(xiàn)irebug顯示效果如下圖所示：
該頁面可以監(jiān)視每一項元素的加載情況，包括腳本率拒，圖片等的大小以及加載用時等崩泡，對于頁面優(yōu)化有著極其重要的意義。
此外猬膨，頂部還可以分類查看元素的HTML角撞、CSS、JS等的加載情況寥掐，使分析更加靈活靴寂。
腳本面板
腳本面板不僅可以查看頁面內(nèi)的腳本磷蜀，而且還有強大的調(diào)試功能召耘。
在腳本面板的右側(cè)有“監(jiān)控”、“堆椇致。”和“斷點”三個面板污它，利用Firebug提供的設(shè)置斷掉的功能，可以很方便地調(diào)試程序庶弃，如下圖所示：
1.靜態(tài)斷點
例如test.html文件衫贬，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function doSomething(){
var lab = document.getElementById('messageLabel');
arrs=[1,2,3,4,5,6,7,8,9];
for(var arr in arrs){
lab.innerHTML+=arr+"<br />"
}
}
</script>
</head>
<body>
<div>
<div id="messageLabel"></div>
<input type="button" value="Click Here" onClick="doSomething();"/>
</div>
</body>
</html>
運行代碼后可以看到下圖所示效果。圖中加粗并有顏色的行號表示此處為JavaScript代碼歇攻，可以在此處設(shè)置斷點固惯。比如在第6行這句代碼前面單擊一下，那它前面就會出現(xiàn)一個紅褐色的圓點缴守，表示此處已經(jīng)被設(shè)置了斷點葬毫。此時，在右側(cè)斷點面板的斷點列表中就出現(xiàn)了剛才設(shè)置的斷點屡穗。如果想暫時禁用某個斷點贴捡，可以在斷點列表中去掉某個斷點的前面的復選框中的勾，那么此時左側(cè)面板中相應(yīng)的斷點就從紅褐色變成了紅灰褐色了村砂。
設(shè)置完斷點之后烂斋，我們就可以調(diào)試程序了。單擊頁面中的“Click Here”按鈕，可以看到腳本停止在用談黃色底色標出的那一行上汛骂。此時用鼠標移動到某個變量上即可顯示此時這個變量的value罕模。顯示效果如下：
此時JavaScript內(nèi)容上方的四個按鈕已經(jīng)變得可用了。它們分別代表“繼續(xù)執(zhí)行”帘瞭、“單步進入”手销、“單步跳過”和“單步退出”。
-
繼續(xù)執(zhí)行
<F8>：當通過斷點來停止執(zhí)行腳本時图张，單擊<F8>就會恢復執(zhí)行腳本锋拖。 -
單步進入
<F11>：允許跳到頁面中的其他函數(shù)內(nèi)部。 -
單步跳過
<F10>：單擊<F10>來直接跳過函數(shù)的調(diào)用即跳到return之后祸轮。 -
單步退出
<shift+F11>：允許恢復腳本的執(zhí)行兽埃，直到下一個斷點為止。
單擊“單步進入”按鈕适袜，代碼會跳到下一行柄错，顯示效果如下：
從上圖可以看出，當鼠標移動到“l(fā)ab”變量上時苦酱，就可以顯示出它的內(nèi)容是一個DOM元素售貌，即“div#messageLabel”。
此時將右側(cè)面板切換到“監(jiān)控”面板疫萤，這里列出了幾個變量颂跨，包括“this”指針的指向以及“lab”變量。單擊“+”可以看到詳細的信息扯饶。顯示如下：
2.條件斷點
在“lab.innerHTML+=arr+"<br />"”這行代碼前面的序號上單擊鼠標右鍵恒削，就可以出現(xiàn)設(shè)置條件斷點的輸入框。在該框內(nèi)輸入“arr==5”尾序，然后回車確認钓丰，顯示效果如下：
最后單擊頁面的“Click Here”按鈕∶勘遥可以發(fā)現(xiàn)携丁，腳本在“arr==5”這個表達式為真時停下了，因此“5
”以及之后的數(shù)字沒有顯示到頁面中兰怠。下圖分別是正常效果和設(shè)置了條件斷點之后的顯示效果對比：
資源
快捷鍵：按<F12>可以快速開啟Firebug梦鉴，如果想獲取完整的快捷鍵列表，可以訪問這里痕慢。
問題：如果安裝過程中遇到了困難尚揣，可以查看Firebug的Q&A
Firebug插件： Firebug除了本身強大的功能之外，還有基于Firebug的插件掖举，它們用于擴充Firebug的功能快骗。比如Google公司開發(fā)Page Speed插件，開發(fā)人員可以使用它來評估他們網(wǎng)頁的性能，并獲得有關(guān)如何改進性能的建議方篮。Yahoo公司開發(fā)的用于檢測頁面整體性能的YSlow和用于調(diào)試PHP的FirePHP名秀。還有用于調(diào)試Cookie的Firecookie等。
總結(jié)
通過本文的學習藕溅，讀者可以掌握Firebug的基本功能匕得。Firebug已經(jīng)逐漸成為一個調(diào)試平臺，而不僅僅是一個簡單的Firefox擴展插件巾表。學好Firebug能給以后的學習和工作提供一定的幫助汁掠。
參考文獻：《鋒利的JQuery(第2版)》
