FireBug詳細教學

發表留言 人氣: 2333°c

FireBug 安裝FireBug並非FireFox原生套件,所以需要自行安裝plugin,安裝方法很簡單

工具->附加元件->取得元件->查詢firebug->瀏覽所有….->找到FireBug選擇新增至Firefox

然後安裝好後可以在擴充套件裡找到Firebug的版本資訊,要移除或停用也可以在此頁面操作
右下角的小蟲圖就是啟動FireBug的按鈕,啟用後如果沒有得到應有的資訊時,可以重新整理一次網頁內容

FireBug簡介及啟用啟用FireBug後可以看到如果有錯誤訊息時,右下角原本小蟲的圖示變成了Error提示
如果想要啟用某一項功能,像是網路、DOM等等時,記得按到分頁tab裡,然後選擇Enabled,如此才能啟動及使用,如果沒有想要的資訊,記得重新整理網頁一下。

如何使用HTML 檢查器?可以直接按主控台分頁tab左邊的按鈕,然後選擇元素,就會移到此元素的HTML結構位置,右側可以看到使用的CSS內容。

或者直接在元素上按右鍵選擇觀察元素

FireBug主控台主控台可以看到Ajax執行的網址及傳送資訊、Script錯誤內容、資訊及錯誤的行數,可以很方便的debug

Ajax執行的網址﹑回應狀態、秒數及回應的內容等,在處理Ajax debug時實在好用

FireBug HTML 資訊除了簡介時介紹的二種取得元素HTML位置,還有另一種是直接在HTML結構上搜尋,網頁內容也會有一個選取方框來提示目前的元素

也可以直接在HTML結構裡修改內容或CSS,可以省去很多網頁更新的時間


FireBug Script 資訊這個分頁可以看到所有載入的javascript內容,如果在控制台有script的錯誤資訊,可以來這裡查看其行數以便除錯

右側還有一個監看視窗,可以直接在裡面輸入要執行的javascript內容,在每次來到此頁面時都會自動執行,所以不用時記得刪除。像是需要知道某個變數值時,就可以利用來alert變數內容。

FireBug CSS 資訊跟上一個script資訊很像,也可直接修改CSS檔的內容

FireBug DOM 資訊在開發比較複雜的javascript時,總會在元素上extend一堆function或變數,此時可以利用DOM檢視窗來查看其內容

FireBug 網路 資訊一個網頁載入時,每個需求資訊載入的時間、順序、內容、回應、狀態都可以在此分頁裡得知
如此可以知道到底那一個環境的內容載入時間過長、或是那個內容並沒有回應成功(狀態200)、檔案內容太大等。

跟控制台一樣,不過這裡不只有Ajax取得及回應的資訊,其它物件也都可以看到

標籤: