當(dāng)前位置：首頁(yè) > 编程语言 > java >内容正文

java

Javascript的调试利器：Firebug使用详解

發(fā)布時(shí)間：2023/12/20 java 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Javascript的调试利器：Firebug使用详解小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

copy from: http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx

Javascript的調(diào)試，是開(kāi)發(fā)Web應(yīng)用尤其是AJAX應(yīng)用很重要的一環(huán)，目前對(duì)Javascript進(jìn)行調(diào)試的工具很多，我比較喜歡使用的是Firebug。Firebug是Joe Hewitt開(kāi)發(fā)的一套與Firefox集成在一起的功能強(qiáng)大的web開(kāi)發(fā)工具，可以實(shí)時(shí)編輯、調(diào)試和監(jiān)測(cè)任何頁(yè)面的CSS、HTML和JavaScript。

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

1、? 安裝

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

圖1-1

在頁(yè)面中點(diǎn)擊Install Now（圖1-2）按鈕。

圖1-2

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

圖1-3

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

圖1-4

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

2、? 開(kāi)啟或關(guān)閉Firebug

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

圖2-1

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

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

圖2-2

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

3、? Firebug主菜單

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

圖3-1

菜單選項(xiàng)	說(shuō)明
Disable Firebug	關(guān)閉/開(kāi)啟Firebug對(duì)所有網(wǎng)頁(yè)的編輯、調(diào)試和檢測(cè)功能
Disable Firebug for xxxxx	關(guān)閉/開(kāi)啟Firebug對(duì)xxxxx網(wǎng)站的編輯、調(diào)試和檢測(cè)功能
Allowed Sites	設(shè)置允許編輯、調(diào)試和檢測(cè)的網(wǎng)站
Text Size：Increase text size	增大信息區(qū)域顯示文本的字號(hào)
Text Size：Decrease text size	減少信息區(qū)域顯示文本的字號(hào)
Text Size：Normal text size	信息區(qū)域以正常字體顯示
Options：Always Open in New Window	設(shè)置Firebug控制窗口永遠(yuǎn)在新窗口打開(kāi)
Show Preview tooltips	設(shè)置是否顯示預(yù)覽提示。
Shade Box Model	當(dāng)前查看狀態(tài)為HTML，鼠標(biāo)在HTML element標(biāo)簽上移動(dòng)時(shí)，頁(yè)面會(huì)相應(yīng)在當(dāng)前標(biāo)簽顯示位置顯示一個(gè)邊框表示該標(biāo)簽范圍。這個(gè)選項(xiàng)的作用是設(shè)置是否用不同顏色背景表示標(biāo)簽范圍。
Firebug Website..	打開(kāi)Firebug主頁(yè)。
Documentation..	打開(kāi)Firebug文檔頁(yè)。
Discussion Group	打開(kāi)Firebug討論組。
Contribute	打開(kāi)捐助Firebug 頁(yè)面。
表1

4、? 控制臺(tái)（Console）

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

圖4-1

??? Options菜單的選項(xiàng)請(qǐng)看表2。

菜單選項(xiàng)	說(shuō)明
Show JavaScript Errors	顯示腳本錯(cuò)誤。
Show JavaScript Warnings	顯示腳本警告。
Show CSS Errors	顯示CSS錯(cuò)誤。
Show XML Errors	顯示XML錯(cuò)誤。
Show XMLHttpRequests	顯示XMLHttpRequests。
Larger Command Line	將命令行顯示從控制窗口底部移動(dòng)右邊，擴(kuò)大輸入?yún)^(qū)域。
表2

單擊“Clear”按鈕可清除控制臺(tái)的控制信息。

5、? 頁(yè)面源代碼查看功能

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

圖5-1

我們來(lái)看一個(gè)例子，文件源代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

? <title>簡(jiǎn)單的例子</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>

? <div id="div1">方塊一</div>

? <div id="div2">方塊二</div>

? <script>

? ?? document.getElementById('div1').innerHTML+='<div id="div3">方塊三</div>';

? </script>?

</body>

</html>

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

圖5-2

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

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

圖5-3

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

圖5-4

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

圖5-5

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

圖5-6

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

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

圖5-7

圖5-8

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

圖5-9

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

圖5-10

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

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

<!--[if !vml]--><!--[endif]-->
圖5-11
?
<!--[if !vml]--><!--[endif]-->
圖5-12
?
<!--[if !vml]--><!--[endif]-->
圖5-13
?
<!--[if !vml]--><!--[endif]-->	<!--[if !vml]--><!--[endif]-->
圖5-14	圖5-15

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

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

圖5-16

圖5-17

圖5-18

圖5-19

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

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

6、? 查看CSS定義

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

