Tuesday, November 13th, 2007
DebugBar 5: New CSS debugging for 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.
4.3 rating from 30 votes
firebug is more JavaScript debugging tool, than CSS.
So, i am not sure that this thing can be compared to Firebug
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.
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
>>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.
Hi,
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 !
Thanks.
My IE& and IE7 crashed after installing the DebugBar :-( I have to uninstall that software.
Hi,
@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.
Thanks.
JFR
http://www.debugbar.com
What does this have over IE Developer Toolbar?
Hi,
@preston
* 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.
JFR
http://www.debugbar.com
Excellent work, JFR. I can’t wait to try it out (or maybe I can, I hate debugging IE).
Sold! I’ll check it out.
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.)
Hi,
@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).
JFR
http://www.debugbar.com
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!
@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.
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.
Hi,
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.
JFR
http://www.debugbar.com
Hi,
@Mark J : Good idea ! I would LOVE to have sponsoring from Microsoft to develop my tools for free. Maybe it will happen some day ;-)
JFR
http://www.debugbar.com
Looks really promising, although you might want to qualify “The Most Advanced Web Development Tool” with “(for IE)”…
Is there any way to see Cookies?
Hi,
@taka:
The answer can be found here :
http://www.my-debugbar.com/forum/t9-there-Cookies%3F.html
Hope this helps.
JFR
http://www.debugbar.com
Hi,
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 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.
Hi,
@Jay : I tried your web site 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 :
http://www.my-debugbar.com/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.
JFR
http://www.debugbar.com
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.
Hi,
@youngApprentice:
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.
JFR
http://www.debugbar.com