Firebug 和 Chrome 自帶的開發人員工具相比起來有哪些優缺點?

01-22

網路上很多人都說 Firebug 好，可是 Chrome 自帶的開發人員工具能夠更準確地提供 JavaScript 的錯誤信息。Firebug 有同樣的功能嗎？Firebug 強大在哪個方面?
一個官網教學視頻的地址：
http://getfirebug.com/video/Intro2FB.htm

我發現 Firefox 上能做到但是 Chrome 不知道要怎麼實現的功能：

1. CSS / XPath 匹配測試（FireFinder 插件）；

2. 顯示實際連接的 IP/埠號（在 CDN/代理時好用）；

3. 中文界面支持；

4. 在一行中顯示對端域名，這樣方便人眼判斷域名是否正確；

5. 3D 展示元素結構（火狐內建）；

6. 顯示所有網路請求（包括彈出後立即關閉的新窗口和部分 Flash）（HttpFox 插件）；

7. 控制台默認顯示 JavaScript 對象的部分屬性（或者元素）；

8. 顯示 jQuery 數據（FireQuery 插件）；

9. 顯示來自瀏覽器緩存（BFCache）的請求；

10. 在刷新時保持上一頁面的網路請求數據；

11. CSS 樣式和布局等使用 Tab 顯示，不需要尋找並展開即可切換；

12. 顯示 CSS 字體列表中正在使用的字體（不準確）（插件名好像是 FireFontFamily）；

13. 強大的搜索功能（支持區別大小寫和正則；Google Chrome 的是不區分大小寫、無法限定詞界的簡單搜索）；

14. 能夠方便地複製需要的文本（Chrome 的有些地方不夠方便自然）；

15. 「後退」到上一面板；

16. 記錄指定元素上發生的事件；

17. Tab 補全（Chrome 用的右方向鍵，太遠！）；

18. 還有一大堆需要敲代碼的功能（比如強大的日誌、計時）以及一籮筐插件。

Firebug 很遺憾不支持的功能：

1. source map；

2. 足夠高的運行速度。

Firebug 貌似是 2006 年就有了，而 Chrome 里的類似 Firebug 的工具比如 console 是後來慢慢才有的（具體時間不清楚），也許這是其中一個 Firebug 在開發人員中有很高聲望的原因。

目前他們兩個功能大體上差不多，基本功能都有配備，就看你個人喜好了。一些區別比如 Firebug 可以看 DOM 的結構，這個很有用；個人覺得 Firebug 的 console 比 Chrome 的還是要強大一些；Chrome 支持一些 Local Storage 和 Worker 這樣的功能，但是沒怎麼用過不清楚；另外感覺 Chrome 設計對初學者友好一些。

建議兩個都用。

Chrome開發者工具其實是webkit中的javascript inspector，與safari的工具相同，在功能上Firebug更強大，並且還有許多基於Firebug上的插件（YSlow，PageSpeed...），調試時Firebug比Chrome也更方便，親自體驗下便知，Firebug在調試時甚至還支持斷點回滾（只是鏡像，並非真正的回滾），目前來說Firebug是前端開發的首選，更多可以細節可以查看Firebug官網 http://getfirebug.com

現在很少用firebug了，大多情況下都用chrome dev tools

chrome dev tools缺點是沒有中文界面，布局配色什麼的看起來不太習慣

----------------------------------------------------------------------------------------------------------------

拋棄firebug的原因，簡單說幾點吧

1:chrome支持拖拽dom，有時候改布局神馬的很方便，firebug不可以

2:chrome可以方便得修改user-agent，調整頁面寬高，調試手機頁面很方便

3:chrome不支持的css屬性會用一個嘆號標識出來，firebug會把他直接省略，比如ie的hacks

4:firebug會給css屬性加一些不必要的屬性，

比如我寫個background:gray;，firebug會自動變成background:none repeat scroll 0 0 gray;

5:firebug控制台不支持中文，輸入中文，就給replace了...

以下省略數十條，說不下去了...

自己提自己答還跑題... 作為上邊答案的補充:

因為接觸複雜 JS 調試是在 Chrome 超越 Firefox 成為主流之後,

主要說 Chrome, 對比 Firefox 原生開發工具增加的新功能:

Chrome:

