Firefox 10 and development tools

New version of Firefox (version 10, if you have already lost the track) is available to download. Usually I don’t bother to install beta versions (don’t participate in the beta program at all) so this release feels to me almost like a brand new product. Mozilla added some improvements and new built-in tools for developers. If someone uses well-know plugin Firebug, new tools might look familiar. That move also brings Firefox closer to Chrome and Safari.

I’ve been using FF for development, mainly because of the Firebug, so for me this is a good reference point. Personally I prefer to use Firebug over tools available in WebKit browsers (despite better looking UI) and there are some things that Firefox’s tools are doing better.

DOM and CSS inspectors look much nicer and are much better organized (CSS inspector appears on the side of the window, not on the side of DOM inspector), elements are highlighted with a nice tooltip - something that Firebug is lacking. On the downside, the DOM inspector locks the window (after making the selection) as the rest of the elements get overlay with half-transparent background. If you want to inspect another element you have to close the inspector (or press escape key) and start again. This is something where Firebug is working much better - the page doesn’t get blocked after the selection.

Firefox 10

Other area where Firebug is doing better is the CSS inspector and on-the-fly editing. Firebug offers code completion for the properties and their values. That seems to be missing in Firefox’s tools.

Console also works (and looks) differently and it is not part of the inspectors. It is a combined version of the network tab and JavaScript console and by default it is attached to the top of the window. Looks plain and simple, but does the job. If console is not enough for JS experiments, Scratchpad is still much better place to do play with.

I am going to give these tools a try as they are looking promising, but something tells me not to uninstall the Firebug. Let’s hope that these tools will get better and better with next releases.

Got some comments or something to say? Feel free to express your thoughts on twitter, facebook, your blog or somewhere else...