本文主要是為初學(xué)者介紹一下Firebug的基本功能與如何使用Firebug。由于本人水平與能力有限，在文章中的可能會有很多錯誤與遺漏，希望大家能諒解和指正！

<!--[if !supportLists]-->1、  <!--[endif]-->安裝

Firebug是與Firefox集成的，所以我們首先要安裝的事Firefox瀏覽器。安裝好瀏覽器后，打開瀏覽器，選擇菜單欄上的“工具”菜單，選擇“附加軟件”，在彈出窗口中點擊右下角的“獲取擴(kuò)展”鏈接。在打開的頁面的search輸入框中輸入“firebug”。等搜索結(jié)果出來后點擊Firbug鏈接（圖1-1紅色圈住部分）進(jìn)入Firebug的下載安裝頁面。

在頁面中點擊Install Now（圖1-2）按鈕。

在彈出窗口（圖1-3）中等待3秒后單擊“立即安裝”按鈕。

等待安裝完成后會單擊窗口（圖1-4）中的“重啟 Firefox”按鈕重新啟動Firefox。

當(dāng)Firefox重啟完后我們可以在狀態(tài)欄最右邊發(fā)現(xiàn)一個灰色圓形圖標(biāo)（<!--[if !vml]--><!--[endif]-->），這就表示Firebug已經(jīng)安裝好了?；疑珗D標(biāo)表示Firebug未開啟對當(dāng)前網(wǎng)站的編輯、調(diào)試和監(jiān)測功能。而綠色（<!--[if !vml]--><!--[endif]-->）則表示Firebug已開啟對當(dāng)前網(wǎng)站進(jìn)行編輯、調(diào)試和監(jiān)測的功能。而紅色圖標(biāo)（<!--[if !vml]--><!--[endif]-->）表示已開啟對當(dāng)前網(wǎng)站進(jìn)行編輯、調(diào)試和監(jiān)測的功能，而且檢查到當(dāng)前頁面有錯誤，當(dāng)前圖標(biāo)表示有5個錯誤。

<!--[if !supportLists]-->2、  <!--[endif]-->開啟或關(guān)閉Firebug

單擊Firebug的圖標(biāo)或者按F12鍵你會發(fā)現(xiàn)頁面窗口被分成了兩部分，上半部分是瀏覽的頁面，下半部分則是Firebug的控制窗口（圖2-1）。如果你不喜歡這樣，可以按CTRL+F12或在前面操作后單擊右上角的上箭頭按鈕，彈出一個新窗口作為Firebug的控制窗口。

從圖2-1中我們可以看到，因為我們開啟Firebug的編輯、調(diào)試和監(jiān)測功能，所以目前只有兩個可以選擇的鏈接：“Enable Firebug”與“Enable Firebug for this web site”。如果你想對所有的網(wǎng)站進(jìn)行編輯、調(diào)試和檢測，你可以點擊“Enable Firebug”開啟Firebug，則以后無論瀏覽任何網(wǎng)站，Firebug都處于活動狀態(tài)，隨時可以進(jìn)行編輯、調(diào)試和檢測。不過一般的習(xí)慣我們只是對自己開發(fā)的網(wǎng)站進(jìn)行編輯、調(diào)試和檢測，所以我們只單擊“Enable Firebug for this web site”開啟Firebug就行了。

開啟Firebug窗口（圖2-2）后，我們可以看到窗口主要有兩個區(qū)域，一個是功能區(qū)，一個是信息區(qū)。選擇功能區(qū)第二行的不同標(biāo)簽，信息區(qū)的顯示會有不同，Options的選項也會不同，搜索框的搜索方式也會不同。

要關(guān)閉Firebug控制窗口單擊功能區(qū)最右邊的關(guān)閉圖標(biāo)或按F12鍵就行了。如果要關(guān)閉Firebug的編輯、調(diào)試和監(jiān)測功能，則需要單擊功能區(qū)最左邊的臭蟲圖標(biāo)，打開主菜單，選擇“Disable Firebug”或“Disable Firebug for xxxxx”。

<!--[if !supportLists]-->3、  <!--[endif]-->Firebug主菜單

單擊功能區(qū)最左邊的臭蟲圖標(biāo)可打開主菜單（圖3-1），其主要功能描述請看表1。

<!--[if !supportLists]-->4、  <!--[endif]-->控制臺（Console）

單擊功能區(qū)第二欄的“Console”標(biāo)簽可切換到控制臺（圖4-1）?？刂婆_的作用是顯示各種錯誤信息（可在Options里定義），顯示腳本代碼中內(nèi)嵌的控制臺調(diào)試信息，通過命令行對腳本進(jìn)行調(diào)試，通過單擊Profile對腳本進(jìn)行性能測試。 控制臺分兩個區(qū)域，一個是信息區(qū)，一個是命令行，通過Options菜單的“Larger Command Line”可改變命令行位置。

    Options菜單的選項請看表2。

