IE's beta Developer Toolbar

The folks on the IE team announced the availability of the beta of a new toolbar for IE geared towards web developers. Taking their cue almost directly from Chris Pederick, developer of the popular Web Developer extention for Firefox, the new tool has plenty of features that are remarkably similar to its competitor, but also some new handy ones.

Keeping in mind that the toolbar is clearly in beta, it's worth a look from any developer who's been frustrated by issues that plague IE6. Let's go over the pros and cons. I should note that while I try not to be, I am somewhat biased against IE due to years of frustration during the development of numerous sites. I'll try to stay objective.

Pros

It exists! The fact that they listened and created the thing is enough to make me shout for joy at the top of my lungs. I use the Firefox extension everyday and have always groaned when trying to figure out some inane bug rearing its ugly head in IE without an equivalent tool.

One of my immediate favorite features is the Show Ruler tool. This performs similarly to the MeasureIt extension for Firefox developed by Kevin Freitas but with a few more useful features. Enabling the ruler tool allows you to draw a line with tickmarks, x- and y-coordinates of the start and end points in relation to the window, and the length. You're able to enable or disable snapping to elements or the X/Y axes, tick marks, end points, and choose from four colors of lines for those darker layouts you may be developing. You can also snap to the axes by holding Shift. Hold Ctrl, and create multiple rulers. You can also adjust rulers you've already drawn by dragging end points, or moving the entire ruler. Values will be adjusted accordingly. Nice features there.

The DOM viewer. Again, similar to Firefox's DOM Inspector feature, this tool allows you to just what it says: view the DOM. You can traverse throughout the document tree and see the properties along with the styles for each element. You're also able to edit some of the properties for each element and view them in real time. Unless I missed something, I don't think this is possible in Firefox. This could come in handy in a variety of ways.

Outlining is another feature the IE team seems to have improved bit. You're able to outline the usual things like table, table cells, images, and custom elements, but they also give you the ability to outline positioned elements such as those that are floated, relative, absolute, or fixed (despite the fact that IE 6 ironically doesn't support the fixed elements). This can be a useful quick check for finding those elements that may be misbehaving due to some JavaScript or whatnot. With the "Any tag…" option, you're able to add as many elements to the list to be outlined. Sure, you can do the same with the Firefox extension but it's not readily apparent (use comma-delimited lists).

These pros are the ones that I consider advantages over the Web Developer extension for Firefox. All the other features are definitely pros simply becuase they exist as I mentioned earlier.

Cons

Again, keeping in mind that it's only in beta, these cons may be resolved by the final release and are more observations and suggestions than cons but they fit the pro/con bill so I'm calling them that.

No icons

Some may prefer no icons but I like them since they take up less space on the toolbar and convey the same meaning. At least give us the option of having them.

Speed

Outlining elements or showing the classes/ids causes delays even on my speedy machine. After using Firefox's extension without any delays, they're bothersome.

"DevToolBar" label/non-button

I keep thinking it's a disabled button since it's right next to the other buttons. Anyone who installs this toolbar knows what it is so a label is not needed.

Tags

In the outline menu, they're called tags. The code such as <h1> is a tag. The set of tags such as <h1></h1> is called an element. If we're striving to make web developers happy here, use the correct terminology.

Window layout

In windows such as Resize Browser and Outline Tags, the layout is counterintuitive. The close button is at the top while the add is at the bottom. I'd suggest a layout similar to that in Outlook when specifying keywords in a message rule with the option for adding at the top, the list and removing from the list in the middle, and the OK/Cancel buttons at the bottom.

Ruler

While I love it as a feature, it's not too pretty. I'd like to be able to choose any color instead of only four, and it'd be nice if the ruler was antialiased. When measuring on an angle, it gets pretty ugly.

Closing windows

Make it so hitting Esc closes the small option windows

Fonts

The fonts used for showing classes/ids/paths/etc. are Times New Roman and at small sizes is incredibly difficult to read. Add some padding to those little boxes that pop up and change the font to Verdana or something easier to read.

Rebooting

Why do I have to reboot to see the toolbar? That's a bit excessive when Firefox only requires you to restart the browser. (This is apparently being worked on according to Markus from Microsoft.)

Options

How about a central place for customization like in Firefox? The default colors for displaying information won't always be good for every site so having the ability to change various aspects like that and having a central place to change options for every area would be useful instead of having to check each feature for them.

Resizing

When resizing a maximized window via the Resize menu, it works, but the window still thinks its maximized and I'm unable to resize it. The Maximize/Restore window button still shows that it's maximized and Restore is clicked, the window returns to the last size I set it before I maximized it. The window should revert to Restored mode like in Firefox so I can reize it if necessary.

That's all I can think of for now after giving it a once-over. I may update this list as I discover some more things. Overall, I'm thrilled that there is a toolbar like this for IE. I know there was the Web Accessibility toolbar but I never liked that and it never did everything I wanted. It also seemed to mangle how some pages were displayed in the browser. I could never pinpoint what caused this and it may be fixed by now but it was enough to deter me from using it. For one of the first times in a long time, I say "Good job" to the IE team for this tool. That it works on IE 6 instead of just being an IE 7 feature is a very smart move. I look forward to the final version.