Thursday 25 November 2010

jQuery Debug Console

Years ago it was rather frequent to implement your own JavaScript debug console, a pop up window (this was before draggable divs where so common) where you could send your "printf debugging" messages.

In the last years, Firebug, Chrome's JavaScript console, and others have come to replace these home made debug consoles, making them unnecessary for many people.
Well, in general it's also that way for me, but sometimes I feel like an old style home made console could be useful. One of the reasons is that at times it could be interesting to have more than one console.

So, I've prepared my own debug console. It's nothing far too interesting, I've just glued together some wonderful jQuery functionality (it depends on jQuery and jQuery-UI) and come up with something useful to myself (and maybe to a few others, that's why I'm sharing it here). The UI structure of the console is created through the usage of jQuery DOM manipulation magic, and the look and feel (including size) depends on a css file.

It's just a JavaScript "class", debugConsole, with a few obvious methods (log, clear, close). You can create instances of this class and keep the reference around, or you can use a "global console", through debugConsole.instance(), this way you don't need to create the console and keep a reference to it.


//create a console, keep the reference, and use it
var console = new debugConsole("console 1");
console.log("message");

//use the default console
debugConsole.instance().log("message");


you can see it at work here.

Check the JavaScript "class" here.

and if you think it can be of any use to you, download it, improve it and please drop me a comment here.

No comments:

Post a Comment