單擊“Clear”按鈕可清除控制臺的控制信息。

<!--[if !supportLists]-->5、  <!--[endif]-->頁面源代碼查看功能

單擊功能區(qū)第二欄的“HTML”標(biāo)簽可切換到源代碼查看功能（圖5-1）。雖然Firefox也提供了查看頁面源代碼的功能，但它顯示的只是頁面文件本身的源代碼，通過腳本輸出的HTML源碼是看不到。而Firebug則是所見即所得，是最終的源代碼。

我們來看一個例子，文件源代碼如下：

在例子中我們通過JavaScript在“div1”中加入了“div3”，在Firefox中查看源代碼你是看不到“div1”中包含有代碼“<div id="div3">方塊三</div>”的，但是Firebug中我們是可以看見的（圖5-2選中部分）。

從圖5-1中我們可以看到，信息區(qū)被分成了兩個部分，左邊是顯示源代碼，右邊是一個功能區(qū)，可以從這里查看到HTML Element中的CSS定義、布局情況和DOM結(jié)構(gòu)。

從圖5-2中我們可以看到，源代碼按DOM結(jié)構(gòu)分層次顯示的，通過層次折疊功能，我們就可以很方便分析代碼。在功能區(qū)的第一行還根據(jù)你的選擇，清晰的按子、父、根列出了當(dāng)前源代碼的層次（圖5-2紅色部分），單擊各部分，則會即刻轉(zhuǎn)到該部分的源代碼。

在源代碼上移動鼠標(biāo)，頁面就會出現(xiàn)一個半透明的方塊，指示當(dāng)前鼠標(biāo)所指源代碼的顯示區(qū)域，當(dāng)選擇。在圖5-4中，鼠標(biāo)正指向“div1”，而在頁面中“div1”的顯示區(qū)域上被一個半透明的方塊遮蓋了。

如果你把“Inspect”按鈕按下，功能正好相反，在頁面中移動鼠標(biāo)，則當(dāng)前顯示區(qū)域的源代碼會被加亮顯示出來。在圖5-5中，我們可以看到鼠標(biāo)指針正指向“方塊二”，而在源代碼中可以看到，“方塊二”的源代碼“<div id="div2">方塊二</div>”已被加亮顯示（紅色部分）。如果你單擊某個顯示區(qū)域，則該區(qū)域的源代碼會被選中。

是不是很方便？方便是方便，但是我的源代碼很多，而且有些區(qū)域在頁面中不方便鼠標(biāo)指定，怎么辦？沒關(guān)系，我們還有一個厲害武器，搜索功能。譬如我們知道某個HTML Element的ID是“div2”，但在層層疊疊的源代碼中不好找，在頁面中鼠標(biāo)也很難找到，那我們就在功能區(qū)的搜索框中輸入“div2”，再看看源代碼區(qū)域，“div2”被加亮顯示出來了（圖5-6紅色部分）。在這個簡單的例子可能看不出很好的效果，大家可以嘗試一下把“div1”先折疊起來，然后在搜索框輸入“div3”，你可以看到“div1”會自動展開，并將“div3”加亮顯示，如果還覺得不夠理想，可以找一個源代碼比較多的例子測試一下。

除了通過按下“Inspect”按鈕，單擊顯示區(qū)域選擇源代碼，我們還可以通過單擊源代碼中的HTML標(biāo)記（開始或結(jié)束標(biāo)記都可以）來選擇。我們嘗試一下把鼠標(biāo)移動到HTML標(biāo)記，會發(fā)現(xiàn)鼠標(biāo)指針變成了手的形狀，這說明我們可以通過單擊選擇該源代碼。選擇源代碼后，我們就可以通過右邊的功能區(qū)查看、編輯和調(diào)試它的CSS定義和盒子模型（CSS盒子模型請參閱相關(guān)說明，這里就不再贅述了），還有一個很好的功能就是當(dāng)外部編輯器修改了源代碼（沒有刪除該源代碼，只是修改），我們在瀏覽器重新加載頁面后，選擇的源代碼不會改變，我們可以很方便的觀察源代碼的變化與效果。

