MooBugger – the MooTools JavaScript Console
This is actually kind of old news, but it’s something that never really got released. Valerio and I spent a few weeks a while back putting together a bookmarklet that would give you a Firebug-style JavaScript console for browsers without Firebug (IE, Safari, etc).
It supports console.log statements in the various formats that Firebug supports (“console.log(‘foo: %s, bar: %o’, foo, bar);”) and is really useful for debugging your code in non-Firebug browsers. I like to use it in conjunction with X-RAY to solve layout issues, too.
To use it, all you need to do is drag the link on the bookmarklet page into your bookmarks and then click it on any page to bring up the console (I.E. you have to right click and choose “Add to Favorites”).
You can see it in action on the test page.
Note: If you have Firebug installed and enabled, it doesn’t do anything.
Follow @clientcide on twitter to get notified of new posts.
To follow me personally on twitter, follow @anutron.
January 13th, 2009 at 3:46 pm
[...] tool che permette di avere una console simile anche sui browser che non lo supportano. si chiama MooBugger ed รจ stato implementato dai ragazzi di MooTools per farlo funzionare occorre salvare nei preferiti [...]
January 14th, 2009 at 10:49 am
Hey Aaron
Does the moobugger allow you to get into the scope of iframe content that’s on a different domain than the parent page? I wouldn’t think that is possible, but I thought I’d ask just in case. That would be extremely helpful during cross-browser testing for facebook apps.
Thanks,
Bob
January 15th, 2009 at 3:43 am
[...] fresca di presentazione sul blog di Clientcide è invece MooBugger, un tool per il debug in stile Firebug e cross-browser creato da Valerio Proietti (team leader e [...]
January 15th, 2009 at 8:29 am
although it is kind of old news, I’m glad you released it…
it sure I will help me to work out some strange things in IE.
I also like the X-RAY link, will sure be handy as well.
so thx for all that :)
January 15th, 2009 at 9:52 am
No – you can’t inspect the contents of a cross-domain iframe. This is all done in JS, so reaching across domains is prohibited as usual.
January 15th, 2009 at 12:47 pm
Nice, lots of help debugging scripts. Especially it’s *ease of use*, I never liked adding Firebug-lite to pages.
Noticed its somewhat buggy in IE7: Seems positioned absolutely on the page instead of fixed, so scrolling down leaves it behind. And minimizing it doesn’t seem to work as intended. But not really unexpected either; IE7 sucks like IE6 :(
Thanks for releasing this.
January 15th, 2009 at 12:59 pm
Hmm. It used to work, but it’s been a while since I actually used it in IE7. Perhaps I’ll spend a little time debugging it. You’re welcome to, as well, of course.
January 16th, 2009 at 4:39 am
[...] MooBugger [...]
January 20th, 2009 at 1:49 am
Can confirm that it does not work properly on IE, moves up with the page. Though it did way back (I remember us laughing [via email] that this was happening on Maxthon).
Also, a warning should be made here, as well as on the Firebug site, that if you have all these console.log statements, and than you remove firebug lite/ Moobugger without removing the log statements, your site will break. As soon as it hits the first console.log the script will exit.
This should be obvious, but has bitten me at least once, so worthy of mention.
January 20th, 2009 at 8:24 am
You should use my console wrapper: dbug.js – it’s designed to be left in your codebase and it can be enabled at will.
I’ll look into the IE issue.
January 22nd, 2009 at 11:07 am
Regarding the IE issue, I think one can pretty well fix the issue with one keystroke on line 162, add a “6″ to “Moo.Client.Engine.ie”:
if (Moo.Client.Engine.ie6) debug.iFrame.style.position = ‘absolute’;
Since IE7 supports fixed positioning (at least in strict mode) you’re all set without that special hack.
By the by, Aaron: regarding your earlier comment welcoming us to try debugging it ourselves, right on! I accepted the invite, but it did take a bit of hacking around to download the debugger.js as well as the supporting files (so as to install it elsewhere to play with a modified version). Do you have a zip of the whole package handy for us to play with/debug/build upon?
January 22nd, 2009 at 11:29 am
Nice work! It’s fixed. Thanks for figuring it out – I was just too busy this week to dig into it. I also added moobugger.zip to the directory.
January 22nd, 2009 at 5:01 pm
Sweet! Glad I could finally contribute something back. Totally grateful for your work here–between this and the mention of X-RAY, for example, it made my day of IE debugging slightly less painful!
January 23rd, 2009 at 6:49 pm
Hi. Moobugger has no effect in Safari 2.0.4 (OS X 10.4.8). Nothing happens when I click the bookmark. I assume a console window is supposed to open?
I will try on another system (OS X 10.4.11 with Safari 3.2.1) later.
Thanks,
Scott
February 11th, 2009 at 9:10 am
Aaron, I suggest you put up a demo page that disregards the presence of other loggers to inject MooBugger, for demonstration purposes.
February 11th, 2009 at 9:40 am
Not a bad idea. I’ll put it on my to-do list, but I’m not sure when I’ll get around to it… That list is getting long!