10分鐘學(xué)會(huì)前端調(diào)試?yán)鳌狥ireBug

作者：惟吾德馨‘
原文地址：http://www.cnblogs.com/allenben/p/4757274.html

概述

FireBug是一個(gè)用于網(wǎng)站前端開(kāi)發(fā)的工具，它是FireFox瀏覽器的一個(gè)擴(kuò)展插件。它可以用于調(diào)試JavaScript、查看DOM、分析CSS、監(jiān)控網(wǎng)絡(luò)流量以及進(jìn)行Ajax交互等。它提供了幾乎前端開(kāi)發(fā)需要的全部功能。

官方網(wǎng)站：www.getfirebug.com

如何獲取Firebug？

因?yàn)樗荈irefox瀏覽器的一個(gè)擴(kuò)展插件，所以首先需要下載Firefox瀏覽器。讀者可以訪(fǎng)問(wèn)www.mozilla.com下載并安裝Firefox瀏覽器。安裝完成后用它訪(fǎng)問(wèn)這里

進(jìn)入下圖所示頁(yè)面。點(diǎn)擊"添加到Firefox"，然后點(diǎn)擊"立即安裝"，最后重新啟動(dòng)Firefox瀏覽器即可完成安裝。

主面板

安裝完成之后，在Firefox瀏覽器的地址后方就會(huì)有一個(gè)小蟲(chóng)子的圖標(biāo)。單擊該圖標(biāo)后即可展開(kāi)Firebug的控制臺(tái)，也可以通過(guò)快捷鍵<F12>來(lái)打開(kāi)控制臺(tái)。使用Ctrl+F12快捷鍵可以使Firebug獨(dú)立打開(kāi)一個(gè)窗口而不占用Firefox頁(yè)面底部的空間。

從上圖中可以看出，F(xiàn)irebug包括7個(gè)面板：

  • 控制臺(tái)面板：用于記錄日志、概覽、錯(cuò)誤提示和執(zhí)行命令行，同時(shí)也用于Ajax的調(diào)試；
  • HTML面板：用于查看HTML元素，可以實(shí)時(shí)地編輯HTML和改變CSS樣式，它包括3個(gè)子面板，分別是樣式、布局和DOM面板；
  • CSS面板：用于查看所有頁(yè)面上的CSS文件，可以動(dòng)態(tài)地修改CSS樣式，由于HTML面板中已經(jīng)包含了一個(gè)CSS面板，因此該面板將很少用到；
  • 腳本面板：用于顯示Javascript文件及其所在的頁(yè)面，也可以用來(lái)顯示Javascript的Debug調(diào)試，包含3個(gè)子面板，分別是監(jiān)控、堆棧和斷點(diǎn)；
  • DOM面板：用于顯示頁(yè)面上的所有對(duì)象；
  • 網(wǎng)絡(luò)面板：用于監(jiān)視網(wǎng)絡(luò)活動(dòng)，可以幫助查看一個(gè)頁(yè)面的載入情況，包括文件下載所占用的時(shí)間和文件下載出錯(cuò)等信息，也可以用于監(jiān)視Ajax行為；
  • Cookies面板：用于查看和調(diào)整cookie(需要安裝下文資源中所提到的Firecookie)。

控制臺(tái)面板

1.控制臺(tái)面板概覽此面板可以用于記錄日志，也可以用于輸入腳本的命令行。

2.記錄日志Firebug提供如下幾個(gè)常用的記錄日志的函數(shù)：

  • console.log：簡(jiǎn)單的記錄日志；
  • console.debug：記錄調(diào)試信息，并且附上行號(hào)的超鏈接；
  • console.error：在消息前顯示錯(cuò)誤圖標(biāo)，并且附上行號(hào)的超鏈接；
  • console.info：在消息前顯示消息圖標(biāo)，并且附上行號(hào)的超鏈接；
  • console.warn：在纖細(xì)錢(qián)顯示警告圖標(biāo)，并且附行號(hào)的超鏈接。

在空白的html頁(yè)面中，向<body>標(biāo)簽中加入<script>標(biāo)簽，代碼如下：

<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é)果，以前習(xí)慣了用alert來(lái)調(diào)試程序，然而在Firebug下可以使用console。

