Firebug的基本功能及如何使用Firebug_第1頁
Firebug的基本功能及如何使用Firebug_第2頁
Firebug的基本功能及如何使用Firebug_第3頁
Firebug的基本功能及如何使用Firebug_第4頁
Firebug的基本功能及如何使用Firebug_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、希望大家能諒解和指正！1、 安裝Firebug是與Firefox集成的，所以我們首先要安裝的事Firefox。安裝好瀏覽器后，打開瀏覽器，選擇菜單欄上的“工具”菜單，選擇“附加軟件”，在彈出窗口中點(diǎn)擊右下角的“獲取擴(kuò)展”。在打開的頁面的search輸入框中輸入“firebug”。等出來后點(diǎn)擊Firbug鏈接（圖1-1紅色圈住部分）進(jìn)入Firebug的下載安裝頁面。圖1-1在頁面中點(diǎn)擊Install Now（圖1-2）按鈕。圖1-2在彈出窗口（圖1-3）中等待3秒后單擊“立即安裝”按鈕。圖1-3等待安裝完成后會(huì)單擊窗口（圖1-4）中的“重啟Firefox”按鈕重新啟動(dòng)Firefox。圖1-4當(dāng)F

2、irefox重啟完后我們可以在狀態(tài)欄最右邊發(fā)現(xiàn)一個(gè)灰色圓形圖標(biāo)（），這就表示Firebug已經(jīng)安裝好了。灰色圖標(biāo)表示Firebug未開啟對(duì)當(dāng)前的編輯、調(diào)試和監(jiān)測(cè)功能。而綠色（）則表示Firebug已開啟對(duì)當(dāng)前網(wǎng)站進(jìn)行編輯、調(diào)試和監(jiān)測(cè)的功能。而紅色圖標(biāo)（）表示已開啟對(duì)當(dāng)前網(wǎng)站進(jìn)行編輯、調(diào)試和監(jiān)測(cè)的功能，而且檢查到當(dāng)前頁面有錯(cuò)誤，當(dāng)前圖標(biāo)表示有5個(gè)錯(cuò)誤。2、 開啟或關(guān)閉Firebug單擊Firebug的圖標(biāo)或者按F12鍵你會(huì)發(fā)現(xiàn)頁面窗口被分成了兩部分，上半部分是瀏覽的頁面，下半部分則是Firebug的控制窗口（圖2-1）。如果你不喜歡這樣，可以按CTRL+F12或在前面操作后單擊右上角的上箭頭按鈕

3、，彈出一個(gè)新窗口作為Firebug的控制窗口。圖2-1從圖2-1中我們可以看到，因?yàn)槲覀冮_啟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”開啟Firebug，則以后無論瀏覽任何網(wǎng)站，F(xiàn)irebug都處于活動(dòng)狀態(tài)，隨時(shí)可以進(jìn)行編輯、調(diào)試和檢測(cè)。不過一般的習(xí)慣我們只是對(duì)自己開發(fā)的網(wǎng)站進(jìn)行編輯、調(diào)試和檢測(cè)，所以我們只單擊“Enable Firebug for this web site”開啟

4、Firebug就行了。開啟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ū)最左邊的臭蟲圖標(biāo)，打開主菜單，選擇“Disable Firebug”或“Disable Firebug for xxxxx”。3、 Firebug主菜單單擊功能區(qū)最左邊的臭蟲圖標(biāo)可打開主菜單（圖3-1），其主要功能描述請(qǐng)看表1。圖3

5、-1菜單選項(xiàng)說明Disable Firebug關(guān)閉/開啟Firebug對(duì)所有網(wǎng)頁的編輯、調(diào)試和檢測(cè)功能Disable Firebug for xxxxx關(guān)閉/開啟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 設(shè)置Firebug控制窗口永遠(yuǎn)在新窗口

