Jorge Gabuardi

I’ve been a Web Developer for more than 6 years and I was a very heavy Firebug user for quite sometime like most of you. IE has come with their own set of development tools since IE8, but I never really used until a couple of months back and now that IE9 was released not so long ago I wanted to share my experience.

What feature did I use the most?

Inspecting my elements! Inspecting, inspecting, inspecting. Either using the DOM visualizer or selecting the element in the browser, it was all about selecting the element and finding which CSS property was screwing up my design. Firebug presents two options to do so: ‘Styles’ and ‘Computed’ tab. The first gives me the applied styles and the second gives me the final values for EVERY PROPERTY EVER CREATED BY MANKIND regardless if I had set it in my CSS or not.

How did F12 tools solve the problem? Their ‘Trace Styles’ tab is fantastic. It shows you the properties that have been set by CSS and, wait for it…, the cascade for each property. Finding out which rule is the one overriding my color or margins is as easy as expanding the property’s node instead of skimming through the applied styles and figure out where is the property not struck through.

However, I do have to admit I miss auto-complete. I don’t want to do all the writing if I can type two letters, hit up or down twice, and then Enter.

Another way to see the CSS styles was using the ‘Style’ tab. It presents information in a much more organized way making it super easy for me to know the applied rules to the particular element. What Firebug did right is displaying this list in reverse order, meaning starting from the most specific to the most general (which is an improvement I’m looking forward to in the next version of F12 Tools).

What I miss the most from Firebug?

The small quirks really. Features like autocomplete or hovering over a URL for an image or a color and getting a preview next to my mouse. It’s the small things that I miss, and the simplicity of the UI. For some reason, the F12 tools feel like it’s super crowded and it takes three layers of toolbars and menus, rather than one or two, for me to get to the features. But wait, as I’m figuring why so many menus….

F12 has the Firefox’s Web Developer Toolbar features?

I never used Firebug by itself when building a site, there was always Web Developer Toolbar. Some awesome features like Disabling CSS, displaying the elements’ IDs and classes, resizing, ruler… Everything was there and more. There were a couple of features that really surprised me:

• Change user agent string. Limitless possibilities to troubleshoot any agent (I need to try how this works for mobile devices).
• Color picker.  Yet another plugin that I used in Firefox was Colorpicker. It’s here.
• HTML and CSS Validation with W3C. Needless to say, thanks for saving me time.
• Accessibility checker. Thank you for helping me reach all my customers.

Overall

It’s not fair to compare the F12 tools with Firebug alone because the they have the power of Firebug + Web Developer Toolbar + Colorpicker combined, Firebug would be crushed. The right question to ask is: does F12 provide enough functionality to make IE an appealing browser to use when developing?

It’s all about the experience. The features are there, but the UI has to be polished. Small things like not having autocomplete, not a single gradient in the UI to make it look less 90s, or using flat textboxes to edit the values make it feel like an old feature when it’s a super powerful web development accessory.

IMO, F12 tools are looking pretty good to me and have all the potential to be competitive against the other developer toolbars. Using the tools combined with the new goodness in IE9, make IE a solid platform for web developers.