blarg.co.uk

The Firebug console is extremely useful when trying to debug javascript. However, for users that don’t have Firebug installed or are using a browser without a built in console, you either have to delete all logging from your scripts before publishing them or create a “dummy” console object to prevent errors.

A more convenient method is to create a wrapper for the console that you can call instead.

This method creates a function called log which can be called from your javascript and takes the first argument as the console command you want to execute and then any number of extra parameters which are passed to the command.

log('log', 'test');  // console.log('test');

log('info', 'something', 'else');  // console.info('something', 'else');

log('group', 'A Group');  // console.group('A Group);

log('groupEnd');  // console.groupEnd();

All commands in the Firebug Console API commands are supported and they way the wrapper is built means that any new ones added in the future will also be supported.

Additional functionality of the wrapper includes being able to turn off console output completely for when you don’t want your debugging to be output and a default command which lets you use the console without specifying a method to execute. For example, most of my logging is done using console.log so instead of having to write log('log', 'something') each time, I can just use log('something') and it will know that the first argument is not a valid console command and use the default option instead.

// log.js

(function(enableLog) {

	/**
	 * The default command, if the first argument is not a valid console command
	 * it will be output as this
	 */
	var defaultCommand = 'log';

	/**
	 * Executes a console command
	 */
	function applyCommand(command, args) {

		/**
		 * if the command is a valid console command
		 */
		if (!!console[command] && typeof console[command] === 'function') {

			// execute the command
			console[command].apply(this, args);

			// return true
			return true;

		}

		// return false because the command did not exist
		return false;

	}

	// define the function in the global scope
	window.log = function() {

		// if logging is enabled and console exists
		if (enableLog && !!window.console) {

			// convert arguments to array
			var args = Array.prototype.slice.call(arguments);

			// remove first item in args - this should be the console command
			var command = args.shift();

			// call the command
			if (!applyCommand(command, args)) {

				// add first item back to args as it wasn't the command
				args.unshift(command);

				// call default command
				applyCommand(defaultCommand, args);

			}

		}

	};

})(true); // true to output to console, false to suppress

Minified version:

(function(d){function c(a,b){if(console[a]&&typeof console[a]==="function"){console[a].apply(this,b);return true}return false}window.log=function(){if(d&&window.console){var a=Array.prototype.slice.call(arguments),b=a.shift();if(!c(b,a)){a.unshift(b);c("log",a)}}}})(true);