在Google Chrome瀏覽器出來之前，我一直使用FireFox，因為FireFox的插件非常豐富，更因為FireFox有強大的Firebug，對于前端開發(fā)可謂神器。

在Chrome出來的時候，我就喜歡上它的簡潔、快速，無論是啟動速度還是頁面解析速度還是Javascript執(zhí)行速度（現(xiàn)在的FireFox4也比之前的FireFox3有很大的進步）。不過當時由于Chrome的開發(fā)者工具還不是很完善，而我又不是很熟悉，加之對于Firebug的好感和依賴，當時還是用回FireFox作為我的主瀏覽器。

后來由于開發(fā)Chrome的插件（現(xiàn)在的FaWave），就一直使用Google Chrom作為我的主瀏覽器，漸漸熟悉Chrome的開發(fā)者工具，而Chrome也一直在快速迭代，快速進步中，到現(xiàn)在，Chrome已經(jīng)絕對成為我的主瀏覽器，Chrome的開發(fā)者工具，我也認為比Firebug更好用。

得益于Google V8的快速，和對HTML5和CSS3的支持也算比較完善，html類的富客戶端應(yīng)用Chrome上無論是流暢性還是呈現(xiàn)的效果，都是比較出色的，這對于開發(fā)者，特別是對于那些喜歡研究前沿技術(shù)的前端開發(fā)者來說，是很重要的。

對于本文，作為一個Web開發(fā)人員，除了上面的原因以外，與我們開發(fā)相關(guān)的，就是Chrome的開發(fā)者工具。而本文，就是要詳細說說Chrome的開發(fā)者工具，說說我為什么認為它比Firebug要好用。

怎樣打開Chrome的開發(fā)者工具？

你可以直接在頁面上點擊右鍵，然后選擇審查元素：

或者在Chrome的工具中找到：

或者，你直接記住這個快捷方式： Ctrl+Shift+I （或者Ctrl+Shift+J直接打開控制臺），或者直接按F12。

打開的開發(fā)者工具就長下面的樣子：

不過我一般習(xí)慣與點左下角的那個按鈕，將開發(fā)者工具彈出作為一個獨立的窗口：

下面來分別說下每個Tab的作用。

（舉報）