6、打開Show Prevw tooltips設(shè)置是否顯示預(yù)覽提示。Shade Box Model當(dāng)前查看狀態(tài)為HTML，鼠標(biāo)在HTML element標(biāo)簽上時(shí)，頁面會(huì)相應(yīng)在當(dāng)前標(biāo)簽顯示位置顯示一個(gè)邊框表示該標(biāo)簽范圍。這個(gè)選項(xiàng)的作用是設(shè)置是否用不同顏色背景表示標(biāo)簽范圍。Firebug Website.打開Firebug主頁。Documentation.打開Firebug文檔頁。Discussion Group打開Firebug討論組。Contribute打開捐助Firebug 頁面。表14、 控制臺(tái)（Console）單擊功能區(qū)第二欄的“Console”標(biāo)簽可切換到控制臺(tái)（圖4-1）?？刂婆_(tái)的作用是

7、顯示各種錯(cuò)誤信息（可在Options里定義），顯示腳本代碼中內(nèi)嵌的控制臺(tái)調(diào)試信息，通過命令行對(duì)腳本進(jìn)行調(diào)試，通過單擊Profile對(duì)腳本進(jìn)行測(cè)試?？刂婆_(tái)分兩個(gè)區(qū)域，一個(gè)是信息區(qū)，一個(gè)是命令行，通過Options菜單的“Larger mand Line”可改變命令行位置。圖4-1 Options菜單的選項(xiàng)請(qǐng)看表2。菜單選項(xiàng)說明Show JavaScript Errors顯示腳本錯(cuò)誤。Show JavaScript Warnings顯示腳本警告。Show CSS Errors顯示CSS錯(cuò)誤。Show Errors顯示XML錯(cuò)誤。Show XMLHttpRequests顯示XMLHttpReques

8、ts。Larger Command Line將命令行顯示從控制窗口底部移動(dòng)右邊，擴(kuò)大輸入?yún)^(qū)域。表2單擊“Clear”按鈕可清除控制臺(tái)的控制信息。5、 頁面查看功能單擊功能區(qū)第二欄的“HTML”標(biāo)簽可切換到源代碼查看功能（圖5-1）。雖然Firefox也提供了查看頁面源代碼的功能，但它顯示的只是頁面文件本身的源代碼，通過腳本輸出的HTML源碼是看不到。而Firebug則是所見即所得，是最終的源代碼。圖5-1我們來看一個(gè)例子，文件源代碼如下：<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN" "http:/www.w3.

9、org/TR/html4/strict.dtd"><html><head> <title>簡單的例子</title> < http-equiv="content-type" content="text/html; charset=utf-8"> <style> #1background:red;width:100px;height:100px; #div2background:blue;width:100px;height:100px;margin:10px;padd

10、ing:10px;border:5px solid black;color:white; #div3background:yellow;width:50px;height:50px;margin-left:25px; </style></head><body scroll="no"> <div id="div1">方塊一</div> <div id="div2">方塊二</div> <script> document.getElementB

