I find myself wanting to document various different attributes mid development on my jquery code. I have created the following function to help use FireBug’s console access code effectively in the jQuery fashion.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | /** * JConsoleFB 0.1 * * Jquery plugin for FireBug console integration. Uses chainable method. * See: http://getfirebug.com/console.html for options * @author Aaron Saray (http://aaronsaray.com) */ $(document).ready(function () { if (typeof window.console != 'undefined') { jQuery.fn.log = function(msg) { window.console.log("%s: %o", msg, this); return this; }; jQuery.fn.debug = function(msg) { window.console.debug("%s: %o", msg, this); return this; }; jQuery.fn.info = function(msg) { window.console.info("%s: %o", msg, this); return this; }; jQuery.fn.warn = function(msg) { window.console.warn("%s: %o", msg, this); return this; }; jQuery.fn.error = function(msg) { window.console.error("%s: %o", msg, this); return this; }; jQuery.fn.assert = function(expression) { window.console.assert(expression, this); return this; }; jQuery.fn.dir = function() { window.console.dir(this); return this; }; jQuery.fn.dirxml = function() { window.console.dirxml(this); return this; }; jQuery.fn.trace = function() { window.console.trace(); return this; }; jQuery.fn.time = function(name) { window.console.time(name); return this; }; jQuery.fn.timeEnd = function(name) { window.console.timeEnd(name); return this; }; jQuery.fn.profile = function(title) { window.console.profile(title); return this; }; jQuery.fn.profileEnd = function() { window.console.profileEnd(); return this; }; } }); |
Usage is pretty simple. For example, say I wanted to log something about the current element I’m going to clone. I may do this:
1 | var newClone = $("#cloneable").log('Cloning this').clone(); |
This will display a reference to this object as well as the message ‘Cloning this’ in the Firebug console as a log type.