When developing our organizations Web Applications, most of us typically use Mozilla’s web browser; Firefox. Without going too in depth on why Firefox is or is not the best browser available, I believe its fair to say that Firefox has a wealth of Web Development tools that make developing applications quicker and easier to use. One could argue that IE 7 does have an IE Developer Toolbar that serves many of the same purposes, however, some features such as inline CSS (Cascading Style Sheets) editing are nonexistent in IE’s toolbar. As you may already know, Firefox and IE don’t always display content in the same fashion. Some CSS properties of a web page display differently across different browsers which may cause larger layout issues in the end. Even though I enjoy browsing and debugging in FF, the overwhelming majority of our visitors still use IE 7 or IE 6. This meant that those little browser differences needed to be resolved and I needed a better Developer tool.

A few weeks back I decided not to settle for the old “Save and See” method of making small tweaks to CSS to perfect a page in IE. The hunt was on. I needed to find an inline CSS editing tool that would work well with Internet Explorer. I came across a few small projects, but most were designed for IE 6.0 or earlier and didn’t play well with IE 7.

Finally, after several Google searches and forum perusing, I came upon DebugBar. This is a wonderful little addition to IE because it offers inline CSS editing and more. A feature packed DOM explorer, quick HTML validation, JavaScript Analyzer and Error Notifications, Color picker, the ability to send screen shots to email, and many more simple little features that make developing in IE easy again. One of my favorite little feature's is the ‘Layout’ feature which lets you visualize the margin, border, and padding effects on any selected element.  The Debugbar also features a handy little cross-hair for finding elements quick. This little tool is great for those times that your project has to look good in IE. It’s also a great solution for those of you that have ever experienced the traditional Dev Toolbar’s Stupid Ruler.