11、yId('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中我們可以看到，信息區(qū)被分成了

12、兩個(gè)部分，左邊是顯示源代碼，右邊是一個(gè)功能區(qū)，可以從這里查看到HTML Element中的CSS定義、布局情況和DOM結(jié)構(gòu)。從圖5-2中我們可以看到，源代碼按DOM結(jié)構(gòu)分層次顯示的，通過層次折疊功能，我們就可以很方便分析代碼。在功能區(qū)的第一行還根據(jù)你的選擇，清晰的按子、父、根列出了當(dāng)前源代碼的層次（圖5-2紅色部分），單擊各部分，則會(huì)即刻轉(zhuǎn)到該部分的源代碼。圖5-3在源代碼上移動(dòng)鼠標(biāo)，頁面就會(huì)出現(xiàn)一個(gè)半透明的方塊，指示當(dāng)前鼠標(biāo)所指源代碼的顯示區(qū)域，當(dāng)選擇。在圖5-4中，鼠標(biāo)正指向“div1”，而在頁面中“div1”的顯示區(qū)域上被一個(gè)半透明的方塊遮蓋了。圖5-4如果你把“Inspect”按鈕按下

13、，功能正好相反，在頁面鼠標(biāo)，則當(dāng)前顯示區(qū)域的源代碼會(huì)被加亮顯示出來。在圖5-5中，我們可以看到鼠標(biāo)指針正指向“方塊二”，而在源代碼中可以看到，“方塊二”的源代碼“<div id="div2">方塊二</div>”已被加亮顯示（紅色部分）。如果你單擊某個(gè)顯示區(qū)域，則該區(qū)域的源代碼會(huì)被選中。圖5-5是不是很方便？方便是方便，但是我的源代碼很多，而且有些區(qū)域在頁面中不方便鼠標(biāo)指定，怎么辦？沒關(guān)系，我們還有一個(gè)厲害武器，搜索功能。譬如我們知道某個(gè)HTML Element的ID是“div2”，但在層層疊疊的源代碼中不好找，在頁面中鼠標(biāo)也很難找到，那我們就在功能

14、區(qū)的搜索框中輸入“div2”，再看看源代碼區(qū)域，“div2”被加亮顯示出來了（圖5-6紅色部分）。在這個(gè)簡單的例子可能看不出很好的效果，大家可以嘗試一下把“div1”先折疊起來，然后在搜索框輸入“div3”，你可以看到“div1”會(huì)自動(dòng)展開，并將“div3”加亮顯示，如果還覺得不夠理想，可以找一個(gè)源代碼比較多的例子測(cè)試一下。圖5-6除了通過按下“Inspect”按鈕，單擊顯示區(qū)域選擇源代碼，我們還可以通過單擊源代碼中的HTML標(biāo)記（開始或結(jié)束標(biāo)記都可以）來選擇。我們嘗試一下把鼠標(biāo)移動(dòng)到HTML標(biāo)記，會(huì)發(fā)現(xiàn)鼠標(biāo)指針變成了手的形狀，這說明我們可以通過單擊選擇該源代碼。選擇源代碼后，我們就可以通過右

15、邊的功能區(qū)查看、編輯和調(diào)試它的CSS定義和盒子模型（CSS盒子模型請(qǐng)參閱相關(guān)說明，這里就不再贅述了），還有一個(gè)很好的功能就是當(dāng)外部編輯器修改了源代碼（沒有刪除該源代碼，只是修改），我們?cè)跒g覽器重新加載頁面后，選擇的源代碼不會(huì)改變，我們可以很方便的觀察源代碼的變化與效果。有沒有經(jīng)常為調(diào)試某個(gè)頁面效果在源代碼編輯器和瀏覽器之間切換，一次又一次的刷新而感到懊惱？有了Firebug你就不用再懊惱了。你可以直接在源代碼中進(jìn)行編輯，然后查看效果。如果只是修改已經(jīng)存在的屬性，例如要修改“div2”的內(nèi)部文本，則直接將鼠標(biāo)移動(dòng)到文本上面，等鼠標(biāo)指針換成“I”，單擊即可進(jìn)行編輯了。其它已存在的屬性和屬性值也可以

16、這樣直接進(jìn)行編輯。如果要為某Element添加屬性，請(qǐng)將鼠標(biāo)移動(dòng)到該Element上，等光標(biāo)變?yōu)椤癐”的時(shí)候，單擊鼠標(biāo)右鍵，從菜單中選擇“New Attribute.”，在顯示的編輯框中輸入你要添加的屬性名稱就可以了。圖5-7圖5-8我們嘗試一下為“div2”增加一個(gè)“onclick”屬性，單擊的結(jié)果是將“div2”的顯示文本修改為“單擊”。把光標(biāo)移動(dòng)到“div2”上，然后單擊鼠標(biāo)右鍵，選擇“New Attribute.”（圖5-7），在編輯框中輸入“onclick”，最后按一下回車鍵（圖5-8），出現(xiàn)屬性值輸入框后，輸入“this.innerHTML=單擊”，回車后我們可以繼續(xù)添加下一個(gè)屬性

