Debugbar, CompanionJS - Webdev tools on IE

FireBug is an excellent tool on FireFox for anything to do with Javascript et al. If you have no idea about the FireBug, posts this and this would give a good idea about FireBug.

Unfortunately, i couldn't find any such equivalent tool/plugin for IE client-side dev/debugging. There is a version of FireBug for IE, with just a Javascript shell and inability to profile/debug a live site.

To my luck, Google blessed me with this IE plugin called DebugBar. Its a pretty good developer tool for client side debugging on IE, with its own PROs and CONs.

Some of the features of DebugBar:

DOM Inspector: View DOM tree, modify tags, css, attributes of the page on the fly

HTTP Inspector: View HTTP and HTTPS request/response

JS Inspector and Console: Explore JS scripts and functions. Javascript shell to executre scripts on the fly. This looks pretty decent than FireBug.

HTML Validator: Describes the errors in the rendered page. Quite detailed and wide variety of errors are caught during validation.

Pickles: Other peripheral tools like color picker, page screenshot etc

Download the plugin from here and install it. These guys claim to have received the best IE plugin award from Microsoft and also, showoff their spyware free certification.

Two UI components appear in the plugin. A toolbar and a sidebar. Below are the snapshots.

Sidebar

Toolbar

I am not going to explain every feature of the tool, as the website has sufficient documentation and above all, hands-on is the way to explore the tool.

So, i am just going to compare this tool with the FireBug in terms of functionality and usage.

Parameter	FireBug	DebugBar	Remarks
DOM Explorer	Present	Present	Equally powerful.
Drag Target	Absent	Present	DebugBar has a catchy “Drag Target” icon that can display the element under the icon’s scanner. Drag Target can be achieved in FF through Web Developer toolbar.
HTTP Monitor	Present	Present	Equivalent
Javascript explorer	Present	Present	DebugBar functions explorer is more user friendly and detailed.
Javascript shell	Present	Present	Equally powerful.
Live Debug javascript	Present	Absent	No live debugging, No breakpoints and No watch in DebugBar.
Live Profile javascript	Present	Absent	No live profiling, No Performance stats on execution time and function calls invocations in DebugBar.
DOM Validator	Absent	Present	Scans for common coding errors in DOM automatically.
HTTPS requests	Absent	Present	Very useful feature of DebuBar not available in FireBug.
Live Edit page(HTML, CSS)	Present	Present	Similar

Overall, FireBug scores mainly in the profiler and debugger functionality over DebugBar. Otherwise, the tools are equally good in features and usage. In any case, there are similar tools in FireFox. But, IE lacks in this area. That being the case, i would consider DebugBar a worthy tool for web developers.

The main drawback is the missing debugger functionality in DebugBar. I found another IE plugin from the same guys to do embedded live JS debugging. Its called CompanionJs live debugger. The curious minds can check it out here.

In any case,FireBug seems to be the bigdaddy of all debuggers and, CompanionJS is more similar in UI and functionality, but there can be only one BOSS 8)