Search code examples
firebuggoogle-chrome-devtools

What features does Firebug have that Chrome's Developer Tools do not have?


I'm a novice web developer, and I've had Firebug recommended for debugging several times. So far, however, I've just been using Chrome's built-in Developer Tools. It seems to do everything that Firebug does, and is cleaner and more organized as a bonus.

As I get more advanced in my debugging, are there features that Firebug has that I'll miss out on with Chrome's DevTools? If so, what are they?

Related: Firebug-like debugger for Google Chrome


Solution

  • I used Firebug from the start and it was a godsend like the invention of fire. But then Chrome came out with its debugger and I tried it. I kept using Firebug, but kept an eye on Chome's dev tools and finally could not longer come up with a reason not to switch after JSON tools were added in v12.

    Chrome's DevTools kick butt because it has:

    • Built in Timeline, Profiler and Heap analyzer
    • Built in Audit tool
    • Can access and edit Local/SessionStorage, Cookies, SqlLite DB's, WebSQL, AppCache etc...
    • WebSockets network sniffing
    • JS debugger has some more features (e.g. WebWorker breakpoints)
    • JS debugger let's you edit JS on the fly and run it (JSFiddle w/o the fiddle)
    • Each window gets a devtools window if you like; Firebug is a singleton
    • Firebug perturbs the page by slowing its loading down and by injecting CSS for its inspector feature

    UPDATE: 2 years later I have to congratulate the Firefox team for making huge inroads. That said, the Chrome team and debugger make huge leaps forward on a monthly basis, leading the industry. I'd update the above list, but frankly it would fill the entire page.