界面清晰, 打開方便, 相對來說火狐還要自己裝插件和在複雜的界面上找;

Workspace, 將 CodeMirror 開發工具加入本地調試的支持;

用開發工具調試開發工具, Popup 開發工具以後按下快捷鍵展開;

較好的 Remote Debugging API 支持, 比如 Node 和 Brackets 的調試工具藉此開發;

比較一致的擴展的調試體驗..(好吧 Firefox 擴展我不會寫..);

JS 性能 profile 的調試比較多, 最新版還支持火焰圖;

Chrome 開發者會在 Google IO 大秀開發工具,

Firefox:

Blackbox 功能, 調試 JS 試屏蔽部分的代碼, Chrome 無此功能;

命令行功能, 快速調用 Firefox 集成的開發工具, Chrome 目前需要點擊;

字體調試的確, Firefox 遠專門一塊區域用來查看字體, Chrome 反而還會出錯;

雙方開發工具都支持的一些功能:

SourceMaps 支持較好, Firefox 在高版本上已經支持, 但 CSS 目前沒有跟進,

..Firefox 上在 JS debugger 右側設置的 "show original sources" 里打開;

文件和方法的快速定位, 高版本 Firefox 集成了, 比 Chrome 多變數名的搜索;

UI 上, Firefox Nightly 版本看, 細節增加的功能不少, 但查找比較難看;

ScratchPad 是 Firefox 較早出來的功能, 相對的 Chrome Snippets 出現較晚;

變數自動補全還能接受吧, Chrome 31 在 CodeMirror 里都補全提示;

Network 請求的內容, Firefox 有的地方比 Chrome 還細, 而 Chrome 顯得明確;

吐槽...

之前看到個觀點, 認為編輯器不斷被集成到瀏覽器中間去了, 很不好,,

感覺 Chrome 和 Firefox 是否存在大量的重複發明, 而不是提供統一的協議給第三方工具;

Brackets 給出的例子個人感覺非常驚艷.

轉chrome devTools的主要原因是firebug缺少js beautify功能，調試壓縮的js時很痛苦。另外個人不喜歡firebug的默認字體。

----------

又想起來一條，firbug無法調試響應式頁面。

用Chrome開發者工具調試一切

Chrome Dev Tools 已經超越了調試 JavaScript 了，Firebug 顯然無法相提並論

firebug里修改js直接保存看效果，chrome還不知道修改了怎麼運行

大概是chrome用的少，沒仔細研究過，但是我還是傾向於firebug的，大概也有先入為主的思想在裡面吧，如果你不僅僅是一個前端開發，而是需要經常性的抓包等等，firebug還是更勝一籌的，從最初的httphelper，最後轉至firebug，如果有天你需要抓包調試的話，兩者比較下或許會發現差距。

可能是我不會玩水壺,每次調試一段垃圾js代碼水壺總是不能選中我要的斷點行

只要js代碼中有非主線上的代碼(定時之類) 水壺的斷點就不能按你的需要選中,會跳到莫名其妙的一樣,所以我總是推薦我的同事使用水壺調試js,應為你無法調試一些不規範的js

水壺=水狐狸=waterfox(64位的火狐)

習慣h5開發apps 那波同好,感覺都是喜歡用chrome和safari的自帶的調試工具,不需要裝一大波拖慢運行的插件,而且mobile模擬都很好.

ps 感覺能說出一大波水壺插件的人都好厲害...

ps2 由於chrome 某些降級版本還是silverlight比較好的調試工具,所以工作上解除水壺不是很多

平常主要用chrome的調試工具,覺得用的非常順手,什麼東西都很直觀.

firefox看起來蠻複雜蠻強大的,可是真去用一下,覺得迷糊

今天沒在firefox里找到worker的調試功能,chrome則直接選就可以在線程中切換了

模擬手機瀏覽器使用chrome，平常調試js用firefox自帶的調試工具。（我不是前端開發人員，偶爾要弄下css和js，平時Macbook上網用Safari瀏覽器，奇葩吧，哈哈）

firebug 用的不多，但是我記得裡面有一個非常牛逼的命令行功能，不是 webkit 調試工具裡面那種 js console，而是一個獨立的命令行界面。我估計既然有這個東西，說明 firebug 有很多深度功能。

就我一個人認為firebug界面非常不友好嗎- -