– a great web development tool for Internet Explorer

As most Firefox-savvy web developers know, nothing quite beats the Web Developer Toolbar (WDT) extension. As if you didn’t already have enough good reasons to develop in Firefox instead of IE, the WDT gives you so much control that after using it, development in IE feels like building a house of cards in the dark. Even Microsoft recognized the advantage that WDT gave Firefox over IE, and developed their own version, called Developer Toolbar (DevToolbar). Isn’t that a clever name? DevToolbar, currently in beta 2, shares many of the same features of WDT but lacks overall polish and really feels like a beta. And Microsoft doesn’t seem to be in any hurry to finish it, either. It’s been in beta for a long time.

Recently I was pointed towards DebugBar, an IE addon that is the closest I’ve seen to providing developers a real impetus for using IE for development again. It combines features from three of my favorite Firefox extensions: Web Developer Toolbar, Firebug, and ColorZilla, as well as a few others like ScreenGrab, Live HTTP Headers, cookie viewers, source code viewers, and a couple of bookmarklets I use frequently such as Javascript Shell and RenderMode. It’s quite the toolbox.

The specific feature that I installed DebugBar to check out was the source code viewer, which conveniently shows both original source and interpreted (post-javascript) source. Even more conveniently, it also includes an inline as-you-type search mechanism, which I recently griped about not having in IE. Other features I liked finding were a drag-to-target DOM explorer, color picker, window resizer, screenshot taker, javascript console, and built-in validation. There is also a summary page that includes useful information like which rendering mode IE is using.

Another interesting feature is the ability to ’spy’ on other instances of IE. This doesn’t sound very useful at first — why not just use DebugBar in that IE window? Well, Windows applications frequently use the IE rendering engine in an ActiveX control within their own application, such as Outlook when rendering HTML formatted emails. The real benefit of the ’spy’ feature is that it can also peer into these instances. I can see how this would be a major benefit for developers working on HTML newsletters.

And finally, perhaps the most useful feature is the ability to do live editing of tag attributes and CSS styles. The tag editing isn’t quite a replacement for Opera’s Reload From Cache feature, since you can’t arbitrarily edit the HTML, but the tag editing and the CSS editing are both very solid features and will be very useful for developers.

Unfortunately, it’s not without problems. I’ve run DebugBar in IE6 on Win2k, and IE7 on WinXP. I’ve not run into any problems on IE6, but had severe stability issues with IE7. One thing I was specifically trying to test was whether or not the color picker could grab colors from Flash movies — something ColorZilla cannot do. So I curiously typed in the url for a site I developed recently that had a Flash header animation. My curiosity quickly switched to frustration though, as IE7 completely disappeared as soon as it started loading the page. In fact, IE didn’t just crash, it died. It couldn’t even restart without crashing, which also meant I had no way of disabling the DebugBar plugin. The only thing I could do was uninstall DebugBar. I reinstalled and uninstalled it a few more times to test the instability, but never got very far. Even if I had no errors during my browsing session, closing IE and restarting it would yield the same results. If you can remember to disable the DebugDev toolbar before closing IE every time, you might be able to avoid the constant crashing for a while, but who would (reliably) go through that much trouble? Since I haven’t had any instability in IE6 I’m just going to chalk this up to IE7. Hopefully DebugBar will have an update out soon.

As for the colorpicker test, I tried again in IE6/Win2k and DebugBar had no problem grabbing the color from flash movies! And it even automatically copied the Hex to the clipboard. Unfortunately it automatically includes the # mark with the hex value. This is useful for editing CSS code, but if you tried pasting it into the Photoshop color chooser’s hex field you would only get the first five numbers, since that field only accepts six characters and assumes you are omitting the #. One of the things I like about ColorZilla is that you can choose to copy just the hex, or the hex + the # mark. Another thing I like about ColorZilla is the “resample last location” function, which is useful for grabbing colors from things like link text or rollover images that might have a different color when the mouse is over the element. Unfortunately DebugBar doesn’t have an equivalent feature, which amounts to not being able to pick the color of a rollover state.

Another red flag I found was that the standard hotkey for opening the DebugBar sidebar was Alt-D. Honestly, this was a terrible decision. Alt-D is my #1 most used hotkey in any browser, because that’s the hotkey that focuses the address bar and lets me type in my next destination’s location. I would assume that the same goes for most developers, since we belong to the power-user crowd and are more likely to use keyboard shortcuts than most. Obviously, DebugBar also targets the power-user crowd, so they should be particularly careful about overwriting any standard keyboard shortcuts. The fact that they chose to overwrite the most important Alt- shortcut (in my opinion) is a monumental oversight. Fortunately, you can change this to another key. The only drawback is that it requires you to restart IE before it takes effect — so you can imagine how far I got with that in IE7….

And finally, since I am ultimately presenting DebugBar as an IE equivalent to free Firefox extensions, I really can’t avoid one final drawback — cost. DebugBar is free for personal use. But if you are a professional developer — which must be the majority of their target demographic — it will run you 59 Euro, or about $75 US for a single user license, with other options available for teams or corporations.

Now I just want to go on record saying that I’m not going to blame anybody for wanting to get paid for their efforts. (I’ve developed and sold an IE plugin myself.) On one hand, this is an impressive collection of tools. If you’re an IE developer it’s probably worth a license. But it won’t convert many Firefox developers, who are used to getting all of their extensions for free.

Verdict: If you already develop in IE, or are an HTML email developer, or even an application developer that uses IE ActiveX controls, then if you use IE6 this is highly recommended. If you already use IE7, give it a try and see if you have stability problems on your system, and maybe wait for the next version. Even if you’re a Firefox developer, then I still recommend trying it out. It will help iron out all those IE bugs that come up during development, but it’s probably not enough to make you want to drop Firefox or justify the cost.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s