The UX of DebugBar

Published 4 Comments on The UX of DebugBar

A new updated Internet Explorer tool is on the scene called DebugBar.  I was excited at first for this tool because I think IE has no decent tools.  However, my hopes were soon dashed.  I might be stupid and it was there and I couldn’t see it, however, I could not find out how to change a CSS attribute.  I didn’t see it anywhere.  There were JS tools, but I couldn’t find the CSS power.

Hmm,  I just noticed they have a beta version.  Installing now…  Looking…  Nope.  It shows all kinds of CSS information, but doesn’t let me change any of it.  Why is this missing?  Maybe it’s planned, but it isn’t implemented yet.  Is it really a beta?  Or is it an alpha?

Doesn’t Beta mean “Feature complete, but very buggy”?  Is this thing feature complete or not?

Here is a quote from their beta page:

  • Attrs (existing feature): You can see the list of attributes defined for this tag, modify then and see DIRECTLY results under Internet Explorer !”’ : Moreover, when this attribute is a “class” attribute, the list of all the defined attributes in the styleSheets are displayed in a combo box for the selection !

This sounds like what I want.  But I can’t for the life of me figure out how to do it.  Frustrating.  So close, yet so far.

One small UX item.  I don’t love how to inspect an individual item.  You drag that traget thingy onto the page.  It took me a while to find it.  Maybe they should bump up the discoverability of that one item.

If this tools works, I will use it.  But right now, it doesn’t do the basics of what I want.


  1. While Firebug has spoiled me for this kind of tool (DebugBar is no Firebug, to be sure), it’s still better than nothing. I’ve been using for about a week and solved a nasty little jquery-selector-not-working-as-expected-in-ie problem just by looking closely at the rendered source rather than the original source.

    When it comes to IE, I’m at the point of taking anything I can get to, if not reduce the suck-fest, at least empower me to work around it.

  2. Hi,

    First, thank you for trying the DebugBar, even if you feature request is still not there.

    So far (talking about 5.0 beta), you can dynamically change attributes already set in the html code. For instance, when you have “width” set for a table, you will be able to change the value dynamically and see the result directly in the page.
    If the “border” value is not defined in the html code, it won’t appear, and you won’t be able to change it.

    On version 5.0 styles/CSS has been improved. Initially, I wanted to have the styles editables on the fly, but decided to launch a “read only” version first, to improve the tool step by step, and have users feedback.
    Editing the style have a great chance to be on the next release (5.1) because I know it is a very useful feature.

    I know the tool is not yet perfect, but it is improving.



  3. @JFR: Thanks for the info. As Rob pointed out, we are all desperate for this and really appreciate the software you are developing. We look forward to future releases. This CSS editing is the number one thing for me to switch from IE Dev Toolbar. Thanks again.

  4. I had the exact same problem with figuring out how to inspect an element. Took me quite a while to discover the draggable ‘target thingie’. IMHO On/Off Inspect mode button works much better. Also showing the elements’ style live, while hovering over them in Inspect mode is a nice relted feature which I’d love to see also in Debugbar.

Whatya think?