Hi, all!
The past week i've written 4 plugins and i would like to take a moment
to share a tip which i've found useful while working on them.
In each of my plugin functions i optionally create a "debugging area",
a DIV element which i use to write debug info to:
jQuery.fn.initConfirmer = function(opts) {
if( ! opts ) { opts = []; }
var self = this;
self.opts = jQuery.extend({
...
debuggering:false
}, opts);
self.dbgdiv = null;
function dbg(msg) {
if( self.dbgdiv )
self.dbgdiv.prepend("Confirmer debug: "+msg+"<br/>");
};
if( self.opts.debuggering ) {
self.after("<div id='ConfirmerDebugDiv'>Confirmer debugging area</
div>");
self.dbgdiv = jQuery('#ConfirmerDebugDiv');
self.dbgdiv.css('border','1px dashed #000');
dbg("debugging activated.");
}
...
dbg("Doing something...");
...
return self;
};
The key thing is that the debuggering DIV is added directly after the
plugin's target element. While that is of course not suitable for all
plugins, it has so far proven to be quite useful and keeps the the
debug output nearby while i'm testing a new widget.
Another key thing is that messages are added to the beginning of the
target, using prepend() instead of append(). prepend() keeps the
output right there next to the widget being tested, which is
especially nice when generating lots of debug output which might
otherwise scroll down off the screen.
With this in place, debug output can be enabled by passing
{debuggering:true} along with normal list of options passed to the
function.
Happy hacking!
