firebug插件-如何使用firefox進(jìn)行網(wǎng)頁js調(diào)試

什么是Firebug

從事了數(shù)年的Web開發(fā)工作，越來越覺得現(xiàn)在對(duì)WEB開發(fā)有了更高的要求。要寫出漂亮的HTML代碼；要編寫精致的CSS樣式表展示每個(gè)頁面模塊；要調(diào)試javascript給頁面增加一些更活潑的要素；要使用Ajax給用戶帶來更好的體驗(yàn)。一個(gè)優(yōu)秀的WEB開發(fā)人員需要顧及更多層面，才能交出一份同樣優(yōu)秀的作業(yè)。為幫助廣大正處于Web2.0洪流中的開發(fā)人員，在這里為大家介紹一款輕巧靈活的輔助開發(fā)工具。

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ì)有一試的欲望。筆者在撰寫此文的時(shí)候，正逢Firebug發(fā)布1.0正式版，這不能不 說是種巧合。

應(yīng)用

Firebug插件雖然功能強(qiáng)大，但是它已經(jīng)和Firefox瀏覽器無縫地結(jié)合在一起，使用簡單直觀。如果你擔(dān)心它會(huì)占用太多的系統(tǒng)資源，也可以方便地啟用/關(guān)閉這個(gè)插件，甚至針對(duì)特定的站點(diǎn)開啟這個(gè)插件。

在安裝好插件之后，先用Firefox瀏覽器打開需要測試的頁面，然后點(diǎn)擊右下方的綠色按鈕或使用快捷鍵F12喚出Firebug插件，它會(huì)將當(dāng)前頁面分成上下兩個(gè)框架，如圖1所示。

圖1：Firebug插件展開圖示

從圖1中看到，F(xiàn)irebug有6個(gè)主要的Tab按鈕，下文將主要介紹介紹這幾方面的功能。

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請求post出去的參數(shù)、 URL，http頭以及回饋的內(nèi)容，原本似乎在幕后黑匣子里運(yùn)作的程序被清清楚楚地展示在你面前。

象C shell或Python shell一樣，你還能在控制臺(tái)中查看變量內(nèi)容，直接運(yùn)行javascript語句，就算是大段的javascript程序也能夠正確運(yùn)行并拿到運(yùn)行期的信息。

控制臺(tái)還有個(gè)重要的作用就是查看腳本的log, 從前你也許習(xí)慣了使用alert來打印變量，但是Firebug給我們帶來了一個(gè)新朋友 —— console.log, 最簡單的打印日志的語法是這樣的：