17、，這次測(cè)試不需要，所以按ESC結(jié)束我們的輸入。我們來檢驗(yàn)一下修改結(jié)果，單擊頁面“div2”的區(qū)域（圖5-9），“div2”的顯示文本已修改為“單擊”了，而源代碼也改變了。有沒有發(fā)現(xiàn)，“div2”被加亮顯示了？這又是Firebug的一個(gè)功能。只要我們通過頁面中的操作修改了Element的屬性，F(xiàn)irebug就會(huì)在源代碼中通過加亮的方式指示當(dāng)前操作修改那些屬性值。譬如我們單擊某個(gè)鏈接修改了一個(gè)iframe里的src，那么這個(gè)src的屬性值就會(huì)被加亮顯示。又譬如我們單擊某個(gè)鏈接修改了一個(gè)image里的圖像，那么它的src屬性值也會(huì)被加亮顯示。我們可以通過Options菜單里的“Highlight C

18、hanges”設(shè)置是否加亮顯示改變。而“Expand Changes”則是設(shè)置被改變的源代碼折疊起來看不見時(shí)展開讓它可見。而“Scroll Changes into view”則是源代碼很多，被改變的源代碼不在可視區(qū)域時(shí)，將被改變的源代碼滾動(dòng)到可視區(qū)域。圖5-9有時(shí)候我們不單是要增加一兩個(gè)屬性，而是要做更多的修改，這怎么辦呢？很簡單，選擇你要更改Element，然后單擊功能區(qū)第一行的“Edit”按鈕或者直接將鼠標(biāo)移動(dòng)到要修改的Element上，單擊鼠標(biāo)右鍵，選擇“Edit HTML.”，這時(shí)候，源代碼區(qū)域?qū)⑶袚Q到編輯狀態(tài)，你可以隨意的修改你選擇的源代碼了。我們嘗試修改一下“div2”，將被修改

19、顯示文本修改回“方塊二”，我們選擇“div2”，然后單擊“Edit”按鈕（圖5-10），將顯示文本修改回“方塊二”，然后再次單擊“Edit”按鈕退出編輯狀態(tài)，如果要放棄修改，可以按ESC鍵退出。因?yàn)槭撬娂此玫?，所以我們?cè)谛薷牡臅r(shí)候，頁面會(huì)同時(shí)刷新顯示。圖5-10如果要修改Element的CSS定義怎么辦？很簡單，選擇該Element，然后在右邊的窗口選擇“Style”標(biāo)簽，這里顯示的就是當(dāng)前Element的CSS定義了。我們?cè)谶@里可以對(duì)CSS定義進(jìn)行添加、編輯、刪除、禁止等操作。我們嘗試一下把“div2”的背景色禁止了看看。將鼠標(biāo)移動(dòng)到“background”這行（圖5-11），我們可以看

20、到在這行的最右邊會(huì)有一個(gè)灰色的禁止圖標(biāo)，只要單擊這個(gè)禁止圖標(biāo)，就可以禁止了這個(gè)CSS屬性了。我們單擊這個(gè)圖標(biāo)看看效果，頁面中的“div2”已經(jīng)變成白色背景了，而禁止圖標(biāo)也變成紅色，而文本會(huì)則變成灰色（圖5-12），這說明已經(jīng)禁止了“background”了。當(dāng)然了，這個(gè)操作也可以通過鼠標(biāo)右鍵的“Disable XXXXX”來實(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)一

21、個(gè)藍(lán)色背景的方框？這是Firebug提供背景預(yù)覽功能，讓我們很直觀的知道當(dāng)前背景是什么。如果背景是圖片的話，顯示的將是背景圖片的縮略圖。繼續(xù)我們的操作，單擊屬性值，在出現(xiàn)的編輯框中將“blue”修改為“green”。好了，背景已經(jīng)修改為綠色了?，F(xiàn)在的顯示文本是左對(duì)齊的，我想讓它居中對(duì)齊，這需要在CSS里加一個(gè)“text-align”的屬性，值為“center”。請(qǐng)?jiān)贑SS上單擊鼠標(biāo)右鍵，在菜單中選擇“New Property.”，在編輯框中輸入“te”，F(xiàn)irebug已通過自動(dòng)完成功能幫我們輸入“text-align”了（圖5-14），按Tab鍵或回車，在屬性值中我們輸入“c”，F(xiàn)irebug

