firefox插件Firebug的使用教程

firefox插件Firebug的使用教程什么是Firebug從事了數(shù)年的Web開發(fā)工作，越來越覺得現(xiàn)在對WEB開發(fā)有了更高的要求。要寫出漂亮的HTML代碼；要編寫精致的CSS樣式表展示每個頁面模塊；要調(diào)試javascript給頁面增加一些更活潑的要素；要使用Ajax給用戶帶來更好的體驗。一個優(yōu)秀的WEB開發(fā)人員需要顧及更多層面，才能交出一份同樣優(yōu)秀的作業(yè)。為幫助廣大正處于Web2?0洪流中的開發(fā)人員，在這里為大家介紹一款輕巧靈活的輔助開發(fā)工具。Firebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內(nèi)部的細節(jié)層面，給Web開發(fā)者帶來很大的便利。這是一款讓人愛不釋手的插件，如果你以前沒有接觸過它，也許在閱讀本文之后，會有一試的欲望。筆者在撰寫此文的時候，正逢 Firebug發(fā)布1.0正式版，這不能不說是種巧合。應(yīng)用Firebug插件雖然功能強大，但是它已經(jīng)和Firefox瀏覽器無縫地結(jié)合在一起，使用簡單直觀。如果你擔(dān)心它會占用太多的系統(tǒng)資源， 也可以方便地啟用/關(guān)閉這個插件，甚至針對特定的站點開啟這個插件。在安裝好插件之后，先用Firefox瀏覽器打開需要測試的頁面，然后點擊右下方的綠色按鈕或使用快捷鍵F12喚出Firebug插件，它會將當(dāng)前頁面分成上下兩個框架，如圖1所示。圖1:Firebug插件展開圖示從圖1中看到，F(xiàn)irebug有6個主要的Tab按鈕，下文將主要介紹介紹這幾方面的功能。ConsoleHTMLCSSScriptDomNet控制臺Html查看器Css查看器腳本條時期Dom查看器網(wǎng)絡(luò)狀況監(jiān)視Console控制臺控制臺能夠顯示當(dāng)前頁面中的javascript錯誤以及警告，并提示出錯的文件和行號，方便調(diào)試，這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細且具有參考價值。而且在調(diào)試Ajax應(yīng)用的時候也是特別有用，你能夠在控制臺里看到每一個XMLHttpRequests請求post出去的參數(shù)、URL，http頭以及回饋的內(nèi)容，原本似乎在幕后黑匣子里運作的程序被清清楚楚地展示在你面前。象Cshell或Pythonshell一樣，你還能在控制臺中查看變量內(nèi)容，直接運行javascript語句，就算是大段的javascript程序也能夠正確運行并拿到運行期的信息?？刂婆_還有個重要的作用就是查看腳本的log,從前你也許習(xí)慣了使用alert來打印變量，但是Firebug給我們帶來了一個新朋友console.log,最簡單的打印日志的語法是這樣的：console.log(”helloworld”)如果你有一堆參數(shù)需要組合在一起輸出，可以寫成這樣：console.log(2,4,6,8,”foo”,bar).Firebug的日志輸出有多種可選的格式以及語法，甚至可以定制彩色輸出，比起單調(diào)的 alert，顯然更加方便，限于篇幅，這里不做詳細說明，但是有志于提高debug效率的讀者，可以到Firebug的官方站點(見附錄)查看更詳細的教程。圖2:在控制臺里調(diào)試javascript*Insped:ClearProfileConnieHTMLCSSScriptIX>MNet Options-O"isnotdefined〉mgsfjfO"isnotdefined>>>hiadfeLert;detLLg,),:O-isnotdefined:;i5二二”土二二：0-isnotdefined查看和修改HTML第一次看到Firebug強大的HTML代碼查看器，就覺得它與眾不同，相比于Firefox自帶的HTML查看器，它的功能強大了許多。HTML首先你看到的是已經(jīng)經(jīng)過格式化的 HTML代碼，它有清晰的層次，你能夠方便地分辨出每一個標簽之間的從屬并行關(guān)系，標簽的折疊功能能夠幫助你集中精力分析代碼。源代碼上方還標記出了DOM的層次，如圖3所示，它清楚地列出了一個hml元素的parent、child以及root元素，配合Firebug自帶的CSS查看器使用，會給div+css頁面分析編寫帶來很大的好處。你還可以在 HTML查看器中直接修改HTML源代碼，并在瀏覽器中第一時間看到修改后的效果，光憑這一點就會讓許多頁面設(shè)計師死心塌地地成為Firebug的粉絲了。有時候頁面中的javascript會根據(jù)用戶的動作如鼠標的onmouseover來動態(tài)改變一些HTML元素的樣式表或背景色，HTML查看器會將頁面上改變的內(nèi)容也抓下來，并以黃色高亮標記，讓網(wǎng)頁的暗箱操作徹底成為歷史。利用Inspect檢查功能，我們還可以用鼠標在頁面中直接選擇一些區(qū)塊，查看相應(yīng)的HTML源代碼和CSS樣式表，真正的做到所見即所得，如果你使用了外部編輯器修改了當(dāng)前網(wǎng)頁，可以點擊Firebug的reload圖片重新載入網(wǎng)頁，它會繼續(xù)跟蹤你之前用Inspect選中的區(qū)塊，方便調(diào)試。圖3::HTML查看器Con的已HTMLCSSScriptDOMNetOptiGneCon的已HTMLCSSScriptDOMNetOptiGneTInspectEditimgpclk'\postentrvdrj^poBtitem.past cl^content dii^c國<h_21<L=-*rpa-E~t_26S*class= ttitLe*>+CpkLe_=;s=p-Dstz-eta>EJ<SGrlptsrs=iVTittjzpaseadZ.edce1e5：mdioa_tinn.d-dz?M>FilgtLL￡：</3http：i,B/ww.u-uBG.net/index.phijjaaruhi%pe：下的—好的h.ref=MhttiCSS調(diào)試Firebug的CSS調(diào)試器是專為網(wǎng)頁設(shè)計師們量身定做的。如今的網(wǎng)頁設(shè)計言必稱div+css，如果你是用table套出來的HTML頁面，就得按這規(guī)矩重構(gòu)一遍，否則顯得你不夠時髦！用div做出來的頁面的確能精簡HTML代碼，HTML標簽減肥的結(jié)果就是CSS樣式表的編寫成了頁面制作的重頭戲。Firebug的CSS查看器不僅自下向上列出每一個CSS樣式表的從屬繼承關(guān)系，還列出了每一個樣式在哪個樣式文件中定義。你可以在這個查看器中直接添加、修改、刪除一些CSS樣式表屬性，并在當(dāng)前頁面中直接看到修改后的結(jié)果。一個典型的應(yīng)用就是頁面中的一個區(qū)塊位置顯得有些不太恰當(dāng)，它需要挪動幾個象素。這時候用CSS調(diào)試工具可以輕易編輯它的位置一一你可以根據(jù)需要隨意挪動象素。如圖4中正在修改一個區(qū)塊的背景色。提示：如果你正在學(xué)習(xí)CSS樣式表的應(yīng)用，但是總記不住常用的樣式表有哪些值，可以嘗試在CSS調(diào)試器中選中一個樣式表屬性，然后用上下方向鍵來改變它的值，它會把可能的值一個個遍歷給你看。圖4:CSS查看器，能夠直接修改樣式表

