Impression of Firefox’s New Developer Tools

The lastest version of Firefox, which is 10, has some fancy new features for web designers and developers. For the first time Firefox has built-in inspect element functionality for html and css. It isn’t revolutionary, but the design and functionality is pretty slick. That, and this is just the first iteration. It sounds like they have more to come with each release.

I had actually forgotten about the changes until, when in Firefox, I accidentally hit (Option + Command + I) as I normally do in Chrome and the new inspect element interface popped up. From a looks perspective, the UI is very clean and is pretty unobtrusive upon first opening. HTML opens partially visible and the CSS sidebar is hidden at first to give maximum screen real estate.

Here is a little preview of the new features.

More information from the Mozilla Blog and the list of Tools from Mozilla.

Browser Development Tools

For many of us Firebug, when it came out, was the greatest invention since slided bread. Before that time we were forced to make changes in our text editor, hit save, go back to the browser and refresh upon every little css tweak without having any easy way of testing. Even as Chrome began to see superior performance a lot of us stuck with Firefox because Firebug had become a part of our development process.

But for me Firefox continued to go down hill. Crashes were numerous and the program was slowing my computer down considerably. So I took the plunge and moved over to Chrome and it’s Developer Tools. It took a little bit to adjust but now I can move between the two with ease.

It may be my personal opinion but when Firefox lost much of the web development community is when they lost the battle with Chrome. We are the “experts” telling clients, our families, friends and anyone who cares what browser to use. So when we started using Chrome, the rest of the world started following our example. But maybe I’ll thinking our industry has more clout than it actually does.

Overall Impression

From what little there is of the new developer tools, I really like what I see. The interface is super clean. The best feature is the main one, Inspect Element. Of all the various development tools, inspecting elements in Firefox is the easiest to use. It is super quick and you are able to dig in and select child elements even when very small.

The other nice feature is the bread crumb trail of elements. Especially, because they remain fixed as you move between them. So if you select an input field and then click on the parent form breadcrumb, the trail doesn’t change. You are able to move back to that input field easily without having to reinspect or open up the form markup in the html area. This makes going from parent to child elements a snap.

Cons

I wasn’t able to find a keyboard shortcut on the list (let me know in the comments if you find one) but you are required to open HTML and CSS separately. I’d prefer if they both open with one click or keystroke.

If you use the Web Console along with the Web Developer open you will see that your window becomes very tiny even on a large monitor. With Web Console on the top, CSS on the side and HTML on the bottom, you are left with a fraction of your original viewing area. And there is no way of pulling the developer tools out of the browser. This really sucks for people who want to utilize two monitors or for people with a real small screen. I tried using it on my 11” Macbook Air and the screen real estate problem was pretty noticeable.

A small annoyance, but to add styles to an element you have to click the line of the closing bracket. In the other developer tools you can click on the top line or the bottom to create new style elements.

Really these are pretty small and it sounds like Mozilla is taking this project pretty seriously, so we may see improvements rolled out with each Firefox version. I know 11 has a few cool additions in store.

Wishlist

My biggest gripe and wish is for the ability to paste in large chunks of css, which is already a feature of other development tools. I’d like to be able to copy all of the styles for one element and paste them into another. It doesn’t seem like it would be that hard to code it so that you can dump in a whole list of declarations and it automatically separates the properties from the values.

Is Mozilla Making the Right Choice

I really have to wonder if this was the right choice for Mozilla. They could have tried to build Firebug into the browser itself. Now they have two competing development tools. And it seems like there are other more pressing issues like making the browser stable. I have to Force Quit Firefox every time I need to close it and it still crashes somewhat often.

I doesn’t look like these changes are going to be enough to bring the web design and development community back to Firefox. Although, they have other features planned, it seems to be making a faster and more stable browser might have been a better use of time. But we shall see how this develops.