Firefox瀏覽器的調(diào)試工具Firebug的使用方法-創(chuàng)新互聯(lián)

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

河津網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,河津網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為河津數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的河津做網(wǎng)站的公司定做！

本文主要是根據(jù)Ext JS 3.0的開發(fā)過程，介紹下調(diào)試工具FireBug的使用方法。由于本人在開發(fā)Web過程，是FireFox表示偏愛，所以主要介紹Firefox+FireBug的詳細(xì)使用說明。而且EXT開發(fā)者都傾向于使用Firefox進(jìn)行開發(fā)。

Firebug的好處在于，它可以顯示動(dòng)態(tài)生成的DOM，甚至可以在Firebug里面直接對(duì)DOM進(jìn)行修改，而這些修改會(huì)反映到現(xiàn)實(shí)上，并且通過Firebug提供的控制臺(tái)，可以直接執(zhí)行Javascript腳本，也可以配置console.debug、console.info和console.error等日志方法，以便于跟蹤。

Firebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級(jí)強(qiáng)力推薦插件之一。它集HTML查看和編輯、Javascript控制臺(tái)、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士×××，從各個(gè)不同的角度剖析Web頁面內(nèi)部的細(xì)節(jié)層面，給Web開發(fā)者帶來很大的便利。這是一款讓人愛不釋手的插件，如果你以前沒有接觸過它，也許在閱讀本文之后，會(huì)有一試的欲望。目前最新版本為Firebug1.4。

一、下載FireFox3.5和Firebug1.4

注意如果你使用Firefox3.0以上的版本，就必須下載Firebug1.2以上的版本，否則不兼容。

1、FireFox3.5下載地址(迅雷下載)：

thunder://QUFodHRwOi8vZnRwLnBjb25saW5lLmNvbS5jbi9wdWIvZG93bmxvYWQvMjAwOTA4L0ZpcmVmb3hfU2V0dXBfMy41LjJfY2hzLmV4ZVpa

2、FireBug1.4:

http://releases.mozilla.org/pub/mozilla.org/addons/1843/firebug-1.4.2-fx.xpi

3、安裝

(1) 首先安裝FireFox3.5

(2) 然后雙擊firebug-1.4.2-fx.xpi,選擇打開方式為FireFox3.5(或者直接拖動(dòng)到FireFox3.5也可)

(3) 重啟FireFox3.5,在查看菜單中選擇firebug即可查看,具體展開圖如下圖所示：

圖1

二、Firebug1.4的應(yīng)用

如上圖所示，我們可以查看到firebug的Tab按鈕，具體包括:Console,HTML,CSS,Script,DOM,Net

1、Console控制臺(tái)

控制臺(tái)能夠顯示當(dāng)前頁面中的javascript錯(cuò)誤以及警告，并提示出錯(cuò)的文件和行號(hào)，方便調(diào)試，這些錯(cuò)誤提示比起瀏覽器本身提供的錯(cuò)誤提示更加詳細(xì)且具有參考價(jià)值。而且在調(diào)試Ajax應(yīng)用的時(shí)候也是特別有用，你能夠在控制臺(tái)里看到每一個(gè)XMLHttpRequests請(qǐng)求post出去的參數(shù)、URL，http頭以及回饋的內(nèi)容，原本似乎在幕后黑匣子里運(yùn)作的程序被清清楚楚地展示在你面前。

2、Html查看器

圖2 Html查看器

首先你看到的是已經(jīng)經(jīng)過格式化的HTML代碼，它有清晰的層次，你能夠方便地分辨出每一個(gè)標(biāo)簽之間的從屬并行關(guān)系，標(biāo)簽的折疊功能能夠幫助你集中精力分析代碼。源代碼上方還標(biāo)記出了DOM的層次，如圖3所示，它清楚地列出了一個(gè)hml元素的parent、child以及root元素，配合Firebug自帶的CSS查看器使用，會(huì)給div+css頁面分析編寫帶來很大的好處。你還可以在HTML查看器中直接修改HTML源代碼，并在瀏覽器中第一時(shí)間看到修改后的效果，光憑這一點(diǎn)就會(huì)讓許多頁面設(shè)計(jì)師死心塌地地成為Firebug的粉絲了。

利用Inspect檢查功能，我們還可以用鼠標(biāo)在頁面中直接選擇一些區(qū)塊，查看相應(yīng)的HTML源代碼和CSS樣式表，真正的做到所見即所得，如果你使用了外部編輯器修改了當(dāng)前網(wǎng)頁，可以點(diǎn)擊Firebug的reload圖片重新載入網(wǎng)頁，它會(huì)繼續(xù)跟蹤你之前用Inspect選中的區(qū)塊，方便調(diào)試。

3、CSS調(diào)試

Firebug的CSS調(diào)試器是專為網(wǎng)頁設(shè)計(jì)師們量身定做的。