3.格式化字符串輸出和多變量輸出

這個(gè)功能類(lèi)似于C語(yǔ)言中的語(yǔ)法，可以在console記錄日志的方法里使用。
%s:字符串　　%d,%i:數(shù)字　　%f:浮點(diǎn)數(shù)　　%o:鏈接對(duì)象
同時(shí)，這幾個(gè)函數(shù)支持多個(gè)變量。代碼如下：

<script type="text/javascript">
  var kid="孩子",count="3",man="Allen";
  var sport1="籃球",sport2="羽毛球",sport3="網(wǎng)球";
  console.log("%d個(gè)%s在玩游戲",count,kid);
  console.log(count,"個(gè)",kid,"在玩游戲");
  console.log("%s擅長(zhǎng)的運(yùn)動(dòng)有：",man,sport1,sport2,sport3);
</script>

運(yùn)行代碼后效果如下圖所示：

Firebug控制臺(tái)還提供了其他功能，例如檢測(cè)函數(shù)執(zhí)行時(shí)間、消息分組、測(cè)試驅(qū)動(dòng)、跟蹤、計(jì)數(shù)以及查看Javascript概況等。更多資料可以訪(fǎng)問(wèn)這里。

4.面板內(nèi)的子菜單

控制臺(tái)面板內(nèi)有一排子菜單，分別是清除、保持、概況、全部等。

“清除”用于清除控制臺(tái)中的內(nèi)容?！氨３帧眲t是把控制臺(tái)中的內(nèi)容保存，即使刷新了依然還存在?！叭俊眲t是顯示全部的信息。后面的“錯(cuò)誤”、“警告”、“消息”、“調(diào)試信息”、“Cookies”菜單則是對(duì)所有進(jìn)行了一個(gè)分類(lèi)。

“概況”菜單用于查看函數(shù)的性能。下面通過(guò)一個(gè)例子來(lái)演示，代碼如下：

<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>

打開(kāi)頁(yè)面，顯示三個(gè)按鈕：

打開(kāi)頁(yè)面后，先啟用Firebug控制臺(tái)面板，然后單擊“概況”菜單，如下圖所示：

從上圖中可以看到，出現(xiàn)了一行字，“概況收集中。再次點(diǎn)擊“概況”查看結(jié)果。”，接著，依次單擊“執(zhí)行循環(huán)1”、“執(zhí)行循環(huán)2”、“執(zhí)行循環(huán)3”三個(gè)按鈕各一次，并再次單擊“概況菜單”，即可看到如下圖所示結(jié)果：

可以看到Firebug顯示出了非常詳細(xì)的報(bào)告。包括每個(gè)函數(shù)的函數(shù)名、調(diào)用次數(shù)、占用時(shí)間的百分比、占用時(shí)間、時(shí)間、平均時(shí)間、最小時(shí)間、最大時(shí)間以及所在的文件的行數(shù)等信息。

5.Ajax調(diào)試

控制臺(tái)面板也可用于Ajax調(diào)試，在一定程度上可以取代網(wǎng)絡(luò)面板。例如我打開(kāi)一個(gè)頁(yè)面，可以在Firebug控制臺(tái)看到本次Ajax的Http請(qǐng)求頭信息和服務(wù)器響應(yīng)頭信息。如下圖，它會(huì)顯示出本次使用的Ajax的GET方法、地址、耗時(shí)以及調(diào)用Ajax請(qǐng)求的代碼行數(shù)。最重要的是有5個(gè)標(biāo)簽，即參數(shù)、頭信息、響應(yīng)、HTML、Cookies.第一個(gè)標(biāo)簽用于查看傳遞給服務(wù)器的參數(shù)；第二個(gè)標(biāo)簽用于查看響應(yīng)頭信息和請(qǐng)求頭信息；第三個(gè)標(biāo)簽用于查看服務(wù)器返回的內(nèi)容；第四個(gè)標(biāo)簽則是查看服務(wù)器返回的HTML結(jié)構(gòu)；第五個(gè)標(biāo)簽用于查看相應(yīng)的Cookies。

如果看不到任何信息的出現(xiàn)，可能是將此功能關(guān)閉了，可以單擊“控制臺(tái)”旁邊的下拉箭頭，將“顯示XMLHttpRequests”前面的勾勾選上即可。