22、再次幫我們自動(dòng)完成了“center”（圖5-15），按Tab鍵或回車完成輸入，如果不需要繼續(xù)輸入新屬性，按ESC或單擊鼠標(biāo)取消輸入。文本“方塊二”現(xiàn)在已經(jīng)居中顯示了。如果忘記了某個(gè)屬性值有那些選項(xiàng)怎么辦？不要緊，在輸入屬性值的時(shí)候可以通過上、下箭頭選擇我們需要的屬性值。在“Style”標(biāo)簽里我們可以選擇“Options”菜單里的“Show Computed Style”查看瀏覽器默認(rèn)的風(fēng)格定義。圖5-11圖5-12圖5-13圖5-14圖5-15頁面設(shè)計(jì)中，我們有時(shí)候最頭疼的是什么？是盒子模型！為了調(diào)整一個(gè)Element的margin、border、padding和相對(duì)位置，我們往往需要花很多工

23、夫去修改源代碼，然后刷新頁面查看效果。有了Firebug，你就可以輕松應(yīng)對(duì)了。我們將右邊的區(qū)域切換到“Layout”標(biāo)簽（圖5-16），你會(huì)看到一個(gè)盒子模型，里面從外到里通過不同的線和顏色劃分出了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），然后留意一下頁面，頁面在頂部多了一條水平標(biāo)尺，在左邊多一條垂直標(biāo)尺，而4條實(shí)線指示出了當(dāng)前鼠標(biāo)指示的區(qū)域?qū)嶋H位置，通過與標(biāo)尺的交點(diǎn)可以知道該區(qū)域離頁面顯示區(qū)域左上角的偏移量（單位是

24、px），當(dāng)然我們也可以通過layout中的數(shù)字計(jì)算出這些偏移量。在圖中，我們還可以看到，在內(nèi)容區(qū)域的外面還有3個(gè)不同顏色的區(qū)域，它們從里到外用不同顏色表示了padding、border、margin的位置和偏移量。只要將鼠標(biāo)移動(dòng)到不同區(qū)域，頁面中的4條實(shí)線也會(huì)改變位置，指示出頁面中相應(yīng)的區(qū)域。我們還可以通過修改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，按回車可繼續(xù)修改高度值，輸入200，回車后完成修改。頁面中的“div2”區(qū)域已經(jīng)擴(kuò)展到200&

25、#215;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源代碼上的CSS屬性。有時(shí)候某些Element會(huì)有相同的屬性，也有自己特殊的屬性，而特殊的屬性想寫在Element的源代碼上，就可以在Style里單擊鼠標(biāo)右鍵選擇“Edit Element Style.”進(jìn)行添加。如果有興趣的

26、話，大家可以嘗試修改“Layout”里的其它屬性值，看看頁面的變化，這里我就不再一一說明了。如果不想在頁面中顯示標(biāo)尺和4條實(shí)線，可以不選擇“Options”菜單里的“Show Rules and Guides”。圖5-16圖5-17圖5-18圖5-19在源代碼顯示區(qū)域我們還可以通過鼠標(biāo)右鍵復(fù)制源代碼和顯示內(nèi)容，這里就不一一說明了。DOM的說明請(qǐng)看查看DOM結(jié)構(gòu)一節(jié)，兩者是一樣的。在源代碼區(qū)域中如果覺得源代碼顯示太密，可以將“Options”菜單里的“Show White Space”選項(xiàng)打開，每個(gè)源代碼塊之間會(huì)用空白行隔離。如果要查看源代碼的注釋內(nèi)容，請(qǐng)將“Options”菜單里的“Show Comments”選項(xiàng)打開。這里要提醒大家一下，在HTML里調(diào)試出正確的源代碼和CSS后，別忘記將源代碼和CSS的修改結(jié)果復(fù)制到你的源代碼文件中，不然你的調(diào)試結(jié)果在頁面刷新后會(huì)付之東流。切記！切記！6、 查看CSS定義將功能區(qū)第二行的標(biāo)簽切換到“CSS”，在這里我們

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論