Firebug是Firefox下著名的網頁調試工具，而Chrome的開發者工具同樣非常優異。今天我就簡單的比較一下兩者，同時也是對自己推文的一個總結和回顧。

在查看DOM上，兩者雖然在具體操作方式上有區別，但大體功能是一致的。不過Firebug還可以額外的復制HTML，innerHTML，XPath，CSSPath，是個亮點。

Script調試上，Firebug就比較簡陋了，不僅有時需要刷新頁面才能調試，并且都是常規項目。而Chrome開發者工具不僅可以即時調試，而且可以直觀的添加Event Listener，可謂相當便捷。

Firebug額外還有一個CSS調試的功能，可以直接調試CSS文件中的各個CSS定義，比較方便。Chrome開發者工具在這方面暫有所欠缺。

Firebug在Net面板下，切換查看各個請求非常麻煩，需要每個加號減號的收縮展開，尤其是要往前回顧的時候。而Chrome下的Network就沒有這個問題，可以方便的點叉關掉或直接在左側切換。并且Net是懸浮預覽，而Network則是直接全部預覽，要直觀一些。而且在對XHR請求時下斷點上，Chrome開發工具可以根據URL匹配，而Firebug只能斷在所有請求上。差距立現。

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

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

在控制臺方面，Chrome開發者工具和Firebug也各有所長。Chrome開發者工具的自動完成只能顯示一個，但查看運行結果可以進一步追蹤堆棧，不僅僅只是字符串化的內容。而Firebug則可以給出浮動菜單顯示所有的自動完成備選項，但結果是一個字符串內容而已。Firebug會在控制臺中冗余的顯示XHR請求，無論你選上面哪個篩選，都不能單純過濾掉這些請求。但Chrome的控制臺則是很專一的顯示Error，Warning等內容，同時也可以在選項中設置為顯示XHR請求。不過畢竟XHR請求的顯示可以在Network面板里查看，所以默認不打開也是比較合理的。這可能也和Firebug各個功能模塊化相互獨立有關系。

Firebug可以用第三方編輯器打開代碼，并且可以匹配在特定網站自動打開Firebug，并在狀態欄或工具欄圖標上顯示當前頁面的錯誤數量，這些都是Chrome開發者暫時做不到的。

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

Chrome的開發者工具目前隨著Chrome的高速更新而更新著，且最近有Firebug的開發者跳槽到Google陣營。而Firebug卻要面臨和Firefox內置的控制臺和調試器的競爭和沖突，前途并不明朗，也曾有Firebug貢獻者稱要考慮這個項目的生死。

2011-9-25 18:06 更新：發現Firebug的搜索是跨越所有模塊的，搜索結果可以自由的上下跳轉，并囊括DOM，所有Script。而Chrome開發工具只是在當前作用域有效，需要手動切換，并沒有方便的導航，不能自由的向前向后。

以上都是個人陋見，歡迎指正。

轉載于:https://www.cnblogs.com/ayanamist/archive/2011/09/23/2186318.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。