firebug擴(kuò)展工具v3.0.11 最新版

firebug是什么意思？

firebug是firefox下的一個(gè)擴(kuò)展,能夠調(diào)試所有網(wǎng)站語言，如html,css等，但firebug最吸引人的就是javascript調(diào)試功能，使用起來非常方便，而且在各種瀏覽器下都能使用（IE,firefox,Opera, Safari）。除此之外，其他功能還很強(qiáng)大，比如html,css,dom的查看與調(diào)試，網(wǎng)站整體分析等等?？傊褪且徽淄暾鴱?qiáng)大的 WEB開發(fā)工具。再有就是其為開源的軟件。

軟件功能簡介

1.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樣式表的編寫成了頁面制作的重頭戲。

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

2.js調(diào)試器

這是一個(gè)很不錯(cuò)的javascript腳本調(diào)試器，占用空間不大，但是單步調(diào)試、設(shè)置斷點(diǎn)、變量查看窗口一個(gè)不

少。正所謂麻雀雖小，五臟俱全。

3.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)作的程序被清清楚楚地展示在你面前。

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)而變化。

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

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)，還有一些其它細(xì)節(jié)功能，比如預(yù)覽圖片，查看每一個(gè)外部文件甚至是xmlHttpRequests請(qǐng)求的http頭等等。

6.修改html

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

軟件優(yōu)勢

*過濾日志消息

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

*命令行API

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

*服務(wù)器日志

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

*堅(jiān)持日志

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

*命令歷史

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

*控制臺(tái)API

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

常見問題說明

firebug安裝教程

1.安裝完畢最新版火狐瀏覽器后，點(diǎn)擊左上角firefox菜單

選擇【工具】-->【附加組件】。然后在【搜索所有附加組件】搜索欄中輸入“firebug”關(guān)鍵詞，出現(xiàn)firebug搜索結(jié)果，點(diǎn)擊安裝后，重啟瀏覽器即可完成安裝過程。

2.firebug的啟動(dòng)完成安裝，重啟瀏覽器后，即可按“F12”快捷鍵啟動(dòng)firebug插件，也可點(diǎn)擊firefox地址欄右邊f(xié)irebug圖標(biāo)啟動(dòng)，啟動(dòng)后，頁面將分欄顯示，firebug各項(xiàng)功能顯示在下方。

軟件使用方法介紹

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

2.DOM功能：該功能主要用于查看頁面DOM信息，通過提供的搜索功能實(shí)現(xiàn)DOM的快速準(zhǔn)確定位，并可雙擊來實(shí)現(xiàn)DOM節(jié)點(diǎ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.HTML功能：此菜單標(biāo)簽功能，主要用于查看當(dāng)前頁面的源代碼功能，并可進(jìn)行編輯，實(shí)時(shí)顯示，從而實(shí)現(xiàn)頁面最佳效果。

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