圖6-1

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

“Edit”按鈕功能和HTML的“Edit”功能類(lèi)似。

7、? 腳本調(diào)試

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

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

圖7-1

圖7-2

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

? ?? function test(){

?????? ? ??? for(var i=0;i<1000;i++){

?????? ? ?????????? document.getElementById('div2').innerHTML=i;

?????? ? ??? }

?????? ? }

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

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

圖7-3

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

圖7-4

圖7-5

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

圖7-6

圖7-7

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

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

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

圖7-8

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

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

8、? 查看DOM結(jié)構(gòu)

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

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

9、? 查看網(wǎng)絡(luò)狀況

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

圖9-1

圖9-2

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

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

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

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

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

圖9-3

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

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

10、????????????? 命令行調(diào)試

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

我們?cè)诿钚兄休斎搿?/span>document.getElementById('div2').innerHTML”看看效果（圖10-1），別忘了用TAB鍵實(shí)現(xiàn)快速輸入關(guān)鍵字。在信息區(qū)顯示了當(dāng)前“div2”的顯示內(nèi)容。

圖10-1

要輸入“document.getElementById”是不是覺(jué)得很麻煩？這里有一個(gè)簡(jiǎn)單的辦法，用“$”符號(hào)代替“document.getElementById”，我們?cè)僭诿钚兄休斎搿?/span>$('div2').innerHTML”，然后看看結(jié)果，是一樣（圖10-2）。

圖10-2

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

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

圖10-3

在命令行還可以通過(guò)“$$(HTML 標(biāo)記)”返回一個(gè)Element數(shù)組。我們?cè)跍y(cè)試頁(yè)輸入“$$(‘div’)”看看（圖10-4）。我們?cè)佥斎搿?/span>$$(‘div’)[0]”看看（圖10-5）。是不是很便于我們對(duì)HTML進(jìn)行調(diào)試。

圖10-4

圖10-5

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

命令	說(shuō)明
$(id)	通過(guò)id返回Element。
$$(selector)	通過(guò)CSS選擇器返回Element數(shù)組。
$x(xpath)	通過(guò)xpath表達(dá)式返回Element數(shù)組。
dir(object)	列出對(duì)象的所有屬性，和在DOM標(biāo)簽頁(yè)查看該對(duì)象的是一樣的。
dirxml(node)	列出節(jié)點(diǎn)的HTML或XML的源代碼樹(shù)，和在HTML標(biāo)簽頁(yè)查看改節(jié)點(diǎn)一樣。
cd(window)	默認(rèn)情況下，命令行相關(guān)的是頂層window對(duì)象，使用該命令可切換到frame里的window獨(dú)享。
clear()	清空信息顯示區(qū)，和單擊按鈕Clear功能一樣。
inspect(object[, tabName])	監(jiān)視一個(gè)對(duì)象。tabName表示在那個(gè)標(biāo)簽頁(yè)對(duì)該對(duì)象進(jìn)行監(jiān)視，可選值為“html”、“css”、“script”和“dom”。
keys(object)	返回由對(duì)象的屬性名組成的數(shù)組。
values(object)	返回由對(duì)象的屬性值組成的數(shù)組。
debug(fn)	在函數(shù)的第一行增加一個(gè)斷點(diǎn)。
undebug(fn)	移除在函數(shù)第一行的斷點(diǎn)。
monitor(fn)	跟蹤函數(shù)fn的調(diào)用。
unmonitor(fn)	不跟蹤函數(shù)fn的調(diào)用。
monitorEvents(object[, types])	跟蹤對(duì)象的事件。Types的可選值為“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
unmonitorEvents(object[, types])	不跟蹤對(duì)象的事件。Types的可選值為“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
profile([title])	開(kāi)始對(duì)腳本進(jìn)行性能測(cè)試，可選參數(shù)title將作為測(cè)試結(jié)果的標(biāo)題。
profileEnd()	結(jié)束腳本性能測(cè)試。
表3

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

11、????????????? 在腳本文件中加入調(diào)試命令

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

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

console.log('Hello');

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

console.log('當(dāng)前的參數(shù)是：%d',i);

圖11-1

?? 刷新頁(yè)面后看看結(jié)果（圖11-2）。是不是挺不錯(cuò)的？console.log可以象c語(yǔ)言的printf一樣實(shí)現(xiàn)格式化輸出。我們?cè)僭谀_本區(qū)加入一個(gè)語(yǔ)句：

console.log(2,4,window,test,document);

圖11-2

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

圖11-3

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

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

? ??? console.debug('This is console.debug!');

? ??? console.info('This is console.info!');

? ??? console.warn('This is console.warn!');

? ??? console.error('This is console.error!');

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

圖11-4

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

