Debugbar – a must have for all web developers

The DebugBar is an Internet Explorer toolbar to increase web dev productivity :

The Toolbar

For all surfers, a toolbar in Internet Explorer brings new and faster functionalities for more productivity on usual tasks on the Net :

* Zoom on the current web page
* Send in one click a screenshot of the current Web Page by email.
* Send in one click a screenshot of the current ENTIRE Web Page (including hidden scrolled parts) by email.
* Search directly with your prefered web search engine
* Find a word in a web Page with the “Highlight in page” function
* Get the color code of any pixel in the web page and anywhere on the screen.
* Get script errors notification and send a screenshot with useful debugging information for developers in one click !

The development bar

For professionals, a development bar placed on the left of the Internet Explorer window gives you important informations to reduce development and debug time of your web sites :

* Directly view the DOM tree of the loaded document with syntaxing colored HTML/JScript/VBScript/CSS code .
* Retrieve an HTML tag directly on the page by using the “Target”
* Access tag attributes, modify them and view the result direcly in Internet Explorer withou reloading the document
* View external Javascript and CSS files attached to the document.

* View Internet Explorer HTTP and HTTPS requests and Web Server responses
* View defined cookies in the current loaded page

* View all the Javascript functions defined in the page and their source code
* Run Javascript code by using the interactive Javascript console

* Get useful informations (download time, number of images, images size) on the downloaded page

The url for debugbar is http://www.debugbar.com

Debugbar.com – 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.

DebugBar for Internet Explorer

DebugBar V5.2 is an Internet Explorer plug-in that brings you new powerful features :

DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your pageHTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server infoJavascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX codeHTML Validator: Validate HTML code to correct and optimize your code and html size of your pageAnd many more features: See page cookies, get pixel color on a page, make a page screenshot…DebugBar can be downloaded fromhttp://www.debugbar.com/ and is free for non-commercial use