InEpedzEdit?vntax_l'lize_c5G.C55TConsole CSS Net-synta:z_h￡1it1￡.synta::_h.￡.L.its.taolr^rcund-ddIct:加:叫tc-ider:二依131id黑叫￥打，0Ea-nt-ffiaiLy;'二」二宣f-a-nt~szze:1:ove:rflc-^:aLitgj:Eaddins:2p-!非囂lCpkH"willt巨一a：psce-:nDwra■口:-sr：rLts:c_：hLlit€.width:533dk::11.synts:-[_h-ilitE:45Spa:可視化的CSS尺標我們可以利用Firebug來查看頁面中某一區(qū)塊的CSS樣式表，如果進一步展開右側(cè)Layouttab的話，它會以標尺的形式將當(dāng)前區(qū)塊占用的面積清楚地標識出來，精確到象素，更讓人驚訝的是，你能夠在這個可視化的界面中直接修改各象素的值，頁面上區(qū)塊的位置就會隨改動而變化。在頁面中某些元素出現(xiàn)錯位或者面積超出預(yù)料值時，該功能能夠提供有效的幫助，你可以籍此分析offset、margin、padding、size之間的關(guān)系，從而找出解決問題的辦法。圖5:Firebug中的CSS標尺5C11111111110011111111150I11i1i1i2001111i1i1i25011Ii1i11??,c111113501IIi111i4001IIi111i4501II5C11111111110011111111150I11i1i1i2001111i1i1i25011Ii1i11??,c111113501IIi111i4001IIi111i4501II11i1i500111i1i1i5501IIi1i1ibLH：1II某人的棲息地的嚇-12-呃可叫;。5;44JAVASCRIPT-貌輯■作者Yolca■0-歸類于FIREFQX,Search_----150AJAX2oo協(xié)；■■i?H?■..低 idU?「e*HTMI =rrip|- H-t ■-h.、■寸I* ■wfoirl-mHIjJ ^1■■■■'■ 1■.T11I HUVl-JSW；I'A：?J；I課裸喜歡這個口lugn的,COMMONEDITPLUSInspectEditIa<h2ffpoE.t-26S.pa&ttitl...<d^#poE.titem.paEtdLayoutD-ON Options^36Cmtitle=rPeiinanentlinktcPirelsuE1?0betaisout"rslz^b&okmaik^1.Q"beta.姑-cut</-a>I件!—一沖皿開發(fā)工程師一定會網(wǎng)絡(luò)狀況監(jiān)視器也許有一天，你的老板或者客戶找到你，抱怨你制作的網(wǎng)頁速度奇慢，你該如何應(yīng)對？你或許會說這可能是網(wǎng)絡(luò)問題，或者是電腦配置問題，或者是程序太慢，或者直說是他們的人品問題？不管怎么說，最后你可能被要求去解決這個有多種可能的問題。網(wǎng)絡(luò)狀況監(jiān)視器能幫你解決這個棘手問題。Firebug的網(wǎng)絡(luò)監(jiān)視器同樣是功能強大的，它能將頁面中的CSS、javascript以及網(wǎng)頁中引用的圖片載入所消耗的時間以矩狀圖呈現(xiàn)出來，也許在這里你能一把揪出拖慢了你的網(wǎng)頁的元兇，進而對網(wǎng)頁進行調(diào)優(yōu)，最后老板滿意客戶歡喜，你的飯碗也因此而牢固。網(wǎng)絡(luò)監(jiān)視器還有一些其它細節(jié)功能，比如預(yù)覽圖片，查看每一個外 部文件甚至是xmlHttpRequests請求的http頭等等。圖6:網(wǎng)絡(luò)狀況監(jiān)視器