HTML面板

1.查看和修改HTML代碼

Html面板的強(qiáng)大之處就是能查看和修改HTML代碼，而且這些代碼都是經(jīng)過(guò)格式化的。下面以我的一個(gè)瀏覽器主頁(yè)來(lái)做講解。

在HTML控制臺(tái)的左側(cè)可以看到整個(gè)頁(yè)面當(dāng)前的文檔結(jié)構(gòu)，可以通過(guò)單擊“+”來(lái)展開(kāi)。當(dāng)單擊相應(yīng)的元素時(shí)，右側(cè)面板中就會(huì)顯示出當(dāng)前元素的樣式、布局以及DOM信息。而當(dāng)光標(biāo)移動(dòng)到HTML樹(shù)中相應(yīng)元素上時(shí)，上面頁(yè)面中相應(yīng)的元素將會(huì)被高亮顯示。
例如，將光標(biāo)移動(dòng)到一個(gè)<P>標(biāo)簽上，顯示效果如下圖所示：

在頁(yè)面中藍(lán)色部分表示元素本身，紫色表示padding部分，黃色表示margin部分。同時(shí)可以實(shí)時(shí)地添加、修改和刪除HTML節(jié)點(diǎn)以及屬性，如下圖所示。另外，單擊script節(jié)點(diǎn)還可以直接查看腳本，此處的腳本無(wú)論是內(nèi)嵌在HTML中還是外部導(dǎo)入的，都可以查看到。同樣這也適用于<style>標(biāo)簽內(nèi)嵌或者導(dǎo)入的CSS樣式和動(dòng)態(tài)創(chuàng)建HTML代碼。

2.查看(Inspect)

利用查看(Inspect)功能，可以快速地尋找到某個(gè)元素的HTML結(jié)構(gòu)，如圖：

當(dāng)單擊"Inspect"按鈕后，用鼠標(biāo)在網(wǎng)頁(yè)上選中一個(gè)元素時(shí)，元素會(huì)被一個(gè)藍(lán)色的框框住，同時(shí)下面的HTML面板中相應(yīng)的HTML樹(shù)也會(huì)展開(kāi)并且高亮顯示。再次單擊后即可退出該模式，并且底部的HTML樹(shù)也保持在這個(gè)狀態(tài)。通過(guò)這個(gè)功能，可以快速尋找頁(yè)面內(nèi)的元素，調(diào)試和查找相應(yīng)代碼非常方便。刷新網(wǎng)頁(yè)后，頁(yè)面顯示的仍然是用Inspect選中的區(qū)域。

HTML面板下方的“編輯”按鈕可以用于直接編輯選中的HTML代碼，而后面顯示的是當(dāng)前元素在整個(gè)DOM中的結(jié)構(gòu)路徑。

3.查看DOM中被腳本更改的部分

通過(guò)JavaScript來(lái)改變樣式屬性的值可以完成一些動(dòng)畫(huà)效果。打開(kāi)頁(yè)面后，利用查看(Inspect)功能來(lái)選擇相應(yīng)的HTML代碼，例如，選中“要聞”，如下圖所示：

單擊“國(guó)內(nèi)”標(biāo)簽后，出現(xiàn)下圖所示效果：

通過(guò)上圖可以看出，HTML查看器會(huì)將頁(yè)面上改變的內(nèi)容頁(yè)記錄下來(lái)，并以黃色高亮表示。有了這個(gè)功能，網(wǎng)頁(yè)的暗箱操作將徹底成為歷史。我們可以使用該功能查看其它網(wǎng)站的動(dòng)畫(huà)效果是如何實(shí)現(xiàn)的。

4.查看和修改元素的樣式

在右側(cè)的樣式面板中，展示了此元素當(dāng)前所有的樣式。所有的樣式都可以實(shí)時(shí)地禁用和修改，如下圖所示，通過(guò)在"text-align:center"前單擊會(huì)出現(xiàn)禁用的標(biāo)記，這樣就可以禁用此規(guī)則。通過(guò)直接在樣式value值上單擊就可以修改。

