一、Firefox 插件之 Firebug, 火狐調(diào)試?yán)鳌境鯇W(xué)必備】

　　為什么要第一個(gè)提到火狐呢？因?yàn)榘?#xff0c;這東西確實(shí)是太方便了，剛開始接觸開發(fā)那會(huì)兒，根本都不知道調(diào)試，只是憑著感覺去做事。后來看到有人在用Firefox 的 Firebug，一下就愛上了，原因如下。優(yōu)點(diǎn)：1 中文；2 直觀；3 定位超級(jí)快！缺點(diǎn)：1 插件每次都需要重新下載；2 每次都要重新啟用才可以使用各種調(diào)試功能。

　　下面我們先看幾個(gè)主要功能模塊截圖，稍后稍細(xì)作解析！

. 控制臺(tái)

.. 腳本調(diào)試

… 網(wǎng)絡(luò)收發(fā)狀況查看

　　里面主要用到的功能是，1. 控制臺(tái)，可心直觀的看到一些頁面的基本情況，如上圖所示的錯(cuò)誤信息，以及一些ajax的請(qǐng)求，很輕松的點(diǎn)開就可看到訪問的參數(shù)等等，基本上通過這里的調(diào)試，可以給你省去30%~40%的錯(cuò)誤了；2. 腳本頁，如果js腳本比較復(fù)雜，那頁面js單步調(diào)試等功能就很有必要了，Firebug中有一個(gè)很好的搜索功能@多文件搜索，也就是說，你只要能說出其個(gè)別的關(guān)鍵詞，他就可以幫你找到具體在哪個(gè)腳本頁面哪一行。3. 網(wǎng)絡(luò)功能，用于查看各個(gè)頁面的具體請(qǐng)求情況很方便，用于定位哪個(gè)節(jié)點(diǎn)是否出問題是必須的，當(dāng)然，多了解一點(diǎn)http協(xié)議對(duì)于這一塊的理解還是很有好處的。

　　二、Google Chrome 之F12自帶控制臺(tái)【水平的進(jìn)階】

　　Google作為W3C標(biāo)準(zhǔn)制定者之一（好像是的），是個(gè)絕對(duì)的W3C標(biāo)準(zhǔn)支持者，因此對(duì)于很多的標(biāo)準(zhǔn)屬性，在chrome都有很好的展現(xiàn)。但是有一點(diǎn)讓人很困惑，那就是整個(gè)頁面都是英文，描述也和咱中國(guó)人的習(xí)慣不太吻合，所以適合用于進(jìn)階卻不適合用于初學(xué)，適合用于英語水平稍好點(diǎn)的同學(xué)(當(dāng)然了，看習(xí)慣也就都一樣了)。優(yōu)點(diǎn)：1 瀏覽器自帶；2 官方標(biāo)準(zhǔn)適合自己寫標(biāo)準(zhǔn)語法；3 功能齊全；4 控制臺(tái)調(diào)試非常方便幾乎可以當(dāng)作一個(gè)簡(jiǎn)單的幫助文檔來使用！缺點(diǎn)：如前所述！

　　下面先看幾個(gè)截圖，稍后細(xì)作講解！

. 頁面元素查看

.. 網(wǎng)絡(luò)狀況查看

… 資源使用情況(腳本調(diào)試)

…. 控制臺(tái)臨時(shí)運(yùn)行

　　作為一個(gè)經(jīng)驗(yàn)稍微豐富點(diǎn)的開發(fā)人員，我認(rèn)為chrome的調(diào)試是必備的，雖然有很多亂七八糟的英文，但我們還是可以克服的嘛，而且他功能特別齊全?；竟δ芎突鸷膄irebug差不多，不同的只是一個(gè)展現(xiàn)方式的不一樣，那我就說幾個(gè)特殊的或者前面沒有說到的點(diǎn)好了。1. 很方便地動(dòng)態(tài)編輯html元素，從而避免反復(fù)改代碼調(diào)試的工作，同理于css樣式的編寫。寫html頁面我有一個(gè)不成熟想法：其實(shí)我不會(huì)寫什么頁面，我不過知道幾個(gè)標(biāo)簽html,div,span和幾個(gè)css名稱display,position,font-size，然后我就不停在瀏覽器控制臺(tái)里猜測(cè)各種想法，然后復(fù)雜的效果就出來了；2. 作為腳本調(diào)試，我本人還沒有習(xí)慣chrome的調(diào)試方式，不支持多文件搜索，這對(duì)于包含文件很多的地方并不是好事，不過你可以把所有的資源都打開，這時(shí)候再搜索就可以給你定位了；3. 適應(yīng)他的網(wǎng)絡(luò)查看工具(點(diǎn)擊鏈接后具體信息在右邊展示，時(shí)間軸根據(jù)情況適當(dāng)隱藏)；4. 多利用控制臺(tái)寫一些嘗試操作，對(duì)于已經(jīng)加載了的全局變量，你可以直接在控制臺(tái)使用，如要查看某元素高度，('#ele').height();這里的'’就是文檔中已經(jīng)加載的jquery變量。5. 其他一些優(yōu)化工具可以嘗試使用！（哈哈，我只是看并不用）

　　三、IE 工具之 httpwatch 【看個(gè)人喜好了】

　　其實(shí)，我基本上不會(huì)用IE去調(diào)試代碼的了，但是作為一個(gè)知名度不低的瀏覽器，以及名聲赫赫的httpwatch還是有必要了解一下的。優(yōu)缺點(diǎn)自行判斷，我就說兩句就好。1. 功能強(qiáng)大，可以將訪問日志導(dǎo)出，在另外的地方進(jìn)行靜態(tài)分析；2. 抓包，其實(shí)他就是干這個(gè)事的！3. IE的F12反正和其他的也差不多(我說的是高版本)，簡(jiǎn)單搞搞就行，反正我僅僅用來調(diào)試兼容性問題！

　　工欲善其事，必先利其器！只有有一個(gè)好的順手的調(diào)試工具幫助你，你才能更快地進(jìn)行你的工作。當(dāng)然，你最好有一些基礎(chǔ)理論知識(shí)，這對(duì)于你排查問題找方向會(huì)有很大的幫助！So, Debug your code, Debug yourself.

　　注：本文主要講web控制臺(tái)調(diào)試，看起來好像全是前端工作，但是其實(shí)往往是和后端緊密相連的！一個(gè)字，去了你就知道了！