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!