當程式人員或網頁設計師在開發網頁時都會遇到一個問題，就是debug不易，不過自從Firefox大行其道後，這個問題被FireBug解決了，使用FireBug可以很方便的知道網頁那裡出了問題，可以直接修改CSS及html dom內容，還可以知道整個網頁到底傳輸了什麼內容及資訊等等，可說是十分好用，Microsoft在其後釋出的Internet Explorer及Google的Browser也都支援了類似的功能，不過更新的頻率並不像FireBug那麼高。
首先介紹IE8的開發者工具
可以由上方工具列的工具－＞開發者工具 來啟動（或F12）
使用開發者工具HTML tab裡的滑鼠指標可以直接取得網頁裡HTML的結構內容
而在這個HTML tab也可以直接修改文件內容或CSS，不過個人並不覺得比FireBug好用
CSS tab可以取得CSS內容，指令碼則是javascript的內容
Goolgle Chrome 開發人員工具
可以從右上角的文件按鈕－＞開發人員選項－＞開發人員工具 來啟動
Elements tab裡的內容就是網頁HTML結構內容，一樣可以直接修改網頁內容資料及CSS內容，所見即所得，結果馬上就可以在網頁上顯示了。
右側Styles分頁裡Computed Style裡可以知道這個元件應該有的所有CSS，可以很方便的追查到底那裡影響了網頁內容（像是字型等）
Resources是所有載入網頁的圖檔、網頁、css檔、javascript檔、flash檔等的內容、時間等資訊。
Console控制台可以知道網頁產生的錯誤，像javascrip錯誤、css錯誤等資訊。
也可直接在元素上按右鍵選＂檢查元素＂，就可以直接來到此元素的HTML結構位置了
FireFox FireBug
以上二個工具並沒有很細的介紹，其實都大同小異，大概都跟FireBug相似吧，所以沒介紹到的功能可以參考以下介紹，再去IE及Chrome來查看。
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取得及回應的資訊，其它物件也都可以看到
