IE's beta Developer Toolbar
By Nicholas Rougeux, posted on September 17, 2005 in Browsers, Web
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.
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.
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.
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.
- 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.
- 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.
- 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
- 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.
- 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.)
- 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.
- 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.