有沒有經(jīng)常為調(diào)試某個頁面效果在源代碼編輯器和瀏覽器之間切換，一次又一次的刷新而感到懊惱？有了Firebug你就不用再懊惱了。你可以直接在源代碼中進(jìn)行編輯，然后查看效果。如果只是修改已經(jīng)存在的屬性，例如要修改“div2”的內(nèi)部文本，則直接將鼠標(biāo)移動到文本上面，等鼠標(biāo)指針換成“I”，單擊即可進(jìn)行編輯了。其它已存在的屬性和屬性值也可以這樣直接進(jìn)行編輯。如果要為某Element添加屬性，請將鼠標(biāo)移動到該Element上，等光標(biāo)變?yōu)椤?/span>I”的時候，單擊鼠標(biāo)右鍵，從菜單中選擇“New Attribute..”，在顯示的編輯框中輸入你要添加的屬性名稱就可以了。

我們嘗試一下為“div2”增加一個“onclick”屬性，單擊的結(jié)果是將“div2”的顯示文本修改為“單擊”。把光標(biāo)移動到“div2”上，然后單擊鼠標(biāo)右鍵，選擇“New Attribute..”（圖5-7），在編輯框中輸入“onclick”，最后按一下回車鍵（圖5-8），出現(xiàn)屬性值輸入框后，輸入“this.innerHTML=’單擊’”，回車后我們可以繼續(xù)添加下一個屬性，這次測試不需要，所以按ESC結(jié)束我們的輸入。我們來檢驗一下修改結(jié)果，單擊頁面“div2”的區(qū)域（圖5-9），“div2”的顯示文本已修改為“單擊”了，而源代碼也改變了。有沒有發(fā)現(xiàn)，“div2”被加亮顯示了？這又是Firebug的一個功能。只要我們通過頁面中的操作修改了Element的屬性，Firebug就會在源代碼中通過加亮的方式指示當(dāng)前操作修改那些屬性值。譬如我們單擊某個鏈接修改了一個iframe里的src，那么這個src的屬性值就會被加亮顯示。 又譬如我們單擊某個鏈接修改了一個image里的圖像，那么它的src屬性值也會被加亮顯示。我們可以通過Options菜單里的“Highlight Changes”設(shè)置是否加亮顯示改變。而“Expand Changes”則是設(shè)置被改變的源代碼折疊起來看不見時展開讓它可見。而“Scroll Changes into view”則是源代碼很多，被改變的源代碼不在可視區(qū)域時，將被改變的源代碼滾動到可視區(qū)域。

有時候我們不單是要增加一兩個屬性，而是要做更多的修改，這怎么辦呢？很簡單，選擇你要更改Element，然后單擊功能區(qū)第一行的“Edit”按鈕或者直接將鼠標(biāo)移動到要修改的Element上，單擊鼠標(biāo)右鍵，選擇“Edit HTML..”，這時候，源代碼區(qū)域?qū)⑶袚Q到編輯狀態(tài)，你可以隨意的修改你選擇的源代碼了。我們嘗試修改一下“div2”，將被修改顯示文本修改回“方塊二”，我們選擇“div2”，然后單擊“Edit”按鈕（圖5-10），將顯示文本修改回“方塊二”，然后再次單擊“Edit”按鈕退出編輯狀態(tài)，如果要放棄修改，可以按ESC鍵退出。因為是所見即所得的，所以我們在修改的時候，頁面會同時刷新顯示。

如果要修改Element的CSS定義怎么辦？很簡單，選擇該Element，然后在右邊的窗口選擇“Style”標(biāo)簽，這里顯示的就是當(dāng)前Element的CSS定義了。我們在這里可以對CSS定義進(jìn)行添加、編輯、刪除、禁止等操作。我們嘗試一下把“div2”的背景色禁止了看看。將鼠標(biāo)移動到“background”這行（圖5-11），我們可以看到在這行的最右邊會有一個灰色的禁止圖標(biāo)，只要單擊這個禁止圖標(biāo)，就可以禁止了這個CSS屬性了。我們單擊這個圖標(biāo)看看效果，頁面中的“div2”已經(jīng)變成白色背景了，而禁止圖標(biāo)也變成紅色，而文本會則變成灰色（圖5-12），這說明已經(jīng)禁止了“background”了。當(dāng)然了，這個操作也可以通過鼠標(biāo)右鍵的“Disable XXXXX”來實現(xiàn)（XXXXX表示當(dāng)前選擇的CSS屬性）。我們再次單擊禁止圖標(biāo)，恢復(fù)“background”屬性。我們這次要把“background”的顏色由藍(lán)色（blue）修改為綠色（green）。我們把鼠標(biāo)移動到“background”屬性值“blue”上（圖5-13）。怎么會出現(xiàn)一個藍(lán)色背景的方框？這是Firebug提供背景預(yù)覽功能，讓我們很直觀的知道當(dāng)前背景是什么。如果背景是圖片的話，顯示的將是背景圖片的縮略圖。繼續(xù)我們的操作，單擊屬性值，在出現(xiàn)的編輯框中將“blue”修改為“green”。好了，背景已經(jīng)修改為綠色了?，F(xiàn)在的顯示文本是左對齊的，我想讓它居中對齊，這需要在CSS里加一個“text-align”的屬性，值為“center”。請在CSS上單擊鼠標(biāo)右鍵，在菜單中選擇“New Property..”，在編輯框中輸入“te”，Firebug已通過自動完成功能幫我們輸入“text-align”了（圖5-14），按Tab鍵或回車，在屬性值中我們輸入“c”，Firebug再次幫我們自動完成了“center”（圖5-15），按Tab鍵或回車完成輸入，如果不需要繼續(xù)輸入新屬性，按ESC或單擊鼠標(biāo)取消輸入。文本“方塊二”現(xiàn)在已經(jīng)居中顯示了。如果忘記了某個屬性值有那些選項怎么辦？不要緊，在輸入屬性值的時候可以通過上、下箭頭選擇我們需要的屬性值。