一個(gè)典型的應(yīng)用就是頁面中的一個(gè)區(qū)塊位置顯得有些不太恰當(dāng)，它需要挪動(dòng)幾個(gè)象素。這時(shí)候用CSS調(diào)試工具可以輕易編輯它的位置——你可以根據(jù)需要隨意挪動(dòng)象素。如圖3中正在修改一個(gè)區(qū)塊的背景色。

圖3

4、可視化的CSS尺標(biāo)

我們可以利用Firebug來查看頁面中某一區(qū)塊的CSS樣式表，如果進(jìn)一步展開右側(cè)Layout tab的話，它會(huì)以標(biāo)尺的形式將當(dāng)前區(qū)塊占用的面積清楚地標(biāo)識(shí)出來，精確到象素，更讓人驚訝的是，你能夠在這個(gè)可視化的界面中直接修改各象素的值，頁面上區(qū)塊的位置就會(huì)隨改動(dòng)而變化。在頁面中某些元素出現(xiàn)錯(cuò)位或者面積超出預(yù)料值時(shí)，該功能能夠提供有效的幫助，你可以籍此分析offset、margin、padding、size之間的關(guān)系，從而找出解決問題的辦法。如圖4所示。

圖4

5、網(wǎng)絡(luò)狀況監(jiān)測器

也許有一天，你的老板或者客戶找到你，抱怨你制作的網(wǎng)頁速度奇慢，你該如何應(yīng)對(duì)？你或許會(huì)說這可能是網(wǎng)絡(luò)問題，或者是電腦配置問題，或者是程序太慢，或者直說是他們的人品問題？不管怎么說，最后你可能被要求去解決這個(gè)有多種可能的問題。

網(wǎng)絡(luò)狀況監(jiān)視器能幫你解決這個(gè)棘手問題。Firebug的網(wǎng)絡(luò)監(jiān)視器同樣是功能強(qiáng)大的，它能將頁面中的CSS、javascript以及網(wǎng)頁中引用的圖片載入所消耗的時(shí)間以矩狀圖呈現(xiàn)出來，也許在這里你能一把揪出拖慢了你的網(wǎng)頁的元兇，進(jìn)而對(duì)網(wǎng)頁進(jìn)行調(diào)優(yōu)，最后老板滿意客戶歡喜，你的飯碗也因此而牢固。網(wǎng)絡(luò)監(jiān)視器還有一些其它細(xì)節(jié)功能，比如預(yù)覽圖片，查看每一個(gè)外部文件甚至是xmlHttpRequests請(qǐng)求的http頭等等。具體如圖5所示。

圖5 網(wǎng)絡(luò)狀況監(jiān)測器

6、Javascript調(diào)試器

這是一個(gè)很不錯(cuò)的javascript腳本調(diào)試器，占用空間不大，但是單步調(diào)試、設(shè)置斷點(diǎn)、變量查看窗口一個(gè)不少。正所謂麻雀雖小，五臟俱全。如果你有一個(gè)網(wǎng)站已經(jīng)建成，然而它的javascript有性能上的問題或者不是太完美，可以通過面板上的Profile來統(tǒng)計(jì)每段腳本運(yùn)行的時(shí)間，查看到底是哪些語句執(zhí)行時(shí)間過長，一步步排除問題。具體如圖6所示

圖6 Javascript調(diào)試器

7、DOM查看器

DOM(Document Object Model)里頭包含了大量的Object以及函數(shù)、事件，在從前，你要想從中查到需要的內(nèi)容，絕非易事，這好比你去了一個(gè)巨大的圖書館，想要找到幾本名字不太確切的小書，眾多的選擇會(huì)讓你無所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內(nèi)部結(jié)構(gòu)，幫助你快速定位DOM對(duì)象。雙擊一個(gè)DOM對(duì)象，就能夠編輯它的變量或值，編輯的同時(shí)，你可能會(huì)發(fā)現(xiàn)它還有自動(dòng)完成功能，當(dāng)你輸入document.get之后，按下tab鍵就能補(bǔ)齊為document.getElementById，非常方便。如果你認(rèn)為補(bǔ)齊得不夠理想，按下shift+tab又會(huì)恢復(fù)原狀。用了Firebug的DOM查看器，你的javascript從此找到了驅(qū)使的對(duì)象，Web開發(fā)也許就成了一件樂事。具體如圖7所示。

圖7 DOM查看器

三、小結(jié)

Firebug插件提供了一整套web開發(fā)所必需的工具。從HTML的編寫，到CSS樣式表的美化調(diào)優(yōu)，以及用javascript腳本開發(fā)，亦或是Ajax應(yīng)用，F(xiàn)irebug插件都會(huì)成為你的得力助手。所謂工欲善其事，必先利其器。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：Firefox瀏覽器的調(diào)試工具Firebug的使用方法-創(chuàng)新互聯(lián)
分享路徑：http://muchs.cn/article38/dsepsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、定制開發(fā)、網(wǎng)站內(nèi)鏈、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)