Firebug全瞭解

Firebug全瞭解
Firebug是firefox下的一個擴展,可以調試全部網站語言，如Html,Css等，但FireBug最吸引人的就是javascript調試功能，使用起來很是方便，並且在各類瀏覽器下都能使用（IE,Firefox,Opera, Safari）。除此以外，其餘功能還很強大，好比html,css,dom的查看與調試，網站總體分析等等。總之就是一整套完整而強大的 WEB開發工具。再有就是其爲開源的軟件。

Firebug是網頁瀏覽器 Mozilla Firefox 下的一款開發類擴展，現屬於Firefox的五星級強力推薦擴展之一。它集HTML查看和編輯、Javascript控制檯、網絡情況監視器於一體，是開發JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不一樣的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。例如 Yahoo! 的網頁速度優化建議工具 YSlow。 Firebug也是一個除錯工具。用戶能夠利用它除錯、編輯、甚至刪改任何網站的 CSS、HTML、DOM 以及JavaScript 代碼 。

（Firebug如同一把精巧的瑞士軍刀，從各個不一樣的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。Firebug也是一個除錯工具。
用戶能夠利用它除錯、編輯、甚至刪改任何網站的 CSS、HTML、DOM 以及JavaScript 代碼。）

主要功能：

CSS調試
每個樣式在哪一個樣式文件中定義。你能夠在這個查看器中直接添加、修改、刪除一些CSS樣式表屬性，並在當前頁面中直接看到修改後的結果。
一個典型的應用就是頁面中的一個區塊位置顯得有些不太恰當，它須要挪動幾個象素。這時候用CSS調試工具能夠輕易編輯它的位置——你能夠根據須要隨意挪動象素。
提示：若是你正在學習CSS樣式表的應用，可是總記不住經常使用的樣式表有哪些值，能夠嘗試在CSS調試器中選中一個樣式表屬性，而後用上下方向鍵來改變它的值，它會把可能的值一個個遍歷給你看。

CSS尺標
咱們能夠利用Firebug來查看頁面中某一區塊的CSS樣式表，若是進一步展開右側Layout tab的話，它會以標
尺的形式將當前區塊佔用的面積清楚地標識出來，精確到象素，更讓人驚訝的是，你可以在這個可視化的界面中直接修改各象素的值，頁面上區塊的位置就會隨改動而變化。在頁面中某些元素出現錯位或者面積超出預料值時，該功能可以提供有效的幫助，你能夠籍此分析offset、margin、padding、size之間的關係，從而找出解決問題的辦法。

網絡監視器
也許有一天，你的老闆或者客戶找到你，抱怨你製做的網頁速度奇慢，你該如何應對？你或許會說這多是網絡問題，或者是電腦配置問題，或者是程序太慢，或者直說是他們的人品問題？無論怎麼說，最後你可能被要求去解決這個有多種可能的問題。
網絡情況監視器能幫你解決這個棘手問題。Firebug的網絡監視器一樣是功能強大的，它能將頁面中的CSS、javascript以及網頁中引用的圖片載入所消耗的時間以矩狀圖呈現出來，也許在這裏你能一把揪出拖慢了你的網頁的元兇，進而對網頁進行調優，最後老闆滿意客戶歡喜，你的飯碗也所以而牢固。
網絡監視器還有一些其它細節功能，好比預覽圖片，查看每個外部文件甚至是xmlHttpRequests請求的http頭等等。

JS調試器
這是一個很不錯的javascript腳本調試器，佔用空間不大，可是單步調試、設置斷點、變量查看窗口一個不 少。正所謂麻雀雖小，五臟俱全。
若是你有一個網站已經建成，然而它的javascript有性能上的問題或者不是太完美，能夠經過面板上的Profile來統計每段腳本運行的時間，查看究竟是哪些語句執行時間過長，一步步的來排除問題。

Console 控制檯
控制檯可以顯示當前頁面中的javascript錯誤以及警告，並提示出錯的文件和行號，方便調試，這些錯誤提示比起瀏覽器自己提供的錯誤提示更加詳細且具備參考價值。並且在調試Ajax應用的時候也是特別有用，你可以在控制檯裏看到每個XMLHttpRequests請求post出去的參數、URL，http頭以及回饋的內容，本來彷佛在幕後黑匣子裏運做的程序被清清楚楚地展現在你面前。
像C shell或Python shell同樣，你還能在控制檯中查看變量內容，直接運行javascript語句，就算是大段的javascript程序也可以正確運行並拿到運行期的信息。
控制檯還有個重要的做用就是查看腳本的log, 從前你也許習慣了使用alert來打印變量，可是Firebug給咱們帶來了一個新朋友 —— console.log, 最簡單的打印日誌的語法是這樣的：
console.log("hello world")若是你有一堆參數須要組合在一塊兒輸出，能夠寫成這樣：
console.log(2,4,6,8,"foo",bar). Firebug的日誌輸出有多種可選的格式以及語法，甚至能夠定製彩色輸出，比起單調的alert，顯然更加方便，限於篇幅，這裏不作詳細說明，可是有助於提升debug效率的讀者，能夠到Firebug的官方站點（見附錄）查看更詳細的教程。

修改HTML
第一次看到Firebug強大的HTML代碼查看器，就以爲它不同凡響，相比於Firefox自帶的HTML查看器，它的功能強大了許多。
首先你看到的是已經通過格式化的HTML代碼，它有清晰的層次，你可以方便地分辨出每個標籤之間的從屬並行關係，標籤的摺疊功能可以幫助你集中精力分析代碼。源代碼上方還標記出了DOM的層次。
它清楚地列出了一個html元素的parent、child以及root元素，配合Firebug自帶的CSS查看器使用，會給div+css頁面分析編寫帶來很大的好處。你還能夠在HTML查看器中直接修改HTML源代碼，並在瀏覽器中第一時間看到修改後的效果，光憑這一點就會讓許多頁面設計師死心塌地地成爲Firebug的粉絲了。
有時候頁面中的javascript會根據用戶的動做如鼠標的onmouseover來動態改變一些HTML元素的樣式表或背景色，HTML查看器會將頁面上改變的內容也抓下來，並以黃色高亮標記，讓網頁的暗箱操做完全成爲歷史。
利用Inspect檢查功能，咱們還能夠用鼠標在頁面中直接選擇一些區塊，查看相應的HTML源代碼和CSS樣式表，真正的作到所見即所得，若是你使用了外部編輯器修改了當前網頁，能夠點擊Firebug的reload圖片從新載入網頁，它會繼續跟蹤你以前用Inspect選中的區塊，方便調試。

DOM查看器
DOM(Document Object Model)裏頭包含了大量的Object以及函數、事件，在從前，你要想從中查到須要的內容，絕非易事，這比如你去了一個巨大的圖書館，想要找到幾本名字不太確切的小書，衆多的選擇會讓你無所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內部結構，幫助你快速定位DOM對象。雙擊一個DOM對象，就可以編輯它的變量或值，編輯的同時，你可能會發現它還有自動完成功能，當你輸入document.get以後，按下tab鍵就能補齊爲document.getElementById，很是方便。若是你認爲補齊得不夠理想，按下shift+tab又會恢復原狀。用了Firebug的DOM查看器，你的javascript今後找到了驅使的對象，Web開發也許就成了一件樂事。

詳細Firebug教程：阿里雲大學——開發者課堂