在“Style”標(biāo)簽里我們可以選擇“Options”菜單里的“Show Computed Style”查看瀏覽器默認(rèn)的風(fēng)格定義。

頁面設(shè)計中，我們有時候最頭疼的是什么？是盒子模型！為了調(diào)整一個Element的margin、border、padding和相對位置，我們往往需要花很多工夫去修改源代碼，然后刷新頁面查看效果。有了Firebug，你就可以輕松應(yīng)對了。我們將右邊的區(qū)域切換到“Layout”標(biāo)簽（圖5-16），你會看到一個盒子模型，里面從外到里通過不同的線和顏色劃分出了offset、margin、border、padding和內(nèi)容五個區(qū)域，里面4個區(qū)域在每個邊上都有1個數(shù)值，表示該方向上的調(diào)整值。我們先在左邊選擇“div2”，然后把鼠標(biāo)分別移動到“Layout”里的不同區(qū)域（圖5-17），然后留意一下頁面，頁面在頂部多了一條水平標(biāo)尺，在左邊多一條垂直標(biāo)尺，而4條實線指示出了當(dāng)前鼠標(biāo)指示的區(qū)域?qū)嶋H位置，通過與標(biāo)尺的交點可以知道該區(qū)域離頁面顯示區(qū)域左上角的偏移量（單位是px），當(dāng)然我們也可以通過layout中的數(shù)字計算出這些偏移量。在圖中，我們還可以看到，在內(nèi)容區(qū)域的外面還有3個不同顏色的區(qū)域，它們從里到外用不同顏色表示了padding、border、margin的位置和偏移量。只要將鼠標(biāo)移動到不同區(qū)域，頁面中的4條實線也會改變位置，指示出頁面中相應(yīng)的區(qū)域。我們還可以通過修改Layout中的數(shù)值，對顯示效果進(jìn)行調(diào)整。例如我們要將“div2”的內(nèi)容顯示區(qū)域擴(kuò)大到200×200，將鼠標(biāo)移動最左邊的100上，光標(biāo)變成“I”后，單擊鼠標(biāo)，然后在輸入框中輸入200，按回車可繼續(xù)修改高度值，輸入200，回車后完成修改。頁面中的“div2”區(qū)域已經(jīng)擴(kuò)展到200×200了，而源代碼也增加了“style="width: 200px; height: 200px;"”（圖5-18）。我們切換標(biāo)簽到“Style”，會發(fā)現(xiàn)多了“element.style {height:200px;width:200px;}”(圖5-19)，而CSS定義里面的高度和寬度都劃了橫線，表示不起作用了，“element.style”表示直接定義在Element源代碼上的CSS屬性。有時候某些Element會有相同的屬性，也有自己特殊的屬性，而特殊的屬性想寫在Element的源代碼上，就可以在Style里單擊鼠標(biāo)右鍵選擇“Edit Element Style..”進(jìn)行添加。如果有興趣的話，大家可以嘗試修改“Layout”里的其它屬性值，看看頁面的變化，這里我就不再一一說明了。

    如果不想在頁面中顯示標(biāo)尺和4條實線，可以不選擇“Options”菜單里的“Show Rules and Guides”。

在源代碼顯示區(qū)域我們還可以通過鼠標(biāo)右鍵復(fù)制源代碼和顯示內(nèi)容，這里就不一一說明了。DOM的說明請看查看DOM結(jié)構(gòu)一節(jié)，兩者是一樣的。在源代碼區(qū)域中如果覺得源代碼顯示太密，可以將“Options”菜單里的“Show White Space”選項打開，每個源代碼塊之間會用空白行隔離。如果要查看源代碼的注釋內(nèi)容，請將“Options”菜單里的“Show Comments”選項打開。