單擊“布局”面板即可看到此元素具體的布局屬性，這是一個(gè)標(biāo)準(zhǔn)的盒模型。通過(guò)“布局”面板，可以很容易地看到元素的偏移量、外邊距、邊框、內(nèi)邊距和元素的高度、寬度等信息，如下圖所示：

5.查看DOM的信息

單擊“DOM”面板后可以看到此元素的詳細(xì)的DOM信息以及函數(shù)和事件，如下圖所示：

CSS、DOM和網(wǎng)絡(luò)面板

這3個(gè)面板相對(duì)于前面2個(gè)面板比較次要，CSS和DOM面板與HTML面板中右側(cè)的面板功能相似，但不如HTML面板靈活，因此一般使用得很少。

CSS面板特有的一個(gè)功能就是可以分別詳細(xì)查看頁(yè)面中內(nèi)嵌以及動(dòng)態(tài)導(dǎo)入的樣式。如下圖所示：

單擊CSS面板后就可以分別查看相應(yīng)的樣式。此處展開(kāi)的樣式都是經(jīng)過(guò)格式化的，適合于學(xué)習(xí)CSS的代碼格式和規(guī)范。

而在網(wǎng)絡(luò)面板中，相對(duì)有一些強(qiáng)大的功能，例如打開(kāi)某個(gè)網(wǎng)站首頁(yè)，F(xiàn)irebug顯示效果如下圖所示：

該頁(yè)面可以監(jiān)視每一項(xiàng)元素的加載情況，包括腳本，圖片等的大小以及加載用時(shí)等，對(duì)于頁(yè)面優(yōu)化有著極其重要的意義。

此外，頂部還可以分類(lèi)查看元素的HTML、CSS、JS等的加載情況，使分析更加靈活。

腳本面板

腳本面板不僅可以查看頁(yè)面內(nèi)的腳本，而且還有強(qiáng)大的調(diào)試功能。

在腳本面板的右側(cè)有“監(jiān)控”、“堆?！焙汀皵帱c(diǎn)”三個(gè)面板，利用Firebug提供的設(shè)置斷掉的功能，可以很方便地調(diào)試程序，如下圖所示：

1.靜態(tài)斷點(diǎn)
例如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>

運(yùn)行代碼后可以看到下圖所示效果。圖中加粗并有顏色的行號(hào)表示此處為JavaScript代碼，可以在此處設(shè)置斷點(diǎn)。比如在第6行這句代碼前面單擊一下，那它前面就會(huì)出現(xiàn)一個(gè)紅褐色的圓點(diǎn)，表示此處已經(jīng)被設(shè)置了斷點(diǎn)。此時(shí)，在右側(cè)斷點(diǎn)面板的斷點(diǎn)列表中就出現(xiàn)了剛才設(shè)置的斷點(diǎn)。如果想暫時(shí)禁用某個(gè)斷點(diǎn)，可以在斷點(diǎn)列表中去掉某個(gè)斷點(diǎn)的前面的復(fù)選框中的勾，那么此時(shí)左側(cè)面板中相應(yīng)的斷點(diǎn)就從紅褐色變成了紅灰褐色了。

設(shè)置完斷點(diǎn)之后，我們就可以調(diào)試程序了。單擊頁(yè)面中的“Click Here”按鈕，可以看到腳本停止在用談黃色底色標(biāo)出的那一行上。此時(shí)用鼠標(biāo)移動(dòng)到某個(gè)變量上即可顯示此時(shí)這個(gè)變量的value。顯示效果如下：

此時(shí)JavaScript內(nèi)容上方的四個(gè)按鈕已經(jīng)變得可用了。它們分別代表“繼續(xù)執(zhí)行”、“單步進(jìn)入”、“單步跳過(guò)”和“單步退出”。

  • 繼續(xù)執(zhí)行<F8>：當(dāng)通過(guò)斷點(diǎn)來(lái)停止執(zhí)行腳本時(shí)，單擊<F8>就會(huì)恢復(fù)執(zhí)行腳本。
  • 單步進(jìn)入<F11>：允許跳到頁(yè)面中的其他函數(shù)內(nèi)部。
  • 單步跳過(guò)<F10>：單擊<F10>來(lái)直接跳過(guò)函數(shù)的調(diào)用即跳到return之后。
  • 單步退出<shift+F11>：允許恢復(fù)腳本的執(zhí)行，直到下一個(gè)斷點(diǎn)為止。

