大名鼎鼎的Firebug絕對(duì)是用來幫助您進(jìn)行前端開發(fā)和調(diào)試的利器，這里我們絕對(duì)要把他收錄到開發(fā)者必備精選集中。

Firebug同F(xiàn)irefox連接在一起，形成了強(qiáng)大的網(wǎng)頁開發(fā)工具。您可以通過Firebug來編輯、調(diào)試和監(jiān)控任何頁面的CSS、HTML和JavaScript。

查看和編輯HTML代碼

通過Firebug可以很簡(jiǎn)單的查找頁面中的HTML元素。并且在您找到了需要的HTML元素之后，F(xiàn)irebug還提供了大量的相關(guān)信息，并且允許您動(dòng)態(tài)的編輯HTML元素及其屬性。

動(dòng)態(tài)調(diào)整CSS

Firebug的CSS標(biāo)簽可以告訴您所有需要的style信息，如果您不喜歡現(xiàn)在的樣式，直接就可以編輯CSS規(guī)則改變這些樣式。

可視化的CSS模型

調(diào)試中，您設(shè)計(jì)的CSS盒子模型可能不象想象中那樣整齊，而這些模型又都很難懂或者難以想象。Firebug完全可以幫助您，他能夠顯示出正確的盒子模型以及一些關(guān)鍵的數(shù)據(jù)，比如大小阿、margin阿、邊界阿、內(nèi)邊距阿等等。

監(jiān)控網(wǎng)絡(luò)活動(dòng)

頁面讀取花費(fèi)了很長(zhǎng)時(shí)間？為什么？是不是寫了很多的JavaScript？還是忘記壓縮圖片了？是不是頁面上引用的第三方資源太慢了？Firebug可以一項(xiàng)一項(xiàng)的把這些關(guān)鍵點(diǎn)都列出來，讓您知道頁面讀取的細(xì)節(jié)信心。

調(diào)試JavaScript

Firebug中包含了一個(gè)非常強(qiáng)大的JavaScript調(diào)試器，您可以在任何時(shí)候給頁面中的代碼設(shè)置斷點(diǎn)，然后從調(diào)試器進(jìn)入到代碼的世界，查看變量值等等。如果您的代碼有點(diǎn)慢，不妨使用JavaScript的分析工具來測(cè)量一下性能，快速找到瓶頸所在。

快速查找錯(cuò)誤

Firebug能夠在第一時(shí)間內(nèi)向您報(bào)告出頁面上包含的錯(cuò)誤，包括JavaScript、CSS和XML的錯(cuò)誤信息。

查看DOM

DOM即文檔對(duì)象模型，是HTML頁面形成的關(guān)鍵數(shù)據(jù)結(jié)構(gòu)，他把頁面中所有的HTML元素拼裝成一個(gè)模型中，以便JavaScript代碼來控制他們。Firebug能夠幫助您查找并詳細(xì)查看DOM對(duì)象，甚至能夠直接動(dòng)態(tài)編輯這些DOM對(duì)象。

直接運(yùn)行JavaScript代碼

命令行是所有編程工具中最古老的一種了。Firebug也給您提供了這種懷舊的但是確實(shí)強(qiáng)大的命令行工具，可以方便您直接在命令上使用JavaScript。

JavaScript輸出日志

有時(shí)候光有強(qiáng)勁的調(diào)試器還不夠，可能簡(jiǎn)單的在控制臺(tái)上輸出大量運(yùn)行信息是更為直接和快速的方式。Firebug給您提供了一系列同樣強(qiáng)大的日志輸出函數(shù)可以幫助到您。

需要在其他瀏覽器上使用Firebug？現(xiàn)在有福了，可以用Firebug Lite，還包括在Chrome上的擴(kuò)展哦！