Firebug是Firefox下著名的網(wǎng)頁(yè)調(diào)試工具，而Chrome的開(kāi)發(fā)者工具同樣非常優(yōu)異。今天我就簡(jiǎn)單的比較一下兩者，同時(shí)也是對(duì)自己推文的一個(gè)總結(jié)和回顧。

在查看DOM上，兩者雖然在具體操作方式上有區(qū)別，但大體功能是一致的。不過(guò)Firebug還可以額外的復(fù)制HTML，innerHTML，XPath，CSSPath，是個(gè)亮點(diǎn)。

Script調(diào)試上，Firebug就比較簡(jiǎn)陋了，不僅有時(shí)需要刷新頁(yè)面才能調(diào)試，并且都是常規(guī)項(xiàng)目。而Chrome開(kāi)發(fā)者工具不僅可以即時(shí)調(diào)試，而且可以直觀的添加Event Listener，可謂相當(dāng)便捷。

Firebug額外還有一個(gè)CSS調(diào)試的功能，可以直接調(diào)試CSS文件中的各個(gè)CSS定義，比較方便。Chrome開(kāi)發(fā)者工具在這方面暫有所欠缺。

Firebug在Net面板下，切換查看各個(gè)請(qǐng)求非常麻煩，需要每個(gè)加號(hào)減號(hào)的收縮展開(kāi)，尤其是要往前回顧的時(shí)候。而Chrome下的Network就沒(méi)有這個(gè)問(wèn)題，可以方便的點(diǎn)叉關(guān)掉或直接在左側(cè)切換。并且Net是懸浮預(yù)覽，而Network則是直接全部預(yù)覽，要直觀一些。而且在對(duì)XHR請(qǐng)求時(shí)下斷點(diǎn)上，Chrome開(kāi)發(fā)工具可以根據(jù)URL匹配，而Firebug只能斷在所有請(qǐng)求上。差距立現(xiàn)。

Firebug比較有意思的是DOM面板，可以查看當(dāng)前全局所有的變量聲明情況。

而Chrome開(kāi)發(fā)者工具有Resource面板，可以查看當(dāng)前網(wǎng)站的cookie、local storage等內(nèi)容。有Profile面板，可以非常詳盡的顯示profile JavaScript的結(jié)果，而不像Firebug那樣集成在一起顯示的很簡(jiǎn)陋。Audits面板，與YSlow差不多。

在控制臺(tái)方面，Chrome開(kāi)發(fā)者工具和Firebug也各有所長(zhǎng)。Chrome開(kāi)發(fā)者工具的自動(dòng)完成只能顯示一個(gè)，但查看運(yùn)行結(jié)果可以進(jìn)一步追蹤堆棧，不僅僅只是字符串化的內(nèi)容。而Firebug則可以給出浮動(dòng)菜單顯示所有的自動(dòng)完成備選項(xiàng)，但結(jié)果是一個(gè)字符串內(nèi)容而已。Firebug會(huì)在控制臺(tái)中冗余的顯示XHR請(qǐng)求，無(wú)論你選上面哪個(gè)篩選，都不能單純過(guò)濾掉這些請(qǐng)求。但Chrome的控制臺(tái)則是很專(zhuān)一的顯示Error，Warning等內(nèi)容，同時(shí)也可以在選項(xiàng)中設(shè)置為顯示XHR請(qǐng)求。不過(guò)畢竟XHR請(qǐng)求的顯示可以在Network面板里查看，所以默認(rèn)不打開(kāi)也是比較合理的。這可能也和Firebug各個(gè)功能模塊化相互獨(dú)立有關(guān)系。

Firebug可以用第三方編輯器打開(kāi)代碼，并且可以匹配在特定網(wǎng)站自動(dòng)打開(kāi)Firebug，并在狀態(tài)欄或工具欄圖標(biāo)上顯示當(dāng)前頁(yè)面的錯(cuò)誤數(shù)量，這些都是Chrome開(kāi)發(fā)者暫時(shí)做不到的。

Chrome的開(kāi)發(fā)者工具是隨著Chrome的升級(jí)而升級(jí)，且不會(huì)影響Chrome本身的速度。但Firebug是獨(dú)立擴(kuò)展，有較多報(bào)告及本人使用經(jīng)歷，均表明Firebug會(huì)較大程度的拖慢Firefox的速度，并且會(huì)導(dǎo)致瀏覽器假死。但也正由于Firebug的擴(kuò)展身份，導(dǎo)致存在大量Firebug的擴(kuò)展，如FirePHP等。雖然Chrome目前也開(kāi)放了一部分這方面的API接口，但目前除了官方的Page Speed，還鮮有第三方擴(kuò)展的出現(xiàn)。

Chrome的開(kāi)發(fā)者工具目前隨著Chrome的高速更新而更新著，且最近有Firebug的開(kāi)發(fā)者跳槽到Google陣營(yíng)。而Firebug卻要面臨和Firefox內(nèi)置的控制臺(tái)和調(diào)試器的競(jìng)爭(zhēng)和沖突，前途并不明朗，也曾有Firebug貢獻(xiàn)者稱(chēng)要考慮這個(gè)項(xiàng)目的生死。

2011-9-25 18:06 更新：發(fā)現(xiàn)Firebug的搜索是跨越所有模塊的，搜索結(jié)果可以自由的上下跳轉(zhuǎn)，并囊括DOM，所有Script。而Chrome開(kāi)發(fā)工具只是在當(dāng)前作用域有效，需要手動(dòng)切換，并沒(méi)有方便的導(dǎo)航，不能自由的向前向后。

以上都是個(gè)人陋見(jiàn)，歡迎指正。

轉(zhuǎn)載于:https://www.cnblogs.com/ayanamist/archive/2011/09/23/2186318.html

總結(jié)

以上是生活随笔為你收集整理的Chrome开发者工具和Firebug的一些简单比较的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。