Personal tools
Firefox Developer Toolbar vs Firebug - the present and the future

We become what we behold. We shape our tools, and thereafter our tools shape us.

Apr 17, 2014

Firefox Developer Toolbar vs Firebug - the present and the future

It has been a while since I gave a try to the Firefox Developer Toolbar so recently I decided to see what's the current state of this swiss army tool

VS

Let's get started

As a first step for trying out the latest (well not exactly latest-latest, let say latest-sort-of-stable) version of FF Developer Toolbar you have to go to the Aurora site and download the right version for your OS. Long story short, if you have a Ubuntu box just type this in your terminal:

sudo add-apt-repository ppa:ubuntu-mozilla-daily/firefox-aurora
sudo apt-get update
sudo apt-get install firefox

At the time of writing the aurora version of FF is v.30.

The DOM Inspector

First things first! The main feature of Firebug has always been the DOM inspector and, obviously, the FF toolbar has it from a long time. I have to say that the UI and graphic of this part has really been improved lately, as you can see in the image below:

 

That's the detached mode of the toolbar. It can also be attached at the bottom of the page or on the right side.

 

 

So far the inspector of FF Toolbar and Firebug are really comparable. Both have the DOM "breadcrumbs" that let you easily see the containment hierarchy of the current DOM node. Both the toolbars also feature the inspection of the CSS rules that are applied to the node:

 

 

Also both the toolbars have a "box model" tab that let you see in a graphic way what's going on, on the CSS side, in the box model: margins, borders, padding, width and height of the box.

 

 

The forth section is different in the two toolbars: the FF one has a very handy "Fonts" tab that gives you a preview of the applied fonts:

 

 

Firebug on the other hand has a tab that displays the DOM properties of the current node.

 

 

I have to say that personally I find more useful the Font tab of the FFT instead of the DOM tab of Firebug.

Javascript Debugger

The Javascript Debugger feature is excellent in both tools. I only noticed a very handy small thing: the FF Toolbar have a little tiny button to "prettify code". Amazing! This is especially useful when dealing with minified Javascript (except for the renamed variables of course, there's no possible help there). Also the FFT has code highlight, Firebug sadly doesn't.

 

 

CSS Debugger

Both the toolbars have a nice CSS debugger. The FF Toolbar has a nicer UI but Firebug has the CSS autocompletion, which is really handy.

 

 

The Profiler

This feature is not available in Firebug so a comparison is not possible. This kind of profiler tough is not completely new, Chrome already features it from long time. Never the less is very useful to have a big picture of the resources that you Javascript is using.

 

 

Network usage Analyzer

In this section too the main difference that you can see is the UI. The FF toolbar looks much nicer and also provides a view with a pie chart representing the total time spent in downloading the page, sliced by resource type.

 

 

If you click on anyone of the slices you'll get redirected to the detailed view, which looks very similar to the Firebug's one.

 

 

Easter Egg

During the write of this article I accidently found an Easter egg from the Mozilla Foundation. Just go to:
https://developer.mozilla.org/en-US/docs/Tools
and open the Debug console view by pressing Ctrl+Shift+K

...you're welcome! ;)

Conclusions

In conclusion, I was really impressed by the steps ahead that the FF Toolbar took lately. On the present day, I would say that both toolbars are really great. As any other web developer I'm really used to Firebug so I find it comfortable, but the fresh UI of the FF Toolbar and the few more features that already has, let me think of switching my main tool.

Oh btw...a side effect of following this blog post is that now you have the upcoming version of FF and you can give a peek to the new user interface Australis!
So far, IMHO the new UI is really impressive.

Filed under: , ,
comments powered by Disqus