? ??? console.group('開(kāi)始分組：');

? ??? 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();

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

圖11-5

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

在測(cè)試頁(yè)中加入代碼測(cè)試一下：

? ??? console.dir(document.getElementById('div1'));

? ??? console.dirxml(document.getElementById('div1'));

??? 結(jié)果請(qǐng)看圖11-6和圖11-7。

圖11-6

圖11-7

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

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

? ??? 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');

?????? ? }

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

圖11-8

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

?????? ? ??? console.trace();

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

圖11-9

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

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

函數(shù)	說(shuō)明
console.log(object[, object, ...])	向控制臺(tái)輸出一個(gè)信息。可以輸入多個(gè)參數(shù)，輸出將已空格分隔各參數(shù)輸出。第一參數(shù)可以包含格式化文本，例如： console.log(‘這里有%d個(gè)%s’,count,apple); 字符串格式： %s ：字符串。 %d, %i：數(shù)字。 %f：? 浮點(diǎn)數(shù)。 %o -超鏈接對(duì)象。
console.debug(object[, object, ...])	向控制臺(tái)輸出一個(gè)信息，信息包含一個(gè)超鏈接鏈接到輸出位置。
console.info(object[, object, ...])	向控制臺(tái)輸出一個(gè)帶信息圖標(biāo)和背景顏色的信息，信息包含一個(gè)超鏈接鏈接到輸出位置。
console.warn(object[, object, ...])	向控制臺(tái)輸出一個(gè)帶警告圖標(biāo)和背景顏色的信息，信息包含一個(gè)超鏈接鏈接到輸出位置。
console.error(object[, object, ...])	向控制臺(tái)輸出一個(gè)帶錯(cuò)誤圖標(biāo)和背景顏色的信息，信息包含一個(gè)超鏈接鏈接到輸出位置。
console.assert(expression[, object, ...])	測(cè)試一個(gè)表示是否為true，如果為false，提交一個(gè)例外信息到控制臺(tái)。
console.dir(object)	列出對(duì)象的所有屬性。
console.dirxml(node)	列出HTML或XML Element的XML源樹(shù)。
console.trace()	輸出堆棧的調(diào)用入口。
console.group(object[, object, ...])	將信息分組再輸出到控制臺(tái)。通過(guò)console.groupEnd()結(jié)束分組。
console.groupEnd()	結(jié)束分組輸出。
console.time(name)	創(chuàng)建一個(gè)名稱(chēng)為name的計(jì)時(shí)器，計(jì)算代碼的執(zhí)行時(shí)間，調(diào)用console.timeEnd(name)停止計(jì)時(shí)器并輸出執(zhí)行時(shí)間。
console.timeEnd(name)	停止名稱(chēng)為name的計(jì)時(shí)器并輸出執(zhí)行時(shí)間。
console.profile([title])	開(kāi)始對(duì)腳本進(jìn)行性能測(cè)試，title為測(cè)試標(biāo)題。
console.profileEnd()	結(jié)束性能測(cè)試。
console.count([title])	計(jì)算代碼的執(zhí)行次數(shù)。titile作為輸出標(biāo)題。
表4

12、????????????? 在IE中使用Firebug

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

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

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

然后在頁(yè)面中加入：

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

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

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加入到測(cè)試頁(yè)面中，然后打開(kāi)IE，加載頁(yè)面。頁(yè)面加載完成后，我們按下F12鍵就可以打開(kāi)控制臺(tái)了。每次頁(yè)面刷新后，你都要按F12鍵打開(kāi)控制臺(tái)，是不是很煩？如果不想那么，就在html標(biāo)簽中加入“debug=’true’”，例如：

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

13、? 快捷鍵和鼠標(biāo)操作

全局操作

打開(kāi)Firebug窗口

F12

關(guān)閉Firebug窗口

F12

在新窗口打開(kāi)Firebug

Ctrl+F12

往前切換標(biāo)簽