這里要提醒大家一下，在HTML里調(diào)試出正確的源代碼和CSS后，別忘記將源代碼和CSS的修改結(jié)果復(fù)制到你的源代碼文件中，不然你的調(diào)試結(jié)果在頁面刷新后會付之東流。切記！切記！

<!--[if !supportLists]-->6、  <!--[endif]-->查看CSS定義

將功能區(qū)第二行的標(biāo)簽切換到“CSS”，在這里我們可以查看頁面中所有的CSS定義，包括鏈接的CSS文件。通過功能區(qū)的文件選擇按鈕可以選擇不同的含有CSS的文件（圖6-1紅色圈住部分）。

CSS的定義的編輯這里就不再說明了，這個可以參考HTML的“Style”操作。

“Edit”按鈕功能和HTML的“Edit”功能類似。

<!--[if !supportLists]-->7、  <!--[endif]-->腳本調(diào)試

將功能區(qū)第二行的標(biāo)簽切換到“Script”，在這里我們可以對頁面中所有的腳本進(jìn)行調(diào)試，包括鏈接的腳本。和CSS一樣，可以通過文件選擇按鈕選擇不同的腳本文件。

如果要在腳本中設(shè)置一個斷點，可以單擊行號旁邊的空白區(qū)域，這時會出現(xiàn)一個紅色的點表示在這里設(shè)置了斷點（圖7-1），當(dāng)腳本運行到此會停止運行，等待你的操作。在右邊的小窗口將標(biāo)簽切換到“Breakpoints”可以查看我們設(shè)置的所有斷點（圖7-2），單擊左上角的checkbox可以讓斷點不起作用，如果要刪除斷點可以單擊右上角的刪除圖標(biāo)。通過“Options”菜單的“Disable All Breakpoints”可暫時禁止所有斷點，而“Remove All Breakpoints”可刪除所有斷點。在斷點標(biāo)記的紅點上單擊右鍵還可以設(shè)置斷點條件，在符合條件的時候才會停止腳本的執(zhí)行。

下面我們來嘗試一下斷點的功能。首先在測試頁腳本里增加一個test的函數(shù)，函數(shù)的主要操作是運行一個1000次的循環(huán)，將循環(huán)的參數(shù)值顯示在“div2”里：

    在“div2”里增加一個“onclick”屬性，單擊后執(zhí)行test：

