網頁除錯觀察的Browser工具FireBug-開發者工具-開發人員工具

當程式人員或網頁設計師在開發網頁時都會遇到一個問題,就是debug不易,不過自從Firefox大行其道後,這個問題被FireBug解決了,使用FireBug可以很方便的知道網頁那裡出了問題,可以直接修改CSS及html dom內容,還可以知道整個網頁到底傳輸了什麼內容及資訊等等,可說是十分好用,Microsoft在其後釋出的Internet Explorer及Google的Browser也都支援了類似的功能,不過更新的頻率並不像FireBug那麼高。

首先介紹IE8的開發者工具

可以由上方工具列的工具->開發者工具 來啟動(或F12)

IE開發者工具1.png

使用開發者工具HTML tab裡的滑鼠指標可以直接取得網頁裡HTML的結構內容

而在這個HTML tab也可以直接修改文件內容或CSS,不過個人並不覺得比FireBug好用

CSS tab可以取得CSS內容,指令碼則是javascript的內容

IE開發者工具2.png

Goolgle Chrome 開發人員工具

可以從右上角的文件按鈕->開發人員選項->開發人員工具 來啟動

Elements tab裡的內容就是網頁HTML結構內容,一樣可以直接修改網頁內容資料及CSS內容,所見即所得,結果馬上就可以在網頁上顯示了。

右側Styles分頁裡Computed Style裡可以知道這個元件應該有的所有CSS,可以很方便的追查到底那裡影響了網頁內容(像是字型等)

Resources是所有載入網頁的圖檔、網頁、css檔、javascript檔、flash檔等的內容、時間等資訊。

Console控制台可以知道網頁產生的錯誤,像javascrip錯誤、css錯誤等資訊。

chrome開發人員工具1.png

也可直接在元素上按右鍵選"檢查元素",就可以直接來到此元素的HTML結構位置了

chrome開發人員工具2.png

FireFox FireBug

以上二個工具並沒有很細的介紹,其實都大同小異,大概都跟FireBug相似吧,所以沒介紹到的功能可以參考以下介紹,再去IE及Chrome來查看。

FireBug安裝

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

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

Firebug安裝1.png

然後安裝好後可以在擴充套件裡找到Firebug的版本資訊,要移除或停用也可以在此頁面操作

右下角的小蟲圖就是啟動FireBug的按鈕,啟用後如果沒有得到應有的資訊時,可以重新整理一次網頁內容

Firebug安裝完成.png

FireBug簡介及啟用

啟用FireBug後可以看到如果有錯誤訊息時,右下角原本小蟲的圖示變成了Error提示

如果想要啟用某一項功能,像是網路、DOM等等時,記得按到分頁tab裡,然後選擇Enabled,如此才能啟動及使用,如果沒有想要的資訊,記得重新整理網頁一下。

Firebug簡介.png

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

Firebug簡介2.png

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

Firebug簡介3.png

FireBug主控台

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

Firebug-控制台-Script錯誤.png

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

Firebug-控制台-回應.png

FireBug HTML 資訊

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

Firebug-html.png

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

Firebug-html編輯.png

Firebug-html編輯css.png

FireBug Script 資訊

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

Firebug-script.png

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

Firebug-script線上編輯.png

FireBug CSS 資訊

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

Firebug-CSS.png

FireBug DOM 資訊

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

Firebug-DOM.png

FireBug 網路 資訊

一個網頁載入時,每個需求資訊載入的時間、順序、內容、回應、狀態都可以在此分頁裡得知

如此可以知道到底那一個環境的內容載入時間過長、或是那個內容並沒有回應成功(狀態200)、檔案內容太大等。

Firebug-網路.png

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

Firebug-網路Content.png




發表迴響