Ctrl+`

將光標(biāo)移到命令行

Ctrl+Shift+L

將光標(biāo)移到搜索框

Ctrl+Shift+K

進(jìn)入Inspect模式

Ctrl+Shift+C

進(jìn)行JavaScript性能測(cè)試

Ctrl+Shift+P

重新執(zhí)行最后一條命令行命令

Ctrl+Shift+E

HTML標(biāo)簽

編輯屬性

單擊屬性名或值

編輯文本節(jié)點(diǎn)

單擊文本

編輯Element

雙擊Element標(biāo)記

移到路徑里的下一個(gè)節(jié)點(diǎn)

Ctrl+.

移到路徑里的上一個(gè)節(jié)點(diǎn)

Ctrl+,

HTML編輯

完成編輯

Return

取消編輯

Esc

移到下一個(gè)區(qū)域

Tab

移到上一個(gè)區(qū)域

Shift+Tab

HTML Inspect 模式

取消Inspect

Esc

Inspect 父節(jié)點(diǎn)

Ctrl+Up

Inspect 子節(jié)點(diǎn)

Ctrl+Down

Script標(biāo)簽

繼續(xù)運(yùn)行

Ctrl+/

單步執(zhí)行（Step Over）

F10

Ctrl+'

單步執(zhí)行（Step Into）

F11

Ctrl+;

退出函數(shù)（Step Out）

Shift+F11

Ctrl+Shift+;

設(shè)置斷點(diǎn)

單擊行號(hào)

禁止斷點(diǎn)

在行號(hào)上Shift+Click

編輯斷點(diǎn)條件

在行號(hào)上Right-Click

運(yùn)行到當(dāng)前行

在行號(hào)上Middle-Click

在行號(hào)上Ctrl+Click

移到堆棧中的下一個(gè)函數(shù)

Ctrl+.

移到堆棧中的上一個(gè)函數(shù)

Ctrl+,

將焦點(diǎn)切換到Scripts菜單

Ctrl+Space

將焦點(diǎn)切換到Watch編輯

Ctrl+Shift+N

DOM 標(biāo)簽

編輯屬性

雙擊在空白

移到路徑中下一個(gè)對(duì)象

Ctrl+.

移到路徑中上一個(gè)對(duì)象

Ctrl+,

DOM 和Watch編輯

結(jié)束編輯

Return

取消編輯

Esc

自動(dòng)完成下一個(gè)屬性

Tab

自動(dòng)完成上一個(gè)屬性

Shift+Tab

CSS標(biāo)簽

編輯屬性

單擊屬性

插入新屬性

雙擊空白處

移動(dòng)焦點(diǎn)到Style Sheets菜單

Ctrl+Space

CSS編輯

完成編輯

Return

取消編輯

Esc

移到下一個(gè)區(qū)域

Tab

移到上一個(gè)區(qū)域

Shift+Tab

按步長(zhǎng)1增加數(shù)值

按步長(zhǎng)1減少數(shù)值

Down

按步長(zhǎng)10增加數(shù)值

Page Up

按步長(zhǎng)10減少數(shù)值

Page Down

自動(dòng)完成下一個(gè)關(guān)鍵字

自動(dòng)完成上一個(gè)關(guān)鍵字

Down

Layout標(biāo)簽

編輯值

單擊值

Layout編輯

完成編輯

Return

取消編輯

Esc

移到下一個(gè)區(qū)域

Tab

移到上一個(gè)區(qū)域

Shift+Tab

按步長(zhǎng)1增加數(shù)值

按步長(zhǎng)1減少數(shù)值

Down

按步長(zhǎng)10增加數(shù)值

Page Up

按步長(zhǎng)10減少數(shù)值

Page Down

自動(dòng)完成下一個(gè)關(guān)鍵字

自動(dòng)完成上一個(gè)關(guān)鍵字

Down

命令行 (小)

自動(dòng)完成上一個(gè)屬性

Tab

自動(dòng)完成下一個(gè)屬性

Shift+Tab

執(zhí)行

Return

Inspect結(jié)果

Shift+Return

打開(kāi)結(jié)果鼠標(biāo)右鍵菜單

Ctrl+Return

命令行 (大)

執(zhí)行

Ctrl+Return

13、????????????? 總結(jié)

真是意想不到，Firebug居然有那么多好功能居然是我不知道。通過(guò)寫(xiě)本篇文章，才認(rèn)真的了解和學(xué)習(xí)了一次Firebug，越學(xué)越感覺(jué)到它的威力。不過(guò)我學(xué)的也只是皮毛，還有更多的功能和技巧需要在平時(shí)的使用中慢慢積累，因此這篇文章只是一個(gè)簡(jiǎn)單的介紹，還有很多東西是沒(méi)有涉及到的，而且因?yàn)槲冶旧硭脚c能力有限，所以文中會(huì)有很多錯(cuò)誤與遺漏，希望大家能多多諒解與指正！多謝！

?
例子最終源代碼：

<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01//EN"?"http://www.w3.org/TR/html4/strict.dtd">
<html?debug='true'>
<head>
??<title>簡(jiǎn)單的例子</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"& gt;方塊三</div>';
/**//*??????console.log('Hello');
??????console.log(2,4,window,test,document);
??????console.group('開(kāi)始分組：');
??????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>

總結(jié)

以上是生活随笔為你收集整理的Javascript的调试利器：Firebug使用详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：关于asp.net中partial，as
下一篇： asp.net MVC2 初探十一