Tuesday, November 13th, 2007

DebugBar 5: New CSS debugging for IE

Category: CSS, Debugging, IE

Jean-Fabrice Rabaute, author of Companion.JS, has put out a new DebugBar as he aims to get IE developer tools on par to Firebug.

In this new version, on a selected element in the DOM Tree, the DebugBar can now display source code, applied style (with css details), computed style, layout, and attributes.

Posted by Dion Almaer at 5:46 am

4.2 rating from 47 votes


Comments feed TrackBack URI

firebug is more JavaScript debugging tool, than CSS.
So, i am not sure that this thing can be compared to Firebug

Comment by Prokur — November 13, 2007

Well, Firebug is very useful for CSS tweaking/debugging too. But I agree, compared to Firebug this tool is distinctly lacking a JS debugger. And that is something that is sorely needed for IE, as the current options are at best limited. I’ve now started using Aptana professional for IE debugging, but I need some more experience with that tool to use it effectively.

Comment by Ron — November 13, 2007

This in no way compares to firebug, but it is very very useful for giving an insight into _just_ what IE thinks it’s doing with your site

Comment by Jamie — November 13, 2007

>>And that is something that is sorely needed for IE, as the current options are at best limited.

Actually at least three tools from MS can be used to debug javascript in IE
– Visual Studio
– Microsoft Script Debugger (free)
– Microsoft Script Editor (part of MS office)
So I don’t think that one more debugger is so necessary, on other hand DOM viewer from MS is not useful at all, and here DebugBar shines.

Comment by Maxim Kozhuh — November 13, 2007


Debugbar is mainly for DOM and CSS stuff. For Javascript stuff, there is also Companion.JS ( ) which is not as good as firebug yet, but I am working on it !

When combined, those 2 tools are not so bad. OK, not as good as firebug, but they are improving…

Any suggestion is welcome !


Comment by JFR — November 13, 2007

My IE& and IE7 crashed after installing the DebugBar :-( I have to uninstall that software.

Comment by gluecksmensch — November 13, 2007


@gluecksmensch :
Which OS version do you have ? Do you have google desktop installed ? Do you have other IE extensions installed ?

Thank you for any feedback, so I can debug and correct the problem. You can contact me directly at contact@debugbar.com or using the forum on the website.



Comment by JFR — November 13, 2007

What does this have over IE Developer Toolbar?

Comment by preston — November 13, 2007



* You can view HTTP/S requests as well as ajax requests with headers,downloaded data (when text), timing and cache info.

* You have the list of javascript functions

* You have a javascript console where you can run javascript code in the currently loaded page.

* You have Tidy integrated to check the html source code. You also have CSE HTML Validator connection, so if you have this soft, you can use it for HTML check.

* You have usefull informations regarding the page : charset used, mode user (standard mode or quircks mode), page download time.

Hope this helps.


Comment by JFR — November 13, 2007

Excellent work, JFR. I can’t wait to try it out (or maybe I can, I hate debugging IE).

Comment by Andy Kant — November 13, 2007

Sold! I’ll check it out.

Comment by preston — November 13, 2007

Is there a way to tweak the CSS while viewing a page, like in Firebug? (I installed it and am trying it out, I’m just wondering if I didn’t see this feature.)

Comment by Matt — November 13, 2007


@Matt : So far you can change the attributes (the last tab in the DOM tab) when viewing a page.

I plan to add the “edit css” feature in a future version (hope it will be come soon).


Comment by JFR — November 13, 2007

This looks very cool; I’ll definitely have to give it a try.

Here’s some comments I had, however:

a) What version of IE has this been tested on? From the above comments, and your screenshots, I’d assume IE 6 and 7. However, your site makes no mention of this.

b) No plug for Companion.JS on your DebugBar pages; will 5.0 ‘replace’ this, or be an addition (I’m not clear from your comments above and the site).

I’m almost completely back to IE 7, so this is a real breath of fresh air. Thanks!

Comment by James Skemp — November 13, 2007

@Maxim Kozhuh: The convenience of having the debugger within the window is so much more valuable than having to wait while a separate debugger loads up.

I already have the previous version of this tool installed and it’s mighty handy. But when it gets a serious JS debugger in there that is displayed within the window, I’d gladly fork over money for that badboy.

Comment by Brian — November 13, 2007

Maybe Microsoft should be talking to you to license your apps to make them free to all. There is no way that people will use these as their primary web debugging gear while there is better stuff out there for free.

Comment by Mark J — November 13, 2007


About DebugBar and Companion.JS :

* Companion.JS is mainly on the javascript side

* DebugBar is mainly on the DOM/CSS/HTTP requests side.

Maybe, I will merge the 2 tools, or will provide an installer with DebugBar + Companion.JS. I have to think about this on future releases.


Comment by JFR — November 13, 2007


@Mark J : Good idea ! I would LOVE to have sponsoring from Microsoft to develop my tools for free. Maybe it will happen some day ;-)


Comment by JFR — November 13, 2007

Looks really promising, although you might want to qualify “The Most Advanced Web Development Tool” with “(for IE)”…

Comment by Patrick Donelan — November 13, 2007

Is there any way to see Cookies?

Comment by taka — November 14, 2007



The answer can be found here :


Hope this helps.


Comment by JFR — November 14, 2007

After installing debugbar in my windows box, i’m facing some issues in my application. In fact one of my website page stopped loading for some reason.
Checkout the website http://www.trovix.com .
1. clicking on the circles in the G! map throws some error which when I tried to debug takes me to the html page (???) which has a proper syntax.
2. Click on the my profile tab [u have to be a registered user to see the contents inside this tab],the page load partially and throws some error after FEW mins .

Need your help here to figure out the issue.

FYI,There is no issues in the application. It works good in IE7 without the debugbar installed.

Comment by Jay — November 15, 2007


@Jay : I tried your web site http://www.trovix.com without DebugBar nor Companion.JS installed and I get a JS error.

If you still have troubles with DebugBar or Companion.JS installed, feel free to contact me at contact@debugbar.com or post on the forum :


For info, DebugBar is not injecting any JS code into the page, not changing the DOM. Same for Companion.JS with the exception of the “console” object which is created but not injected as a JS object.


Comment by JFR — November 19, 2007

Not sure I understand the benefit of the debubbar without Companion.JS. Not sure I understand Companion.JS’ dependence on the Microsoft Script Debugger being installed. Seems that the Microsoft Script Editor and Visual Studio prevent the Script Debugger from working properly. On Windows Vista I couldn’t get Companion.JS to work. On a Windows XP system, I couldn’t stop the Microsoft Script Editor from taking over the script debugger’s role, even after disabling the JIT debugging.

Comment by youngApprentice — November 24, 2007


DebugBar and Companion.JS are complementary tools. Companion.JS is using MS debugger and need some script debug components to be installed in order to work.
Those components are not redistributable, so the user need to install Microsoft Script Editor to install those components.

I contacted some people from Microsoft to discuss this install issue and I hope to be able to have a better install in the future for the tools.


Comment by JFR — November 26, 2007

Leave a comment

You must be logged in to post a comment.