軟件介紹

Firebug插件是一款可以應(yīng)用于firefox瀏覽器下的網(wǎng)頁調(diào)試工具，能夠調(diào)試諸如Html、Css等所有網(wǎng)站語言，支持html、css、dom的查看與調(diào)試，網(wǎng)站整體分析等等，讓用戶只需打開瀏覽器就能完成編程開發(fā)。除此之外還具備javascript調(diào)試等其他實(shí)用功能。

FireBug軟件特色

激活

Firebug的激活是基于URL的，遵守相同的來源策略。這意味著，當(dāng)您在不同的選項(xiàng)卡上打開同一個(gè)來源的頁面時(shí)，F(xiàn)irebug會自動打開。當(dāng)您在同一選項(xiàng)卡中打開不同來源的頁面時(shí)，它會自動關(guān)閉。另一方面DevTools的激活是基于標(biāo)簽的。這意味著，當(dāng)您在選項(xiàng)卡中打開DevTools時(shí)，即使您在不同網(wǎng)站之間切換，它們也會保持打開狀態(tài)。當(dāng)你切換到另一個(gè)標(biāo)簽，但是，他們被關(guān)閉。

打開工具

按F12可打開Firebug。要打開它來檢查元素，可以按Ctrl+ Shift+ C/ Cmd+ Opt+ C。DevTools共享相同的快捷鍵，但也提供了不同面板的快捷鍵。例如，網(wǎng)絡(luò)監(jiān)視器可以通過Ctrl+ Shift+ Q/ Cmd+ Opt+ 打開Q，Web控制臺通過Ctrl+ Shift+ K/ Cmd+ Opt+ K打開，調(diào)試器通過Ctrl+ Shift+ S/ Cmd+ Opt+ 打開S。

該Web控制臺是Firebug的相當(dāng)于控制臺面板。它顯示與網(wǎng)頁相關(guān)的日志信息，并允許您通過命令行執(zhí)行JavaScript表達(dá)式。兩者之間的顯示有所不同。這可能會改變錯(cuò)誤1269730。

過濾日志消息

Firebug提供了兩種方法來過濾日志消息，通過選項(xiàng)菜單和工具欄中的過濾器按鈕。開發(fā)者工具控制臺通過其工具欄內(nèi)的過濾器按鈕提供類似的功能- 集中在一個(gè)地方。

命令行API

Firebug中的命令行API提供了一些特殊功能，以方便您使用。開發(fā)工具命令行有一些共同的功能，但也有一些其他的功能，錯(cuò)過了別人。

控制臺API

從網(wǎng)頁內(nèi)將東西記錄到控制臺Firebug 在頁面中提供了一個(gè)控制臺API。開發(fā)者工具共享相同的API，所以你的console.*語句將繼續(xù)工作。

堅(jiān)持日志

在Firebug中，您可以單擊工具欄中的Persist按鈕以保留頁面導(dǎo)航和重新加載之間記錄的消息。在DevTools中，這個(gè)選項(xiàng)被稱為啟用日志，并且在“工具箱選項(xiàng)”面板中可用。

服務(wù)器日志

像FirePHP這樣的Firebug擴(kuò)展允許將服務(wù)器端消息記錄到Firebug控制臺。該功能已經(jīng)使用ChromeLogger協(xié)議集成到DevTools中，不需要安裝任何擴(kuò)展。

命令歷史

該命令歷史記錄可通過在Firebug的命令行按鈕，可以按↑/↓在DevTools命令行中。

FireBug軟件功能

CSS調(diào)試

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

如今的網(wǎng)頁設(shè)計(jì)言必稱div+css，如果你是用table套出來的HTML頁面，就得按這規(guī)矩重構(gòu)一遍，否則顯得你不夠時(shí)髦！用div做出來的頁面的確能精簡HTML代碼，HTML標(biāo)簽減肥的結(jié)果就是CSS樣式表的編寫成了頁面制作的重頭戲。Firebug的CSS查看器不僅自下向上列出每一個(gè)CSS樣式表的從屬繼承關(guān)系，還列出了每一個(gè)樣式在哪個(gè)樣式文件中定義。你可以在這個(gè)查看器中直接添加、修改、刪除一些CSS樣式表屬性，并在當(dāng)前頁面中直接看到修改后的結(jié)果。

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

如圖4中正在修改一個(gè)區(qū)塊的背景色。

提示：如果你正在學(xué)習(xí)CSS樣式表的應(yīng)用，但是總記不住常用的樣式表有哪些值，可以嘗試在CSS調(diào)試器中選中一個(gè)樣式表屬性，然后用上下方向鍵來改變它的值，它會把可能的值一個(gè)個(gè)遍歷給你看。

CSS尺標(biāo)

我們可以利用Firebug來查看頁面中某一區(qū)塊的CSS樣式表，如果進(jìn)一步展開右側(cè)Layout tab的話，它會以標(biāo)

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

網(wǎng)絡(luò)監(jiān)視器

也許有一天，你的老板或者客戶找到你，抱怨你制作的網(wǎng)頁速度奇慢，你該如何應(yīng)對？你或許會說這可能是網(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)而對網(wǎng)頁進(jìn)行調(diào)優(yōu)，最后老板滿意客戶歡喜，你的飯碗也因此而牢固。

網(wǎng)絡(luò)監(jiān)視器還有一些其它細(xì)節(jié)功能，比如預(yù)覽圖片，查看每一個(gè)外部文件甚至是xmlHttpRequests請求的http頭等等。

