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" c> <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”中包含有代碼“
<div id="div3">
方塊三</div>
”的，但是
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中，我們可以看到鼠標指針正指向“方塊二”，而在源代碼中可
以看到，“方塊二”的源代碼“
<div
id="div2">
方塊二</div>
”已被加亮顯示（紅色部分）。如果你單擊某個顯示區域，則該區域的源代碼會被選中。
|
|
| 圖 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”，最後按一下回車鍵（圖 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”功能類似。