HTWILC55ScriptDOMNetOptionsttt26SOOW.net 21KE 二土ftEtvl^-ECKCCE^.net 6KE fs11 ilrte_ess.tBsOOM-net 2KB ■佳rvntaw_hilrtt_Jifr.jsOOE^.HEt 6KBturcliin.Jsgo叩崢日中^健軋oom 6?63msHeadersRfspofi巽Javascript調(diào)試器這是一個很不錯的javascript腳本調(diào)試器，占用空間不大，但是單步調(diào)試、設(shè)置斷點、變量查看窗口一個不少。正所謂麻雀雖小，五臟俱全。如果你有一個網(wǎng)站已經(jīng)建成，然而它的 javascript有性能上的問題或者不是太完美，可以通過面板上的Profile來統(tǒng)計每段腳本運行的時間，查看到底是哪些語句執(zhí)行時間過長，一步步排除問題。圖7:javascript調(diào)試器DOM查看器DOM(DocumentObjectModel)里頭包含了大量的Object以及函數(shù)、事件，在從前，你要想從中查到需要的內(nèi)容，絕非易事，這好比你去了一個巨大的圖書館，想要找到幾本名字不太確切的小書，眾多的選擇會讓你無所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內(nèi)部結(jié)構(gòu)，幫助你快速定位DOM對象。雙擊一個DOM對象，就能夠編輯它的變量或值，編輯的同時，你可能會發(fā)現(xiàn)它還有自動完成功能，當(dāng)你輸入document.get之后，按下tab鍵就能補齊為document-getElementByid，非常方便。如果你認為補齊得不夠理想，按下shift+tab又會恢復(fù)原狀。用了Firebug的DOM查看器，你的javascript從此找

到了驅(qū)使的對象，Web開發(fā)也許就成了一件樂事。圖8:Dom查看器『]nspeGIvnndow QG土llndtaw齡ConscleHTMLCSSSen砒DOM土llndtaw齡國parerstgs官Windtaw齡lindkra齡Windtaw齡lindkra齡llQilllV-建口：??■■■B-s-i-B-n-at/ind?xepKp.*'a-r-ehev*a；* .-nnr..n*rr:d?x. jrrjhj■:m.空EW['hiif.-- ::-