單擊“單步進(jìn)入”按鈕，代碼會(huì)跳到下一行，顯示效果如下：

從上圖可以看出，當(dāng)鼠標(biāo)移動(dòng)到“l(fā)ab”變量上時(shí)，就可以顯示出它的內(nèi)容是一個(gè)DOM元素，即“div#messageLabel”。

此時(shí)將右側(cè)面板切換到“監(jiān)控”面板，這里列出了幾個(gè)變量，包括“this”指針的指向以及“lab”變量。單擊“+”可以看到詳細(xì)的信息。顯示如下：

2.條件斷點(diǎn)

在“lab.innerHTML+=arr+"<br />"”這行代碼前面的序號(hào)上單擊鼠標(biāo)右鍵，就可以出現(xiàn)設(shè)置條件斷點(diǎn)的輸入框。在該框內(nèi)輸入“arr==5”，然后回車(chē)確認(rèn)，顯示效果如下：

最后單擊頁(yè)面的“Click Here”按鈕?？梢园l(fā)現(xiàn)，腳本在“arr==5”這個(gè)表達(dá)式為真時(shí)停下了，因此“5
”以及之后的數(shù)字沒(méi)有顯示到頁(yè)面中。下圖分別是正常效果和設(shè)置了條件斷點(diǎn)之后的顯示效果對(duì)比：

資源

快捷鍵：按<F12>可以快速開(kāi)啟Firebug，如果想獲取完整的快捷鍵列表，可以訪(fǎng)問(wèn)這里。

問(wèn)題：如果安裝過(guò)程中遇到了困難，可以查看Firebug的Q&A

Firebug插件： Firebug除了本身強(qiáng)大的功能之外，還有基于Firebug的插件，它們用于擴(kuò)充Firebug的功能。比如Google公司開(kāi)發(fā)Page Speed插件，開(kāi)發(fā)人員可以使用它來(lái)評(píng)估他們網(wǎng)頁(yè)的性能，并獲得有關(guān)如何改進(jìn)性能的建議。Yahoo公司開(kāi)發(fā)的用于檢測(cè)頁(yè)面整體性能的YSlow和用于調(diào)試PHP的FirePHP。還有用于調(diào)試Cookie的Firecookie等。

總結(jié)

通過(guò)本文的學(xué)習(xí)，讀者可以掌握Firebug的基本功能。Firebug已經(jīng)逐漸成為一個(gè)調(diào)試平臺(tái)，而不僅僅是一個(gè)簡(jiǎn)單的Firefox擴(kuò)展插件。學(xué)好Firebug能給以后的學(xué)習(xí)和工作提供一定的幫助。

參考文獻(xiàn)：《鋒利的JQuery(第2版)》

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在做前端開(kāi)發(fā)時(shí)，我們需要用到一些調(diào)試工具用來(lái)調(diào)試我們的HTML、CSS或者JS代碼，俗話(huà)說(shuō)預(yù)先善其事必先利其器，這...
    Rella7閱讀 24,295評(píng)論 0贊 15
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,008評(píng)論 25贊 709
  • 本文出自《React Native學(xué)習(xí)筆記》系列文章。 在做React Native開(kāi)發(fā)時(shí)，少不了的需要對(duì)Reac...
    CrazyCodeBoy閱讀 14,712評(píng)論 6贊 42
  • 我覺(jué)得溝通最可怕的事就是我在說(shuō)而對(duì)方根本不知道你在說(shuō)什么。 難道是焦慮讓我語(yǔ)無(wú)倫次？ 我想告訴你的就是：我已經(jīng)非常...
    ACTIONCLUB知行樂(lè)閱讀 209評(píng)論 4贊 1
  • 動(dòng)物園的野獸缺少了一種野性。春秋戰(zhàn)國(guó)時(shí)期的秦國(guó)由于個(gè)性狂野，在加上經(jīng)過(guò)商鞅變法之后，不分貴賤獎(jiǎng)勵(lì)軍功加官進(jìn)爵，導(dǎo)...
    羅雨軒閱讀 715評(píng)論 2贊 1

友情鏈接更多精彩內(nèi)容