This site has been moved to dreamerslab.com
本站已經移至 dreamerslab.com
Firebug 是Firefox下一款開發用的附加元件，集HTML查看和編輯、DOM檢視、JavaScript控制台、網路狀況監視器於一體，是開發JavaScript、CSS、HTML和Ajax的得力助手，是用來全面分析網路服務、測試網站健全的利器。此外，Firebug的另一特點是能再自行擴充延伸的附加元件，例如YSlow（網頁分析）、Firecookie（管理cookie）、FirePHP（PHP除錯）、Pixel Perfect（直接新增網頁元件在頁面上作排版模擬）等等，都得要先安裝Firebug才能使用。
（圖片來源：addons.mozilla.org/）
快捷鍵和相關設定打開/關閉 Firebug：F12
在單獨一個視窗中打開Firebug：Ctrl+F12
* 固定Firebug在新視窗打開：先打開firebug，點擊左上角的bug標誌，選擇options選項中的「Always Open in New Window」。
* 增加/縮小字體大小：先打開firebug，點擊左上角的bug標誌，選擇「Text Size」命令。每次字體變化的幅度非常小，你可能需要使用多次。* 限制只對某些網站使用Firebug：先右擊瀏覽器狀態上的green check mark標誌，選擇「disable Firebug」命令。然後，再右擊這個已經變灰的標誌，選擇「Allowed Sites…」命令，增加允許Firebug生效的域名。
Firebug的六大標籤
Console HTML CSS Script Dom Net
控制台 Html查看器 Css查看器 腳本調試器 Dom查看器 網路狀況監視
Console標籤： 主要使用javascript命令行操作，顯示javascript錯誤信息，在底部的>>>提示符後，你可以自己鍵入 javascript命令。此外在控制台裡可看到每一個XMLHttpRequests請求post出去的參數、URL，http頭以及回饋的內容，另個 重要作用是查看腳本的log（console.log）。
HTML標籤： 顯示HTML原始碼，並且像DOM等級結構那樣，每行之前有縮進可以折疊。你可以選擇顯示或不顯示某個子節點。有時候頁面中的javascript會根據 用戶的動作如滑鼠的onmouseover來動態改變一些HTML元素的樣式表或背景色，HTML查看器會將頁面上改變的內容也抓下來，並以黃色高亮標 記，另外利用Inspect檢查功能，在滑鼠在頁面中直接選擇一些區塊，就能查看相應的HTML原始碼和CSS樣式表。
CSS 標籤：瀏覽所有已經裝入的樣式表，可以當場對其修改。在Firebug窗口上部，「edit」命令的旁邊，有一個本頁面中所有樣式表的下拉列表，你可以選 擇一個樣式表進行瀏覽。在CSS窗口上方，有一個layout按鈕，點擊後會展示與該元素相關的方塊模型，它會以標尺的形式將當前區塊佔用的面積清楚地標 識出來，精確到像素，你能夠在這個可視化的界面中直接修改各像素的值，頁面上區塊的位置就會隨改動而變化。在頁面中某些元素出現錯位或者面積超出預料值 時，該功能能夠提供有效的幫助。
Script標籤： 顯示javascript文件及其所在頁面，可用來統計每段腳本運行的時間。在Firebug窗口上部，「inspect」命令的旁邊，有一個本頁面中所 有Javascript文件的下拉列表，你可以選擇一個進行瀏覽。你可以在javascript命令中，設置斷點（breakpoint）及其出現的條 件。
DOM標籤： 顯示所有的頁面對象和window物體的屬性，能方便地瀏覽DOM的內部結構，幫助你快速定位DOM對象。雙擊一個DOM對象，就能夠編輯它的變量或值，另外按下tab鍵會自動補齊，按下shift+tab又會恢復原狀。
Net標籤：能將頁面中的CSS、javascript以及網頁中引用的圖片載入所消耗的時間以矩狀圖呈現出來，幫忙找出網頁速度過慢的原因所在。此外還有預覽圖片，查看每一個外部文件甚至是xmlHttpRequests請求的http頭等等。
參考來源
初識Firebug 全文 — firebug的使用-某人的棲息地
Firebug入門指南-阮一峰的網絡日誌
4個 Firebug 的必備元件-Jas9 Taipei. 設計工作日誌
延伸閱讀
3 分鐘學會用 firebug 除錯
Stylish教學：搭配Firebug展現網頁樣式的新魅力
Firefox外掛【Firebug】檢測網頁架構、開啟速度一把罩！
13個Firefox網頁設計擴充套件
Recent Comments