調(diào)試工具firebug的使用方法

FireBug的使用方法。Firebug的好處在于，它可以顯示動(dòng)態(tài)生DOMFirebugDOM進(jìn)行修改，而這些修改會(huì)反映到現(xiàn)實(shí)上，并且通過Firebug提供的控制臺(tái)可以直接執(zhí)行Javascript也可以配置console.debug、和console.error等日志方法，以便于。FirebugFirefoxFirefox的五星級(jí)強(qiáng)力推薦插件之一。它HTMLJavascriptJavaScriptCSS、HTML和Ajax的得力助手。Firebug如同一把精巧的，從各個(gè)不同的角度剖析Web頁面內(nèi)部的細(xì)節(jié)層面，給Web開發(fā)者帶來很大的便利。這是一款讓人愛不釋手的插件，如果你以前沒有接觸過它也許在閱讀本文之后會(huì)有一試的目前版本為Firebug1.4。Firebug1.41firebug-1.4.2-fx.xpi,FireFox3.5(FireFox3.5也二、Firebug1.4如上圖所示，我們可以查看到firebug 的Tab 按鈕，具體包1、ConsoleAjaxXMLHttpRequestspost2、Html2Html，每一個(gè)之間的從屬并行關(guān)系的折疊功能能夠幫助你集中精力分析代碼。源代碼上DOM3httmlparent、childHTML查看器中直接修改HTML源代碼，并在瀏覽器中第一時(shí)間看到Firebug的粉絲了。，利用Inspect檢查功能，我們還可以用鼠標(biāo)在頁面中直接選擇一些區(qū)塊，查看相應(yīng)的HTMLCSS樣式表，真正的做到所見即所得，如果你使用了外部編輯器修改了當(dāng)3、CSS這時(shí)候用CSS調(diào)試工具可以輕易編輯它的位置——你可以根據(jù)需要隨意挪動(dòng)象素。如圖34CSS我們可以利用Firebug來查看頁面中某一區(qū)塊的CSS樣式表，如果進(jìn)一步展開右側(cè)Layouttab的話，它會(huì)以標(biāo)尺的形式將當(dāng)前區(qū)塊占用的面積清楚地標(biāo)識(shí)出來，精確到象素，的幫助，你可以籍此分析offset、margin、padding、size之間的關(guān)系，從而找出解決問題的4所示。Firebug能將頁面中的CSSjavascript以及網(wǎng)頁中的載入所消耗的時(shí)間以矩狀圖呈現(xiàn)出來，一個(gè)外部文件甚至是xmlHttpRequestshttp5所示。56、Javascriptjavascript有性能上的問題或者不是太完美，可以通過面板上的Profile來統(tǒng)計(jì)每段運(yùn)行6所示6Javascript7、DOM ObjectModel)里頭包含了大量的Object以及函數(shù)、，在從前，你要想從中查到需要的內(nèi)容，絕非易事，這好比你去了一個(gè)巨大的館，想要找到幾本名字不太確切的小書，眾多的選擇會(huì)讓你無所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內(nèi)部結(jié)構(gòu)，幫助你快速定位DOM對(duì)象。雙擊一個(gè)DOM對(duì)象，就能夠編輯它的 .get之后，按下tab鍵就能補(bǔ)齊為 按下shift+tab又會(huì)恢復(fù)原狀。用了Firebug的DOM查看器，你的javascript從此找到了驅(qū)使的對(duì)象，Web開發(fā)也許就成了一件樂事。具體如圖7所示。7DOM美化調(diào)優(yōu)