刷新頁面，然后在“for(var i=0;i<1000;i++){”這行上設(shè)置一個斷點，并設(shè)置條件為“i=100”（圖7-3），然后單擊“div2”開始執(zhí)行函數(shù)test。

當(dāng)腳本停下來后，我們將鼠標(biāo)移動到變量“i”上，這時會出現(xiàn)一個小方框，里面有一個數(shù)值，這就是變量“i“的當(dāng)前值（圖7-4）。在腳本調(diào)試的時候，你可以通過這個方法很方便的了解到當(dāng)前變量的值。你還可以通過右邊窗口的“Watch”標(biāo)簽查看到“i”的值（圖7-5）。

在“Watch”標(biāo)簽窗口我們可以通過“Options”菜單選擇查看用戶自定義屬性（Show User-defined Properties）、用戶自定義函數(shù)（Show User-defined Functions）、DOM屬性（Show DOM Properties）、DOM函數(shù)(Show DOM Functions)和DOM常數(shù)(Show DOM Constants)。我們還可以通過單擊“New watch expression…”（圖7-6淡黃色背景部分）加入自己想跟蹤的內(nèi)容。例如我們想跟蹤一下“div2”的顯示內(nèi)容，就可以單擊“New watch expression…”，加入“document.getElementById('div2').innerHTML”，輸入中可通過TAB鍵自動完成關(guān)鍵字的輸入（圖7-7）。如果不想跟蹤了，可單擊最右邊的刪除圖標(biāo)取消跟蹤。

腳本在斷點停止后，我們就可以利用搜索框旁的4個跟蹤按鈕進(jìn)行代碼跟蹤了（圖7-7）。第一按鈕是繼續(xù)運行程序，不再執(zhí)行跟蹤，快捷鍵是F8。第二個按鈕是單步執(zhí)行方式，每次執(zhí)行一條語句，該方式在遇到函數(shù)調(diào)用時不進(jìn)入調(diào)用函數(shù)內(nèi)部進(jìn)行跟蹤，快捷鍵是F10。第三個按鈕也是單步執(zhí)行方式，每次執(zhí)行一條語句，但它遇到函數(shù)調(diào)用時會進(jìn)入調(diào)用函數(shù)內(nèi)部進(jìn)行跟蹤，快捷鍵是F11。當(dāng)你進(jìn)入調(diào)用函數(shù)內(nèi)，想馬上跳出來時，可以單擊第四個按鈕，該按鈕沒有快捷鍵。

搜索框的作用和HTML源代碼查看是一樣的，不過有一個不同，就是輸入“#n”（n≥1），可以直接跳到腳本的第n行。

當(dāng)執(zhí)行腳本在“console”標(biāo)簽內(nèi)顯示一個錯誤，而錯誤的提示行左邊出現(xiàn)一個暗紅色的圓點時（圖7-8），我們可以單擊改紅點在該行設(shè)置一個斷點。

我們可以通過“Script”標(biāo)簽的“Options”菜單的“Break on All Errors”選項設(shè)置每當(dāng)腳本發(fā)生錯誤時就中斷腳本，進(jìn)入調(diào)試狀態(tài)。

有時候一個函數(shù)隨機(jī)出現(xiàn)錯誤，你不可能每次調(diào)用都去跟蹤一次，而產(chǎn)生錯誤的原因很可能是傳遞的參數(shù)錯誤，這時你可以通過跟蹤函數(shù)調(diào)用的功能去檢查每次調(diào)用函數(shù)時的參數(shù)情況。操作在函數(shù)腳本內(nèi)單擊鼠標(biāo)右鍵，在菜單中選擇“Log Calls to xxxxx”（xxxxx為函數(shù)名），然后可在“console”標(biāo)簽中可查看函數(shù)調(diào)用情況。

<!--[if !supportLists]-->8、  <!--[endif]-->查看DOM結(jié)構(gòu)

將功能區(qū)第二行的標(biāo)簽切換到“DOM”可俺層次查看整個頁面的DOM結(jié)構(gòu)。通過“Options”菜單可自定義選擇查看用戶自定義屬性（Show User-defined Properties）、用戶自定義函數(shù)（Show User-defined Functions）、DOM屬性（Show DOM Properties）、DOM函數(shù)(Show DOM Functions)或DOM常數(shù)(Show DOM Constants)等內(nèi)容。

通過雙擊你可以修改DOM里面的屬性值。

<!--[if !supportLists]-->9、  <!--[endif]-->查看網(wǎng)絡(luò)狀況

作為開發(fā)人員，是否會經(jīng)常聽到老板或客戶抱怨頁面下載太慢了？于是你就懷疑是否腳本太多了？忘記壓縮圖片了？服務(wù)器太慢了？網(wǎng)絡(luò)太慢？確實是頭疼的事情。有了Firebug，你就可以很容易的對這個問題進(jìn)行分析和判斷了。請將Firebug的當(dāng)前標(biāo)簽切換到“Net”（圖9-1）。

從圖中我們可以看到，頁面中每一個下載文件都用一個灰色條表示它相對其它文件是從什么時候開始下載的，下載時間是多少。在底部我們看到頁面發(fā)送了多少個請求，下載總量是多少，有多少是有緩存的，下載總共花費了多少時間等信息。

如果只想了解某一樣文件的下載情況，你可以單擊功能區(qū)第一欄的文件分類按鈕過濾文件（圖9-2紅色圈住區(qū)域1）。

將鼠標(biāo)在文件中移動，如果是圖片，我們可以看到圖片的縮略圖（圖9-2紅色圈住區(qū)域3）。

如果顯示為紅色的文件名，則表示該文件在服務(wù)器中不存在，不能下載，這樣你就要檢查一下文件的路徑是否正確或者是否上傳了該文件（圖9-2紅色圈住區(qū)域2）。

我們可以展開某個文件，查看它的HTTP頭信息和返回結(jié)果的信息。如果請求的是一個動態(tài)頁面或XMLHttpRequest，則還可以查看提交的變量。通過查看提交的變量和返回信息，我們可以很方便的調(diào)試程序是否正確提交了需要的變量和返回了正確的數(shù)據(jù)。例如從圖36中，我們可以看到向“topics-remote.php”發(fā)送了一個請求，提交的參數(shù)有“_dc”、“callback”、“limit”和“start”四個，值分別為“1188637444000”、“stcCallback1001”、“25”與“0”，從這里我們可以很方便的知道我們腳本操作提交的參數(shù)是否正確。切換到“Response”頁可以看到返回的結(jié)果（圖9-3），在這里你可以對返回結(jié)果進(jìn)行檢查。如果你感覺在這里查看結(jié)果很亂，你可以單擊鼠標(biāo)右鍵，在彈出菜單中選擇“Copy Response body”復(fù)制結(jié)果到編輯器查看，你還可以選擇“Open in New Tab”打開一個新標(biāo)簽瀏覽。

通過右鍵菜單你可以復(fù)制文件地址（Copy Location）、HTTP請求頭信息(Copy Request Headers)和HTTP響應(yīng)頭信息（Copy Response Headers）。

如果不想使用該功能，可以選擇Options菜單的“Disable Network Monitoring”關(guān)閉該功能。

<!--[if !supportLists]-->10、              <!--[endif]-->命令行調(diào)試

在“Console”標(biāo)簽了有一個命令行工具，我們可以在這里運行一些腳本對頁面進(jìn)行調(diào)試。

我們在命令行中輸入“document.getElementById('div2').innerHTML”看看效果（圖10-1），別忘了用TAB鍵實現(xiàn)快速輸入關(guān)鍵字。在信息區(qū)顯示了當(dāng)前“div2”的顯示內(nèi)容。

要輸入“document.getElementById”是不是覺得很麻煩？這里有一個簡單的辦法，用“$”符號代替“document.getElementById”，我們再在命令行中輸入“$('div2').innerHTML”，然后看看結(jié)果，是一樣（圖10-2）。

當(dāng)你通過“Inspect”鎖定了一些HTML Element時，你可以通過“$1”來訪問最后一個Element，依次類推，我們可以通過“$n”(n>1)訪問依次倒序訪問鎖定的Element。

我們來實踐一下，刷新一下測試頁面，然后按下“Inspect”按鈕，鼠標(biāo)單擊“方塊二”，然后在按下“Inspect”按鈕，單擊“方塊一”。將firebug窗口切換回“Console”標(biāo)簽，然后輸入“$1”，回車后再輸入“$2”，查看一下結(jié)果（圖10-3），正是我們用鎖定過的Element。

在命令行還可以通過“$$(HTML 標(biāo)記)”返回一個Element數(shù)組。我們在測試頁輸入“$$(‘div’)”看看（圖10-4）。我們再輸入“$$(‘div’)[0]”看看（圖10-5）。是不是很便于我們對HTML進(jìn)行調(diào)試。

命令行的所有特殊函數(shù)請看表3：

命令行有命令記憶功能，可通過上、下箭頭鍵選擇已經(jīng)輸入過的命令。

<!--[if !supportLists]-->11、              <!--[endif]-->在腳本文件中加入調(diào)試命令

有沒有對腳本調(diào)試中經(jīng)常需要alert感到厭煩？有了Firebug，你就可以放下alert了，因為Firebug有功能比alert更強(qiáng)大的console.log。

先讓我們來認(rèn)識一下console.log，在測試文件腳本區(qū)域我們輸入一下代碼：

   刷新一下頁面，將firebug切換到“console”標(biāo)簽看看（圖11-1），在信息區(qū)顯示出了我們要輸出的信息“Hello”。當(dāng)然了，單憑這個就說console.log有點夸大，我們修改一下test函數(shù)，把“document.getElementById('div2').innerHTML=i;”修改為：

   刷新頁面后看看結(jié)果（圖11-2）。是不是挺不錯的？console.log可以象c語言的printf一樣實現(xiàn)格式化輸出。我們再在腳本區(qū)加入一個語句：

刷新頁面后看看結(jié)果（圖11-3）。console.log可以連續(xù)輸出多個對象，而且如果對象是DOM、函數(shù)，還可以直接點擊去到該對象。

如果你覺得console.log輸出的文本太單調(diào)，不能表示出不同的信息，那么你可以通過console.debug、 console.info、 console.warn和console.error來代替console.log，這些函數(shù)分別會用不同的背景顏色和文字顏色來顯示信息。

我們來看看測試一下這些函數(shù)的輸出，在腳本中加入：

   刷新頁面看看結(jié)果（圖11-4）。

有時候，為了更清楚方便的查看輸出信息，我們可能需要將一些調(diào)試信息進(jìn)行分組輸出，那么可以使用console.group來對信息進(jìn)行分組，在組信息輸出完成后用console.groupEnd結(jié)束分組。我們測試一下把剛才的4個輸出作為一個分組輸出，修改代碼為：

刷新頁面看看結(jié)果（圖11-5）。在console.group中，我們還可以加入一個組標(biāo)題“開始分組：”。如果需要，我們還可以通過嵌套的方式，在組內(nèi)再分組。

有時候，我們需要寫一個for循環(huán)列出一個對象的所有屬性或者某個HTML Element下的所有節(jié)點，有了firebug后，我們不需要再寫這個for循環(huán)了，我們只需要使用console.dir(object)或console.dirxml(element)就可以了。

在測試頁中加入代碼測試一下：

    結(jié)果請看圖11-6和圖11-7。

是否想知道代碼的運行速度？很簡單，使用console.time和console.timeEnd就可以。

修改一下test函數(shù)的代碼，測試一下運行1000次循環(huán)需要多少時間：

刷新頁面，單擊“方塊二”，看看結(jié)果（圖11-8）。在這里要注意的是console.time和console.timeEnd里的參數(shù)要一致才會有正確的輸出，而該參數(shù)就是信息的標(biāo)題。

是否想知道某個函數(shù)是從哪里調(diào)用的？console..trace可幫助我們進(jìn)行追蹤。在test函數(shù)的結(jié)尾加入：

刷新頁面，單擊“方塊二”，看看結(jié)果（圖11-9）。結(jié)果顯示是在坐標(biāo)（97，187）的鼠標(biāo)單擊事件執(zhí)行了test函數(shù)，而調(diào)用的腳本是在simple.html文件里的第1行。因為是在HTML里面的事件調(diào)用了test函數(shù)，所以顯示的行號是第1行。如果是腳本，則會顯示調(diào)用腳本的行號，通過單擊可以直接去到調(diào)用行。

如果想在腳本某個位置設(shè)置斷點，可以在腳本中輸入“debugger”作為一行。當(dāng)腳本執(zhí)行到這一行時會停止執(zhí)行等待用戶操作，這時候可以通過切換到“Script”標(biāo)簽對腳本進(jìn)行調(diào)試。

    Firebug還有其它的一些調(diào)試函數(shù)，這里就不一一做介紹，有興趣可以自己測試。表4是所有函數(shù)的列表：

<!--[if !supportLists]-->12、              <!--[endif]-->在IE中使用Firebug

Firebug是Firefox的一個擴(kuò)展，但是我習(xí)慣在IE中調(diào)試我的頁面怎么辦？如果在頁面腳本中加入console.log()將調(diào)試信息寫到Friebug，在IE中肯定是提示錯誤的，怎么辦？不用擔(dān)心，Frirebug提供了Frirbug Lite腳本，可以插入頁面中模仿Firebug控制臺。

我們可以從一下地址下載firebug lite：

http://www./releases/firebuglite1.0-b1.zip

然后在頁面中加入：

    如果你不想在IE中模仿Friebug控制臺，只是不希望console.log()腳本出現(xiàn)錯誤信息，那么在頁面中加入一下語句：

如果你不想安裝Firebug Lite，只是想避免腳本錯誤，那么可以在腳本中加入以下語句：

我們將firebug.js加入到測試頁面中，然后打開IE，加載頁面。頁面加載完成后，我們按下F12鍵就可以打開控制臺了。每次頁面刷新后，你都要按F12鍵打開控制臺，是不是很煩？如果不想那么，就在html標(biāo)簽中加入“debug=’true’”，例如：

   在Friebug Lite中也有命令行，但是功能沒那么強(qiáng)。

<!--[if !supportLists]-->13、  <!--[endif]-->快捷鍵和鼠標(biāo)操作

<!--[if !supportLists]-->13、              <!--[endif]-->總結(jié)

真是意想不到，Firebug居然有那么多好功能居然是我不知道。通過寫本篇文章，才認(rèn)真的了解和學(xué)習(xí)了一次Firebug，越學(xué)越感覺到它的威力。不過我學(xué)的也只是皮毛，還有更多的功能和技巧需要在平時的使用中慢慢積累，因此這篇文章只是一個簡單的介紹，還有很多東西是沒有涉及到的，而且因為我本身水平與能力有限，所以文中會有很多錯誤與遺漏，希望大家能多多諒解與指正！多謝！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd">
<html debug='true'>
<head>
  <title>簡單的例子</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style>
        #div1{background:red;width:100px;height:100px;}
        #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;}
        #div3{background:yellow;width:50px;height:50px;margin-left:25px;}
    </style>
<script language="javascript" type="text/javascript" src="firebug/firebug.js"></script>
</head>
<body scroll="no">
  <div id="div1">方塊一</div>
  <div id="div2" onclick='test()'>方塊二</div>
  <script>
      document.getElementById('div1').innerHTML+='<div id="div3">方塊三</div>';
/*      console.log('Hello');
      console.log(2,4,window,test,document);
      console.group('開始分組：');
      console.debug('This is console.debug!');
      console.info('This is console.info!');
      console.warn('This is console.warn!');
      console.error('This is console.error!');
      console.groupEnd();*/
//      console.dir(document.getElementById('div1'));
//      console.dirxml(document.getElementById('div1'));
      
      function test(){
          console.time('test');
          for(var i=0;i<1000;i++){
              document.getElementById('div2').innerHTML=i;
              //console.log('當(dāng)前的參數(shù)是：%d',i);
          }
          console.timeEnd('test');
          console.trace();
      }
      
  </script>  
</body>
</html>