一、Firefox 外掛之 Firebug, 火狐除錯利器【初學必備】

　　為什麼要第一個提到火狐呢？因為啊，這東西確實是太方便了，剛開始接觸開發那會兒，根本都不知道除錯，只是憑著感覺去做事。後來看到有人在用Firefox 的 Firebug，一下就愛上了，原因如下。優點：1 中文；2 直觀；3 定位超級快！缺點：1 外掛每次都需要重新下載；2 每次都要重新啟用才可以使用各種除錯功能。

　　下面我們先看幾個主要功能模組截圖，稍後稍細作解析！

. 控制檯

.. 指令碼除錯

… 網路收發狀況檢視

　　裡面主要用到的功能是，1. 控制檯，可心直觀的看到一些頁面的基本情況，如上圖所示的錯誤資訊，以及一些ajax的請求，很輕鬆的點開就可看到訪問的引數等等，基本上通過這裡的除錯，可以給你省去30%~40%的錯誤了；2. 指令碼頁，如果js指令碼比較複雜，那頁面js單步除錯等功能就很有必要了，Firebug中有一個很好的搜尋功能@多檔案搜尋，也就是說，你只要能說出其個別的關鍵詞，他就可以幫你找到具體在哪個指令碼頁面哪一行。3. 網路功能，用於檢視各個頁面的具體請求情況很方便，用於定位哪個節點

　　二、Google Chrome 之F12自帶控制檯【水平的進階】

　　Google作為W3C標準制定者之一（好像是的），是個絕對的W3C標準支持者，因此對於很多的標準屬性，在chrome都有很好的展現。但是有一點讓人很困惑，那就是整個頁面都是英文，描述也和咱中國人的習慣不太吻合，所以適合用於進階卻不適合用於初學，適合用於英語水平稍好點的同學(當然了，看習慣也就都一樣了)。優點：1 瀏覽器自帶；2 官方標準適合自己寫標準語法；3 功能齊全；4 控制檯除錯非常方便幾乎可以當作一個簡單的幫助文件來使用！缺點：如前所述！

　　下面先看幾個截圖，稍後細作講解！

. 頁面元素檢視

.. 網路狀況檢視

… 資源使用情況(指令碼除錯)

…. 控制檯臨時執行

　　作為一個經驗稍微豐富點的開發人員，我認為chrome的除錯是必備的，雖然有很多亂七八糟的英文，但我們還是可以克服的嘛，而且他功能特別齊全。基本功能和火狐的firebug差不多，不同的只是一個展現方式的不一樣，那我就說幾個特殊的或者前面沒有說到的點好了。1. 很方便地動態編輯html元素，從而避免反覆改程式碼除錯的工作，同理於css樣式的編寫。寫html頁面我有一個不成熟想法：其實我不會寫什麼頁面，我不過知道幾個標籤html,div,span和幾個css名稱display,position,font-size，然後我就不停在瀏覽器控制檯裡猜測各種想法，然後複雜的效果就出來了；2. 作為指令碼除錯，我本人還沒有習慣chrome的除錯方式，不支援多檔案搜尋，這對於包含檔案很多的地方並不是好事，不過你可以把所有的資源都開啟，這時候再搜尋就可以給你定位了；3. 適應他的網路檢視工具(點選連結後具體資訊在右邊展示，時間軸根據情況適當隱藏)；4. 多利用控制檯寫一些嘗試操作，對於已經載入了的全域性變數，你可以直接在控制檯使用，如要檢視某元素高度，('#ele').height();這裡的'

　　三、IE 工具之 httpwatch 【看個人喜好了】

　　其實，我基本上不會用IE去除錯程式碼的了，但是作為一個知名度不低的瀏覽器，以及名聲赫赫的httpwatch還是有必要了解一下的。優缺點自行判斷，我就說兩句就好。1. 功能強大，可以將訪問日誌匯出，在另外的地方進行靜態分析；2. 抓包，其實他就是幹這個事的！3. IE的F12反正和其他的也差不多(我說的是高版本)，簡單搞搞就行，反正我僅僅用來除錯相容性問題！

　　工欲善其事，必先利其器！只有有一個好的順手的除錯工具幫助你，你才能更快地進行你的工作。當然，你最好有一些基礎理論知識，這對於你排查問題找方向會有很大的幫助！So, Debug your code, Debug yourself.

　　注：本文主要講web控制檯除錯，看起來好像全是前端工作，但是其實往往是和後端緊密相連的！一個字，去了你就知道了！