Firefox: Firebug vs inspect element

Question

I'm new to web developing and I keep hearing suggestions to use Firebug. The thing is, I can't see any advantage of Firebug over the inspect element feature (I use Firefox 24). Am I missing something?

I'm afraid to get used to one tool and then get to stuck in my ways to switch over to the better tool. Please advise on specific features that are superior in one tool or the other.

Answer 1

Updates after 2 years

As I have used the dev tools more and more, I've come to realise a few things:

1. Firefox's Dev-Tools seem to be in development hell. It's been 2 years since my answer, and there's barely any noticeable progress in the features or ease-of-use.

   • Meagre improvements in Network panel and Debugger, but still way too much work has to be done to make it anywhere as good as Chrome.
   • The debugger is still a mess, with the browser hanging a lot on breakpoints.
   • The JSON objects are still shown in that very frustrating tree form, with no possible way to copy or expand to a JSON string.
   • The timeline feature is laughable to say the least.

   They are such basic requirements that I have come to believe that Mozilla doesn't care about Dev Tools even a bit.

2. Firebug is lost - it's going nowhere, and the team is floundering to create a new Firebug 3 which builds on top of the built-in Dev-Tools. Now, since the Dev-Tools are so badly underpowered I have no hope that Firebug folks would reach anywhere near proper usability for atleast a year.

3. That brings me to Chrome. After giving the newest version a look, it seems the Chrome team has an almost unassailable lead in the Developer Tools area, and rightly so. They've put a significant focus on the developer, and created some nifty things to simplify testing and development for web-development.

So, in conclusion, if you want an answer to the question today, I would unreservedly recommend you Chrome. It saves a lot of your:

• blood (from boiling),
• sweat (from coding), and
• tears (from debugging)

Thank you.

Now, read what my 2-year old self thought:

---

Some differences:

++ = web inspector is better
-- = firebug is better
== = can't say

++ There is a 3D mode in the Web Inspector, which is very good if you are fiddling with z-indexes or the element's hit-area is not properly being identified.
++ If you have Firebug open in a tab, and switch to another tab and come back, it takes quite some time to switch. This problem is apparently not there with Inspector.

This problem was because of bugs in Firefox's Javascript Debugger (JSD). This has been a known bug and is being fixed as I write this... Install the 1.13.0alpha release, which fixes this bug. The newer versions of Firefox will fix their JSD too.

++ The awesome Responsive Design mode for testing your site on different resolutions.

-- There are plenty of addons for Firebug, for XPath, Sass, etc, which is awesome for extended development
-- (Subjective) I find the web-inspector's colour theme very cool, but when it comes down to using it, it's very hard.

== The way objects are output in both firebug and inspector is equally bad, (Chrome reigns here!)
Write in the console: console.log(window) to see what I'm talking about. Actually, Firebug is better even here than inspector.

Answer 2

It really comes down to preference, as there's tradeoffs to each. I do really like the "Style Editor" in the built in Inspect Element which lets you create stylesheets and see the effects in real-time.

Answer 3

I use both for different dependencies.

Most common in my role:

• I find firebug much easier to view JavaScript calls on page load.
• Also, omnibug plugin (to firebug) is very handy to view omniture vars and cookies

Whereas with inspect element in chrome, the advantage I find ultra handy when troubleshooting is the ability to edit styles.

I'm sure this won't sway your decision, but I guess keep and open mind that each has it's own advantages. It's a matter of what you need them for.

I personally cannot see myself adapting to one.