JS調(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í)間過長，一步步的來排除問題。

Console 控制臺

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

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

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

console.log("hello world")如果你有一堆參數(shù)需要組合在一起輸出，可以寫成這樣：

console.log(2,4,6,8,"foo",bar). Firebug的日志輸出有多種可選的格式以及語法，甚至可以定制彩色輸出，比起單調(diào)的alert，顯然更加方便，限于篇幅，這里不做詳細(xì)說明，但是有助于提高debug效率的讀者，可以到Firebug的官方站點(diǎn)（見附錄）查看更詳細(xì)的教程。

修改HTML

第一次看到Firebug強(qiáng)大的HTML代碼查看器，就覺得它與眾不同，相比于Firefox自帶的HTML查看器，它的功能強(qiáng)大了許多。 HTML

首先你看到的是已經(jīng)經(jīng)過格式化的HTML代碼，它有清晰的層次，你能夠方便地分辨出每一個(gè)標(biāo)簽之間的從屬并行關(guān)系，標(biāo)簽的折疊功能能夠幫助你集中精力分析代碼。源代碼上方還標(biāo)記出了DOM的層次，如圖3所示，

它清楚地列出了一個(gè)html元素的parent、child以及root元素，配合Firebug自帶的CSS查看器使用，會給div+css頁面分析編寫帶來很大的好處。你還可以在HTML查看器中直接修改HTML源代碼，并在瀏覽器中第一時(shí)間看到修改后的效果，光憑這一點(diǎn)就會讓許多頁面設(shè)計(jì)師死心塌地地成為Firebug的粉絲了。

有時(shí)候頁面中的javascript會根據(jù)用戶的動作如鼠標(biāo)的onmouseover來動態(tài)改變一些HTML元素的樣式表或背景色，HTML查看器會將頁面上改變的內(nèi)容也抓下來，并以黃色高亮標(biāo)記，讓網(wǎng)頁的暗箱操作徹底成為歷史。

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

DOM查看器

DOM(Document Object Model)里頭包含了大量的Object以及函數(shù)、事件，在從前，你要想從中查到需要的內(nèi)容，絕非易事，這好比你去了一個(gè)巨大的圖書館，想要找到幾本名字不太確切的小書，眾多的選擇會讓你無

所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內(nèi)部結(jié)構(gòu)，幫助你快速定位DOM對象。雙擊一個(gè)DOM對象，就能夠編輯它的變量或值，編輯的同時(shí)，你可能會發(fā)現(xiàn)它還有自動完成功能，當(dāng)你輸入document.get之后，按下tab鍵就能補(bǔ)齊為document.getElementById，非常方便。如果你認(rèn)為補(bǔ)齊得不夠理想，按下shift+tab又會恢復(fù)原狀。用了Firebug的DOM查看器，你的javascript從此找到了驅(qū)使的對象，Web開發(fā)也許就成了一件樂事。

FireBug使用方法

Firebug 的主要菜單選項(xiàng)有控制臺、HTML、CSS、腳本、DOM、網(wǎng)絡(luò)六個(gè)，上述功能的配合使用能夠滿足網(wǎng)頁設(shè)計(jì)的各項(xiàng)要求。

1、控制臺（Console）功能：控制臺得主要作用是用來顯示網(wǎng)頁各類錯(cuò)誤信息，并可對日志進(jìn)行打印處理。同時(shí)可以在進(jìn)行javascript調(diào)試的時(shí)候當(dāng)作命令行窗口使用，并通過概況子選項(xiàng)說明javascript代碼執(zhí)行的相關(guān)信息。

2、HTML功能：此菜單標(biāo)簽功能，主要用于查看當(dāng)前頁面的源代碼功能，并可進(jìn)行編輯，實(shí)時(shí)顯示，從而實(shí)現(xiàn)頁面上佳效果。

3、CSS功能：點(diǎn)擊CSS菜單標(biāo)簽，可查看所有的CSS定義信息，同時(shí)也可以通過雙擊來達(dá)到修改頁面樣式的效果。

4、腳本（Javascript）功能：腳本功能主要是一個(gè)腳本調(diào)試器，可以進(jìn)行單步調(diào)試、斷點(diǎn)設(shè)置、變量查看等功能，同時(shí)通過右邊的監(jiān)控功能來實(shí)現(xiàn)腳本運(yùn)行時(shí)間的查看和統(tǒng)計(jì)，提高運(yùn)行效率。

5、DOM功能：該功能主要用于查看頁面DOM信息，通過提供的搜索功能實(shí)現(xiàn)DOM的快速準(zhǔn)確定位，并可雙擊來實(shí)現(xiàn)DOM節(jié)點(diǎn)屬性或值的修改。

6、網(wǎng)絡(luò)（Net）功能：該標(biāo)簽功能主要用來監(jiān)控網(wǎng)頁各組成元素的運(yùn)行時(shí)間的信息，方便找出其中運(yùn)行時(shí)間較慢的部分，進(jìn)一步優(yōu)化運(yùn)行效率。

FireBug安裝方法

1、等待Firebug插件下載完成，將壓縮包解壓后，使用鼠標(biāo)左鍵雙擊打開安裝文件。

2、將解壓后得到的.xpi文件直接拖動到 Firefox 瀏覽器的界面中，稍等片刻后，我們就可以在瀏覽器右上方看到 Firebug 的圖標(biāo)了，這樣就安裝成功了。