firebug詳細使用方法

來源:酷知科普網 1.46W

Firebug是網頁瀏覽器 Mozilla Firefox下的一款開發類外掛,
現屬於Firefox的五星級強力推薦外掛之一。它集HTML檢視和編輯、Javascript控制檯、網路狀況監視器於一體,是開發
JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀,從各個不同的角度剖析Web頁面內部的細節層面,
給Web開發者帶來很大的便利。例如 Yahoo! 的網頁速度優化建議工具 YSlow。
Firebug也是一個除錯工具。使用者可以利用它除錯、編輯、甚至刪改任何網站的 CSS、HTML、DOM以及JavaScript程式碼,下面給大家介紹下Firebug的詳細使用方法:

操作方法

(01)對於網頁開發人員來說,Firebug是Firefox瀏覽器中最好的外掛之一,也可以說Firebug的CSS偵錯程式是專為網頁設計師們量身定做的;那麼如何安裝firebug呢?首先進入瀏覽器的

firebug詳細使用方法

(02)進入附加元件之後,然後在搜尋框中搜索Firebug附加元件,找到之後安裝即可,安裝完成後重啟瀏覽器就行了,如下圖所示:

(03)下面來說說Firebug的詳細使用方法,Firebug可以隨時編輯頁面:在HTML標籤中,點選視窗上方的“inspect”命令,然後再選擇頁面中的文字節點,你可以對其進行修改,修改結果會馬上反應在頁面中。

firebug詳細使用方法 第2張

(04)Firebug有6個主要的Tab按鈕,本經驗將主要介紹這幾方面的功能,下面說的是Console 控制檯:

(05)Fire的檢視和修改HTM程式碼功能:利用Inspect檢查功能,我們還可以用滑鼠在頁面中直接選擇一些區塊,檢視相應的HTML原始碼和CSS樣式表,真正的做到所見即所得,如果你使用了外部編輯器修改了當前網頁,可以點選Firebug的reload圖片重新載入網頁,它會繼續跟蹤你之前用Inspect選中的區塊,方便除錯。

(06)Firebug的DOM功能:該功能主要用於檢視頁面DOM資訊,通過提供的搜尋功能實現DOM的快速準確定位,並可雙擊來實現DOM節點屬性或值的修改。

(07)Firebug的指令碼(Javascript)功能:指令碼功能主要是一個指令碼偵錯程式,可以進行單步除錯、斷點設定、變數檢視等功能,同時通過右邊的監控功能來實現指令碼執行時間的檢視和統計,提高執行效率。

(08)Firebug的網路(Net)功能:該標籤功能主要用來監控網頁各組成元素的執行時間的資訊,方便找出其中執行時間較慢的部分,進一步優化執行效率。

(09)使用Firebug外掛在附加元件中開啟Firebug啟用開關,啟用開關預設未開,如果未開啟此功能,那麼很可能會出現點選後Firebug外掛無效的情況;

firebug詳細使用方法 第3張
熱門標籤