Firefox附加元件介紹-網頁開發除錯工具 Firebug

researcher

This site has been moved to dreamerslab.com

本站已經移至 dreamerslab.com

FirebugFirefox下一款開發用的附加元件,集HTML查看和編輯、DOM檢視、JavaScript控制台、網路狀況監視器於一體,是開發JavaScript、CSS、HTML和Ajax的得力助手,是用來全面分析網路服務、測試網站健全的利器。此外,Firebug的另一特點是能再自行擴充延伸的附加元件,例如YSlow(網頁分析)、Firecookie(管理cookie)、FirePHP(PHP除錯)、Pixel Perfect(直接新增網頁元件在頁面上作排版模擬)等等,都得要先安裝Firebug才能使用。

Firefox附加元件介紹-網頁開發除錯工具 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網頁設計擴充套件

Related Posts


Comments are closed.