javascript的調試，是開發web應用尤其是ajax應用很重要的一環，目前對javascript進行調試的工具很多，我比較喜歡使用的是firebug。firebug是joe hewitt開發的一套與firefox內建在一起的功能強大的web開發工具，可以實時編輯、調試和監測任何頁面的css、html和javascript。
本文主要是為初學者介紹一下firebug的基本功能與如何使用firebug。由于本人水準與能力有限，在文章中的可能會有很多錯誤與遺漏，希望大家能諒解和指正！
1ã 安裝
firebug是與firefox內建的，是以我們首先要安裝的事firefox浏覽器。安裝好浏覽器後，打開浏覽器，選擇菜單欄上的“工具”菜單，選擇“附加軟體”，在彈出視窗中點選右下角的“擷取擴充”連結。在打開的頁面的search輸入框中輸入“firebug”。等搜尋結果出來後點選firbug連結（圖1-1紅色圈住部分）進入firebug的下載下傳安裝頁面。
圖1-1
在頁面中點選install now（圖1-2）按鈕。
圖1-2
在彈出視窗（圖1-3）中等待3秒後單擊“立即安裝”按鈕。
圖1-3
等待安裝完成後會單擊視窗（圖1-4）中的“重新開機 firefox”按鈕重新啟動firefox。
圖1-4
當firefox重新開機完後我們可以在狀态欄最右邊發現一個灰色圓形圖示（
ï¼ï¼è¿å°±è¡¨ç¤ºfirebugå·²ç»å®è£ 好äºãç°è²å¾æ 表示firebugæªå¼å¯å¯¹å½åç½ç«çç¼è¾ãè°è¯åçæµåè½ãè绿è²ï¼
ï¼å表示firebugå·²å¼å¯å¯¹å½åç½ç«è¿è¡ç¼è¾ãè°è¯åçæµçåè½ãè红è²å¾æ ï¼
）表示已開啟對目前網站進行編輯、調試和監測的功能，而且檢查到目前頁面有錯誤，目前圖示表示有5個錯誤。
2ã 開啟或關閉firebug
單擊firebug的圖示或者按f12鍵你會發現頁面視窗被分成了兩部分，上半部分是浏覽的頁面，下半部分則是firebug的控制視窗（圖2-1）。如果你不喜歡這樣，可以按ctrl+f12或在前面操作後單擊右上角的上箭頭按鈕，彈出一個新視窗作為firebug的控制視窗。
圖2-1
從圖2-1中我們可以看到，因為我們開啟firebug的編輯、調試和監測功能，是以目前隻有兩個可以選擇的連結：“enable firebug”與“enable firebug for this web site”。如果你想對所有的網站進行編輯、調試和檢測，你可以點選“enable firebug”開啟firebug，則以後無論浏覽任何網站，firebug都處于活動狀态，随時可以進行編輯、調試和檢測。不過一般的習慣我們隻是對自己開發的網站進行編輯、調試和檢測，是以我們隻單擊“enable firebug for this web site”開啟firebug就行了。
開啟firebug視窗（圖2-2）後，我們可以看到視窗主要有兩個區域，一個是功能區，一個是資訊區。選擇功能區第二行的不同标簽，資訊區的顯示會有不同，options的選項也會不同，搜尋框的搜尋方式也會不同。
圖2-2
要關閉firebug控制視窗單擊功能區最右邊的關閉圖示或按f12鍵就行了。如果要關閉firebug的編輯、調試和監測功能，則需要單擊功能區最左邊的臭蟲圖示，打開主菜單，選擇“disable firebug”或“disable firebug for xxxxx”。
3ã firebug主菜單
單擊功能區最左邊的臭蟲圖示可打開主菜單（圖3-1），其主要功能描述請看表1。
圖3-1
菜單選項
說明
disable firebug
關閉/開啟firebug對所有網頁的編輯、調試和檢測功能
disable firebug for xxxxx
關閉/開啟firebug對xxxxx網站的編輯、調試和檢測功能
allowed sites
設定允許編輯、調試和檢測的網站
text size：increase text size
增大資訊區域顯示文本的字号
text size：decrease text size
減少資訊區域顯示文本的字号
text size：normal text size
資訊區域以正常字型顯示
options：always open in new window
設定firebug控制視窗永遠在新視窗打開
show preview tooltips
設定是否顯示預覽提示。
shade box model
目前檢視狀态為html，滑鼠在html element标簽上移動時，頁面會相應在目前标簽顯示位置顯示一個邊框表示該标簽範圍。這個選項的作用是設定是否用不同顔色背景表示标簽範圍。
firebug website..
打開firebug首頁。
documentation..
打開firebug文檔頁。
discussion group
打開firebug讨論組。
contribute
打開捐助firebug 頁面。
表1
4ã 控制台（console）
單擊功能區第二欄的“console”标簽可切換到控制台（圖4-1）。控制台的作用是顯示各種錯誤資訊（可在options裡定義），顯示腳本代碼中内嵌的控制台調試資訊，通過指令行對腳本進行調試，通過單擊profile對腳本進行性能測試。 控制台分兩個區域，一個是資訊區，一個是指令行，通過options菜單的“larger command line”可改變指令行位置。
圖4-1
options菜單的選項請看表2。
show javascript errors
顯示腳本錯誤。
show javascript warnings
顯示腳本警告。
show css errors
顯示css錯誤。
show xml errors
顯示xml錯誤。
show xmlhttprequests
顯示xmlhttprequests。
larger command line
将指令行顯示從控制視窗底部移動右邊，擴大輸入區域。
表2
單擊“clear”按鈕可清除控制台的控制資訊。
5ã 頁面源代碼檢視功能
單擊功能區第二欄的“html”标簽可切換到源代碼檢視功能（圖5-1）。雖然firefox也提供了檢視頁面源代碼的功能，但它顯示的隻是頁面檔案本身的源代碼，通過腳本輸出的html源碼是看不到。而firebug則是所見即所得，是最終的源代碼。
圖5-1
我們來看一個例子，檔案源代碼如下：
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<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>
</head>
<body scroll="no">
<div id="div1">方塊一</div>
<div id="div2">方塊二</div>
<script>
document.getelementbyid('div1').innerhtml+='<div id="div3">方塊三</div>';
</script>
</body>
</html>
在例子中我們通過javascript在“div1”中加入了“div3”，在firefox中檢視源代碼你是看不到“div1”中包含有代碼“<code><div id="div3"></code><code>方塊三</div></code>”的，但是firebug中我們是可以看見的（圖5-2選中部分）。
圖5-2
從圖5-1中我們可以看到，資訊區被分成了兩個部分，左邊是顯示源代碼，右邊是一個功能區，可以從這裡檢視到html element中的css定義、布局情況和dom結構。
從圖5-2中我們可以看到，源代碼按dom結構分層次顯示的，通過層次折疊功能，我們就可以很友善分析代碼。在功能區的第一行還根據你的選擇，清晰的按子、父、根列出了目前源代碼的層次（圖5-2紅色部分），單擊各部分，則會即刻轉到該部分的源代碼。
圖5-3
在源代碼上移動滑鼠，頁面就會出現一個半透明的方塊，訓示目前滑鼠所指源代碼的顯示區域，當選擇。在圖5-4中，滑鼠正指向“div1”，而在頁面中“div1”的顯示區域上被一個半透明的方塊遮蓋了。
圖5-4
如果你把“inspect”按鈕按下，功能正好相反，在頁面中移動滑鼠，則目前顯示區域的源代碼會被加亮顯示出來。在圖5-5中，我們可以看到滑鼠指針正指向“方塊二”，而在源代碼中可以看到，“方塊二”的源代碼“<code><div id="div2"></code><code>方塊二</div></code>”已被加亮顯示（紅色部分）。如果你單擊某個顯示區域，則該區域的源代碼會被選中。
圖5-5
是不是很友善？友善是友善，但是我的源代碼很多，而且有些區域在頁面中不友善滑鼠指定，怎麼辦？沒關系，我們還有一個厲害武器，搜尋功能。譬如我們知道某個html element的id是“div2”，但在層層疊疊的源代碼中不好找，在頁面中滑鼠也很難找到，那我們就在功能區的搜尋框中輸入“div2”，再看看源代碼區域，“div2”被加亮顯示出來了（圖5-6紅色部分）。在這個簡單的例子可能看不出很好的效果，大家可以嘗試一下把“div1”先折疊起來，然後在搜尋框輸入“div3”，你可以看到“div1”會自動展開，并将“div3”加亮顯示，如果還覺得不夠理想，可以找一個源代碼比較多的例子測試一下。
圖5-6
除了通過按下“inspect”按鈕，單擊顯示區域選擇源代碼，我們還可以通過單擊源代碼中的html标記（開始或結束标記都可以）來選擇。我們嘗試一下把滑鼠移動到html标記，會發現滑鼠指針變成了手的形狀，這說明我們可以通過單擊選擇該源代碼。選擇源代碼後，我們就可以通過右邊的功能區檢視、編輯和調試它的css定義和盒子模型（css盒子模型請參閱相關說明，這裡就不再贅述了），還有一個很好的功能就是當外部編輯器修改了源代碼（沒有删除該源代碼，隻是修改），我們在浏覽器重新加載頁面後，選擇的源代碼不會改變，我們可以很友善的觀察源代碼的變化與效果。
有沒有經常為調試某個頁面效果在源代碼編輯器和浏覽器之間切換，一次又一次的重新整理而感到懊惱？有了firebug你就不用再懊惱了。你可以直接在源代碼中進行編輯，然後檢視效果。如果隻是修改已經存在的屬性，例如要修改“div2”的内部文本，則直接将滑鼠移動到文本上面，等滑鼠指針換成“i”，單擊即可進行編輯了。其它已存在的屬性和屬性值也可以這樣直接進行編輯。如果要為某element添加屬性，請将滑鼠移動到該element上，等光标變為“i”的時候，單擊滑鼠右鍵，從菜單中選擇“new attribute..”，在顯示的編輯框中輸入你要添加的屬性名稱就可以了。
圖5-7
圖5-8
我們嘗試一下為“div2”增加一個“onclick”屬性，單擊的結果是将“div2”的顯示文本修改為“單擊”。把光标移動到“div2”上，然後單擊滑鼠右鍵，選擇“new attribute..”（圖5-7），在編輯框中輸入“onclick”，最後按一下Enter鍵（圖5-8），出現屬性值輸入框後，輸入“this.innerhtml=’單擊’”，回車後我們可以繼續添加下一個屬性，這次測試不需要，是以按esc結束我們的輸入。我們來檢驗一下修改結果，單擊頁面“div2”的區域（圖5-9），“div2”的顯示文本已修改為“單擊”了，而源代碼也改變了。有沒有發現，“div2”被加亮顯示了？這又是firebug的一個功能。隻要我們通過頁面中的操作修改了element的屬性，firebug就會在源代碼中通過加亮的方式訓示目前操作修改那些屬性值。譬如我們單擊某個連結修改了一個iframe裡的src，那麼這個src的屬性值就會被加亮顯示。 又譬如我們單擊某個連結修改了一個image裡的圖像，那麼它的src屬性值也會被加亮顯示。我們可以通過options菜單裡的“highlight changes”設定是否加亮顯示改變。而“expand changes”則是設定被改變的源代碼折疊起來看不見時展開讓它可見。而“scroll changes into view”則是源代碼很多，被改變的源代碼不在可視區域時，将被改變的源代碼滾動到可視區域。
圖5-9
有時候我們不單是要增加一兩個屬性，而是要做更多的修改，這怎麼辦呢？很簡單，選擇你要更改element，然後單擊功能區第一行的“edit”按鈕或者直接将滑鼠移動到要修改的element上，單擊滑鼠右鍵，選擇“edit html..”，這時候，源代碼區域将切換到編輯狀态，你可以随意的修改你選擇的源代碼了。我們嘗試修改一下“div2”，将被修改顯示文本修改回“方塊二”，我們選擇“div2”，然後單擊“edit”按鈕（圖5-10），将顯示文本修改回“方塊二”，然後再次單擊“edit”按鈕退出編輯狀态，如果要放棄修改，可以按esc鍵退出。因為是所見即所得的，是以我們在修改的時候，頁面會同時重新整理顯示。
圖5-10
如果要修改element的css定義怎麼辦？很簡單，選擇該element，然後在右邊的視窗選擇“style”标簽，這裡顯示的就是目前element的css定義了。我們在這裡可以對css定義進行添加、編輯、删除、禁止等操作。我們嘗試一下把“div2”的背景色禁止了看看。将滑鼠移動到“background”這行（圖5-11），我們可以看到在這行的最右邊會有一個灰色的禁止圖示，隻要單擊這個禁止圖示，就可以禁止了這個css屬性了。我們單擊這個圖示看看效果，頁面中的“div2”已經變成白色背景了，而禁止圖示也變成紅色，而文本會則變成灰色（圖5-12），這說明已經禁止了“background”了。當然了，這個操作也可以通過滑鼠右鍵的“disable xxxxx”來實作（xxxxx表示目前選擇的css屬性）。我們再次單擊禁止圖示，恢複“background”屬性。我們這次要把“background”的顔色由藍色（blue）修改為綠色（green）。我們把滑鼠移動到“background”屬性值“blue”上（圖5-13）。怎麼會出現一個藍色背景的方框？這是firebug提供背景預覽功能，讓我們很直覺的知道目前背景是什麼。如果背景是圖檔的話，顯示的将是背景圖檔的縮略圖。繼續我們的操作，單擊屬性值，在出現的編輯框中将“blue”修改為“green”。好了，背景已經修改為綠色了。現在的顯示文本是左對齊的，我想讓它居中對齊，這需要在css裡加一個“text-align”的屬性，值為“center”。請在css上單擊滑鼠右鍵，在菜單中選擇“new property..”，在編輯框中輸入“te”，firebug已認證自動完成功能幫我們輸入“text-align”了（圖5-14），按tab鍵或回車，在屬性值中我們輸入“c”，firebug再次幫我們自動完成了“center”（圖5-15），按tab鍵或回車完成輸入，如果不需要繼續輸入新屬性，按esc或單擊滑鼠取消輸入。文本“方塊二”現在已經居中顯示了。如果忘記了某個屬性值有那些選項怎麼辦？不要緊，在輸入屬性值的時候可以通過上、下箭頭選擇我們需要的屬性值。
在“style”标簽裡我們可以選擇“options”菜單裡的“show computed style”檢視浏覽器預設的風格定義。
圖5-11
圖5-12
圖5-13
圖5-14
圖5-15
頁面設計中，我們有時候最頭疼的是什麼？是盒子模型！為了調整一個element的margin、border、padding和相對位置，我們往往需要花很多工夫去修改源代碼，然後重新整理頁面檢視效果。有了firebug，你就可以輕松應對了。我們将右邊的區域切換到“layout”标簽（圖5-16），你會看到一個盒子模型，裡面從外到裡通過不同的線和顔色劃分出了offset、margin、border、padding和内容五個區域，裡面4個區域在每個邊上都有1個數值，表示該方向上的調整值。我們先在左邊選擇“div2”，然後把滑鼠分别移動到“layout”裡的不同區域（圖5-17），然後留意一下頁面，頁面在頂部多了一條水準标尺，在左邊多一條垂直标尺，而4條實線訓示出了目前滑鼠訓示的區域實際位置，通過與标尺的交點可以知道該區域離頁面顯示區域左上角的偏移量（機關是px），當然我們也可以通過layout中的數字計算出這些偏移量。在圖中，我們還可以看到，在内容區域的外面還有3個不同顔色的區域，它們從裡到外用不同顔色表示了padding、border、margin的位置和偏移量。隻要将滑鼠移動到不同區域，頁面中的4條實線也會改變位置，訓示出頁面中相應的區域。我們還可以通過修改layout中的數值，對顯示效果進行調整。例如我們要将“div2”的内容顯示區域擴大到200×200，将滑鼠移動最左邊的100上，光标變成“i”後，單擊滑鼠，然後在輸入框中輸入200，按回車可繼續修改高度值，輸入200，回車後完成修改。頁面中的“div2”區域已經擴充到200×200了，而源代碼也增加了“style="width: 200px; height: 200px;"”（圖5-18）。我們切換标簽到“style”，會發現多了“element.style {height:200px;width:200px;}”(圖5-19)，而css定義裡面的高度和寬度都劃了橫線，表示不起作用了，“element.style”表示直接定義在element源代碼上的css屬性。有時候某些element會有相同的屬性，也有自己特殊的屬性，而特殊的屬性想寫在element的源代碼上，就可以在style裡單擊滑鼠右鍵選擇“edit element style..”進行添加。如果有興趣的話，大家可以嘗試修改“layout”裡的其它屬性值，看看頁面的變化，這裡我就不再一一說明了。
如果不想在頁面中顯示标尺和4條實線，可以不選擇“options”菜單裡的“show rules and guides”。
圖5-16
圖5-17
圖5-18
圖5-19
在源代碼顯示區域我們還可以通過滑鼠右鍵複制源代碼和顯示内容，這裡就不一一說明了。dom的說明請看檢視dom結構一節，兩者是一樣的。在源代碼區域中如果覺得源代碼顯示太密，可以将“options”菜單裡的“show white space”選項打開，每個源代碼塊之間會用空白行隔離。如果要檢視源代碼的注釋内容，請将“options”菜單裡的“show comments”選項打開。
這裡要提醒大家一下，在html裡調試出正确的源代碼和css後，别忘記将源代碼和css的修改結果複制到你的源代碼檔案中，不然你的調試結果在頁面重新整理後會付之東流。切記！切記！
6ã 檢視css定義
将功能區第二行的标簽切換到“css”，在這裡我們可以檢視頁面中所有的css定義，包括連結的css檔案。通過功能區的檔案選擇按鈕可以選擇不同的含有css的檔案（圖6-1紅色圈住部分）。
圖6-1
css的定義的編輯這裡就不再說明了，這個可以參考html的“style”操作。
“edit”按鈕功能和html的“edit”功能類似。
7ã 腳本調試
将功能區第二行的标簽切換到“script”，在這裡我們可以對頁面中所有的腳本進行調試，包括連結的腳本。和css一樣，可以通過檔案選擇按鈕選擇不同的腳本檔案。
如果要在腳本中設定一個斷點，可以單擊行号旁邊的空白區域，這時會出現一個紅色的點表示在這裡設定了斷點（圖7-1），當腳本運作到此會停止運作，等待你的操作。在右邊的小視窗将标簽切換到“breakpoints”可以檢視我們設定的所有斷點（圖7-2），單擊左上角的checkbox可以讓斷點不起作用，如果要删除斷點可以單擊右上角的删除圖示。通過“options”菜單的“disable all breakpoints”可暫時禁止所有斷點，而“remove all breakpoints”可删除所有斷點。在斷點标記的紅點上單擊右鍵還可以設定斷點條件，在符合條件的時候才會停止腳本的執行。
圖7-1
圖7-2
下面我們來嘗試一下斷點的功能。首先在測試頁腳本裡增加一個test的函數，函數的主要操作是運作一個1000次的循環，将循環的參數值顯示在“div2”裡：
function test(){
for(var i=0;i<1000;i++){
document.getelementbyid('div2').innerhtml=i;
}
}
在“div2”裡增加一個“onclick”屬性，單擊後執行test：
<code><div id="div2" onclick='test()'></code><code>方塊二</div></code>
<code></code>
重新整理頁面，然後在“<code>for(var i=0;i<1000;i++){</code>”這行上設定一個斷點，并設定條件為“i=100”（圖7-3），然後單擊“div2”開始執行函數test。
圖7-3
當腳本停下來後，我們将滑鼠移動到變量“i”上，這時會出現一個小方框，裡面有一個數值，這就是變量“i“的目前值（圖7-4）。在腳本調試的時候，你可以通過這個方法很友善的了解到目前變量的值。你還可以通過右邊視窗的“watch”标簽檢視到“i”的值（圖7-5）。
圖7-4
圖7-5
在“watch”标簽視窗我們可以通過“options”菜單選擇檢視使用者自定義屬性（show user-defined properties）、使用者自定義函數（show user-defined functions）、dom屬性（show dom properties）、dom函數(show dom functions)和dom常數(show dom constants)。我們還可以通過單擊“new watch expression…”（圖7-6淡黃色背景部分）加入自己想跟蹤的内容。例如我們想跟蹤一下“div2”的顯示内容，就可以單擊“new watch expression…”，加入“document.getelementbyid('div2').innerhtml”，輸入中可通過tab鍵自動完成關鍵字的輸入（圖7-7）。如果不想跟蹤了，可單擊最右邊的删除圖示取消跟蹤。
圖7-6
圖7-7
腳本在斷點停止後，我們就可以利用搜尋框旁的4個跟蹤按鈕進行代碼跟蹤了（圖7-7）。第一按鈕是繼續運作程式，不再執行跟蹤，快捷鍵是f8。第二個按鈕是單步執行方式，每次執行一條語句，該方式在遇到函數調用時不進入調用函數内部進行跟蹤，快捷鍵是f10。第三個按鈕也是單步執行方式，每次執行一條語句，但它遇到函數調用時會進入調用函數内部進行跟蹤，快捷鍵是f11。當你進入調用函數内，想馬上跳出來時，可以單擊第四個按鈕，該按鈕沒有快捷鍵。
搜尋框的作用和html源代碼檢視是一樣的，不過有一個不同，就是輸入“#n”（n≥1），可以直接跳到腳本的第n行。
當執行腳本在“console”标簽内顯示一個錯誤，而錯誤的提示行左邊出現一個暗紅色的圓點時（圖7-8），我們可以單擊改紅點在該行設定一個斷點。
圖7-8
我們可以通過“script”标簽的“options”菜單的“break on all errors”選項設定每當腳本發生錯誤時就中斷腳本，進入調試狀态。
有時候一個函數随機出現錯誤，你不可能每次調用都去跟蹤一次，而産生錯誤的原因很可能是傳遞的參數錯誤，這時你可以通過跟蹤函數調用的功能去檢查每次調用函數時的參數情況。操作在函數腳本内單擊滑鼠右鍵，在菜單中選擇“log calls to xxxxx”（xxxxx為函數名），然後可在“console”标簽中可檢視函數調用情況。
8ã 檢視dom結構
将功能區第二行的标簽切換到“dom”可俺層次檢視整個頁面的dom結構。通過“options”菜單可自定義選擇檢視使用者自定義屬性（show user-defined properties）、使用者自定義函數（show user-defined functions）、dom屬性（show dom properties）、dom函數(show dom functions)或dom常數(show dom constants)等内容。
通過輕按兩下你可以修改dom裡面的屬性值。
9ã 檢視網絡狀況
作為開發人員，是否會經常聽到老闆或客戶抱怨頁面下載下傳太慢了？于是你就懷疑是否腳本太多了？忘記壓縮圖檔了？伺服器太慢了？網絡太慢？确實是頭疼的事情。有了firebug，你就可以很容易的對這個問題進行分析和判斷了。請将firebug的目前标簽切換到“net”（圖9-1）。
圖9-1
圖9-2
從圖中我們可以看到，頁面中每一個下載下傳檔案都用一個灰色條表示它相對其它檔案是從什麼時候開始下載下傳的，下載下傳時間是多少。在底部我們看到頁面發送了多少個請求，下載下傳總量是多少，有多少是有緩存的，下載下傳總共花費了多少時間等資訊。
如果隻想了解某一樣檔案的下載下傳情況，你可以單擊功能區第一欄的檔案分類按鈕過濾檔案（圖9-2紅色圈住區域1）。
将滑鼠在檔案中移動，如果是圖檔，我們可以看到圖檔的縮略圖（圖9-2紅色圈住區域3）。
如果顯示為紅色的檔案名，則表示該檔案在伺服器中不存在，不能下載下傳，這樣你就要檢查一下檔案的路徑是否正确或者是否上傳了該檔案（圖9-2紅色圈住區域2）。
我們可以展開某個檔案，檢視它的http頭資訊和傳回結果的資訊。如果請求的是一個動态頁面或xmlhttprequest，則還可以檢視送出的變量。通過檢視送出的變量和傳回資訊，我們可以很友善的調試程式是否正确送出了需要的變量和傳回了正确的資料。例如從圖36中，我們可以看到向“topics-remote.php”發送了一個請求，送出的參數有“_dc”、“callback”、“limit”和“start”四個，值分别為“1188637444000”、“stccallback1001”、“25”與“0”，從這裡我們可以很友善的知道我們腳本操作送出的參數是否正确。切換到“response”頁可以看到傳回的結果（圖9-3），在這裡你可以對傳回結果進行檢查。如果你感覺在這裡檢視結果很亂，你可以單擊滑鼠右鍵，在彈出菜單中選擇“copy response body”複制結果到編輯器檢視，你還可以選擇“open in new tab”打開一個新标簽浏覽。
圖9-3
通過右鍵菜單你可以複制檔案位址（copy location）、http請求頭資訊(copy request headers)和http響應頭資訊（copy response headers）。
如果不想使用該功能，可以選擇options菜單的“disable network monitoring”關閉該功能。
10ã             指令行調試
在“console”标簽了有一個指令行工具，我們可以在這裡運作一些腳本對頁面進行調試。
我們在指令行中輸入“document.getelementbyid('div2').innerhtml”看看效果（圖10-1），别忘了用tab鍵實作快速輸入關鍵字。在資訊區顯示了目前“div2”的顯示内容。
圖10-1
要輸入“document.getelementbyid”是不是覺得很麻煩？這裡有一個簡單的辦法，用“$”符号代替“document.getelementbyid”，我們再在指令行中輸入“$('div2').innerhtml”，然後看看結果，是一樣（圖10-2）。
圖10-2
當你通過“inspect”鎖定了一些html element時，你可以通過“$1”來通路最後一個element，依次類推，我們可以通過“$n”(n>1)通路依次倒序通路鎖定的element。
我們來實踐一下，重新整理一下測試頁面，然後按下“inspect”按鈕，滑鼠單擊“方塊二”，然後在按下“inspect”按鈕，單擊“方塊一”。将firebug視窗切換回“console”标簽，然後輸入“$1”，回車後再輸入“$2”，檢視一下結果（圖10-3），正是我們用鎖定過的element。
圖10-3
在指令行還可以通過“$$(html 标記)”傳回一個element數組。我們在測試頁輸入“$$(‘div’)”看看（圖10-4）。我們再輸入“$$(‘div’)[0]”看看（圖10-5）。是不是很便于我們對html進行調試。
圖10-4
圖10-5
指令行的所有特殊函數請看表3：
指令
$(id)
通過id傳回element。
$$(selector)
通過css選擇器傳回element數組。
$x(xpath)
通過xpath表達式傳回element數組。
dir(object)
列出對象的所有屬性，和在dom标簽頁檢視該對象的是一樣的。
dirxml(node)
列出節點的html或xml的源代碼樹，和在html标簽頁檢視改節點一樣。
cd(window)
預設情況下，指令行相關的是頂層window對象，使用該指令可切換到frame裡的window獨享。
clear()
清空資訊顯示區，和單擊按鈕clear功能一樣。
inspect(object[, tabname])
監視一個對象。tabname表示在那個标簽頁對該對象進行監視，可選值為“html”、“css”、“script”和“dom”。
keys(object)
傳回由對象的屬性名組成的數組。
values(object)
傳回由對象的屬性值組成的數組。
debug(fn)
在函數的第一行增加一個斷點。
undebug(fn)
移除在函數第一行的斷點。
monitor(fn)
跟蹤函數fn的調用。
unmonitor(fn)
不跟蹤函數fn的調用。
monitorevents(object[, types])
跟蹤對象的事件。types的可選值為“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
unmonitorevents(object[, types])
不跟蹤對象的事件。types的可選值為“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
profile([title])
開始對腳本進行性能測試，可選參數title将作為測試結果的标題。
profileend()
結束腳本性能測試。
表3
指令行有指令記憶功能，可通過上、下箭頭鍵選擇已經輸入過的指令。
11ã             在腳本檔案中加入調試指令
有沒有對腳本調試中經常需要alert感到厭煩？有了firebug，你就可以放下alert了，因為firebug有功能比alert更強大的console.log。
先讓我們來認識一下console.log，在測試檔案腳本區域我們輸入一下代碼：
console.log('hello');
重新整理一下頁面，将firebug切換到“console”标簽看看（圖11-1），在資訊區顯示出了我們要輸出的資訊“hello”。當然了，單憑這個就說console.log有點誇大，我們修改一下test函數，把“document.getelementbyid('div2').innerhtml=i;”修改為：
console.log('目前的參數是：%d',i);
圖11-1
重新整理頁面後看看結果（圖11-2）。是不是挺不錯的？console.log可以象c語言的printf一樣實作格式化輸出。我們再在腳本區加入一個語句：
console.log(2,4,window,test,document);
圖11-2
重新整理頁面後看看結果（圖11-3）。console.log可以連續輸出多個對象，而且如果對象是dom、函數，還可以直接點選去到該對象。
圖11-3
如果你覺得console.log輸出的文本太單調，不能表示出不同的資訊，那麼你可以通過console.debug、 console.info、 console.warn和console.error來代替console.log，這些函數分别會用不同的背景顔色和文字顔色來顯示資訊。
我們來看看測試一下這些函數的輸出，在腳本中加入：
console.debug('this is console.debug!');
console.info('this is console.info!');
console.warn('this is console.warn!');
console.error('this is console.error!');
重新整理頁面看看結果（圖11-4）。
圖11-4
有時候，為了更清楚友善的檢視輸出資訊，我們可能需要将一些調試資訊進行分組輸出，那麼可以使用console.group來對資訊進行分組，在組資訊輸出完成後用console.groupend結束分組。我們測試一下把剛才的4個輸出作為一個分組輸出，修改代碼為：
console.group('開始分組：');
console.groupend();
重新整理頁面看看結果（圖11-5）。在console.group中，我們還可以加入一個組标題“<code>開始分組：</code>”。如果需要，我們還可以通過嵌套的方式，在組内再分組。
圖11-5
有時候，我們需要寫一個for循環列出一個對象的所有屬性或者某個html element下的所有節點，有了firebug後，我們不需要再寫這個for循環了，我們隻需要使用console.dir(object)或console.dirxml(element)就可以了。
在測試頁中加入代碼測試一下：
console.dir(document.getelementbyid('div1'));
console.dirxml(document.getelementbyid('div1'));
結果請看圖11-6和圖11-7。
圖11-6
圖11-7
是否想知道代碼的運作速度？很簡單，使用console.time和console.timeend就可以。
修改一下test函數的代碼，測試一下運作1000次循環需要多少時間：
function test(){
console.time('test');
for(var i=0;i<1000;i++){
document.getelementbyid('div2').innerhtml=i;
//console.log('目前的參數是：%d',i);
}
console.timeend('test');
}
重新整理頁面，單擊“方塊二”，看看結果（圖11-8）。在這裡要注意的是console.time和console.timeend裡的參數要一緻才會有正确的輸出，而該參數就是資訊的标題。
圖11-8
是否想知道某個函數是從哪裡調用的？console..trace可幫助我們進行追蹤。在test函數的結尾加入：
console.trace();
重新整理頁面，單擊“方塊二”，看看結果（圖11-9）。結果顯示是在坐标（97，187）的滑鼠單擊事件執行了test函數，而調用的腳本是在simple.html檔案裡的第1行。因為是在html裡面的事件調用了test函數，是以顯示的行号是第1行。如果是腳本，則會顯示調用腳本的行号，通過單擊可以直接去到調用行。
圖11-9
如果想在腳本某個位置設定斷點，可以在腳本中輸入“debugger”作為一行。當腳本執行到這一行時會停止執行等待使用者操作，這時候可以通過切換到“script”标簽對腳本進行調試。
firebug還有其它的一些調試函數，這裡就不一一做介紹，有興趣可以自己測試。表4是所有函數的清單：
函數
console.log(object[, object, ...])
向控制台輸出一個資訊。可以輸入多個參數，輸出将已空格分隔各參數輸出。
第一參數可以包含格式化文本，例如：
console.log(‘這裡有%d個%s’,count,apple);
字元串格式：
%s ：字元串。
%d, %i：數字。
%f： 浮點數。
%o -超連結對象。
console.debug(object[, object, ...])
向控制台輸出一個資訊，資訊包含一個超連結連結到輸出位置。
console.info(object[, object, ...])
向控制台輸出一個帶資訊圖示和背景顔色的資訊，資訊包含一個超連結連結到輸出位置。
console.warn(object[, object, ...])
向控制台輸出一個帶警告圖示和背景顔色的資訊，資訊包含一個超連結連結到輸出位置。
console.error(object[, object, ...])
向控制台輸出一個帶錯誤圖示和背景顔色的資訊，資訊包含一個超連結連結到輸出位置。
console.assert(expression[, object, ...])
測試一個表示是否為true，如果為false，送出一個例外資訊到控制台。
console.dir(object)
列出對象的所有屬性。
console.dirxml(node)
列出html或xml element的xml源樹。
console.trace()
輸出堆棧的調用入口。
console.group(object[, object, ...])
将資訊分組再輸出到控制台。通過console.groupend()結束分組。
console.groupend()
結束分組輸出。
console.time(name)
建立一個名稱為name的計時器，計算代碼的執行時間，調用console.timeend(name)停止計時器并輸出執行時間。
console.timeend(name)
停止名稱為name的計時器并輸出執行時間。
console.profile([title])
開始對腳本進行性能測試，title為測試标題。
console.profileend()
結束性能測試。
console.count([title])
計算代碼的執行次數。titile作為輸出标題。
表4
12ã             在ie中使用firebug
firebug是firefox的一個擴充，但是我習慣在ie中調試我的頁面怎麼辦？如果在頁面腳本中加入console.log()将調試資訊寫到friebug，在ie中肯定是提示錯誤的，怎麼辦？不用擔心，frirebug提供了frirbug lite腳本，可以插入頁面中模仿firebug控制台。
我們可以從一下位址下載下傳firebug lite：
<a href="http://www.getfirebug.com/releases/firebuglite1.0-b1.zip">http://www.getfirebug.com/releases/firebuglite1.0-b1.zip</a>
然後在頁面中加入：
<script language="javascript" type="text/javascript" src="/路徑/firebug.js"></script>
如果你不想在ie中模仿friebug控制台，隻是不希望console.log()腳本出現錯誤資訊，那麼在頁面中加入一下語句：
<script language="javascript" type="text/javascript" src="/路徑/firebugx.js"></script><code></code>
如果你不想安裝firebug lite，隻是想避免腳本錯誤，那麼可以在腳本中加入以下語句：
if (!window.console || !console.firebug)
{
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupend", "time", "timeend", "count", "trace", "profile", "profileend"];
window.console = {};
for (var i = 0; i < names.length; ++i)
window.console[names[i]] = function() {}
}
我們将firebug.js加入到測試頁面中，然後打開ie，加載頁面。頁面加載完成後，我們按下f12鍵就可以打開控制台了。每次頁面重新整理後，你都要按f12鍵打開控制台，是不是很煩？如果不想那麼，就在html标簽中加入“debug=’true’”，例如：
<code><html debug=</code>"true"<code>></code><code></code>
在friebug lite中也有指令行，但是功能沒那麼強。
13ã 快捷鍵和滑鼠操作
全局操作
打開firebug視窗
f12
關閉firebug視窗
在新視窗打開firebug
ctrl+f12
往前切換标簽
ctrl+`
将光标移到指令行
ctrl+shift+l
将光标移到搜尋框
ctrl+shift+k
進入inspect模式
ctrl+shift+c
進行javascript性能測試
ctrl+shift+p
重新執行最後一條指令行指令
ctrl+shift+e
html标簽
編輯屬性
單擊屬性名或值
編輯文本節點
單擊文本
編輯element
輕按兩下element标記
移到路徑裡的下一個節點
ctrl+.
移到路徑裡的上一個節點
ctrl+,
html編輯
完成編輯
return
取消編輯
esc
移到下一個區域
tab
移到上一個區域
shift+tab
html inspect 模式
取消inspect
inspect 父節點
ctrl+up
inspect 子節點
ctrl+down
script标簽
繼續運作
f5
ctrl+/
單步執行（step over）
f10
ctrl+'
單步執行（step into）
f11
ctrl+;
退出函數（step out）
shift+f11
ctrl+shift+;
設定斷點
單擊行号
禁止斷點
在行号上shift+click
編輯斷點條件
在行号上right-click
運作到目前行
在行号上middle-click
在行号上ctrl+click
移到堆棧中的下一個函數
移到堆棧中的上一個函數
将焦點切換到scripts菜單
ctrl+space
将焦點切換到watch編輯
ctrl+shift+n
dom 标簽
輕按兩下在空白
移到路徑中下一個對象
移到路徑中上一個對象
dom 和watch編輯
結束編輯
自動完成下一個屬性
自動完成上一個屬性
css标簽
單擊屬性
插入新屬性
輕按兩下空白處
移動焦點到style sheets菜單
css編輯
按步長1增加數值
up
按步長1減少數值
down
按步長10增加數值
page up
按步長10減少數值
page down
自動完成下一個關鍵字
自動完成上一個關鍵字
layout标簽
編輯值
單擊值
layout編輯
指令行 (小)
執行
inspect結果
shift+return
打開結果滑鼠右鍵菜單
ctrl+return
指令行 (大)
13ã             總結
真是意想不到，firebug居然有那麼多好功能居然是我不知道。通過寫本篇文章，才認真的了解和學習了一次firebug，越學越感覺到它的威力。不過我學的也隻是皮毛，還有更多的功能和技巧需要在平時的使用中慢慢積累，是以這篇文章隻是一個簡單的介紹，還有很多東西是沒有涉及到的，而且因為我本身水準與能力有限，是以文中會有很多錯誤與遺漏，希望大家能多多諒解與指正！多謝！
例子最終源代碼：
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html debug='true'>
<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>
<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',i);
}
console.timeend('test');
console.trace();
}
</script>