Colorful Console Logger in JavaScript
02 Oct 2014Logging that looks good and helps you debug
faster.
Inspiration
debug by TJHolowaychuk.
Usage
var log = debug('setup');
$(document).on('ready', function () {
log('hey, DOM is ready');
parseJSON();
log('cool stuff dude');
});
var parseLog = debug('parseJSON', 'info'),
parseError = debug('parseJSON', 'error');
function parseJSON() {
var json = '{ lol: no }';
parseLog('JSON parsing for', json);
try {
var obj = JSON.parse(json);
} catch (e) {
parseError('Ughh, invalid', json);
}
}
Output
In browser console:
Show me the code!
function debug(context, type) {
var typeBg = {
log: 'grey',
info: 'teal',
error: 'red'
};
var max = debug.maxContextLength || 0;
debug.maxContextLength =
(context.length > max) ?
context.length :
max;
return function() {
var args = [].slice.call(arguments),
var padding = new Array(
debug.maxContextLength + 1 -
context.length
).join(' ')
var colored = [
padding + '%c ' +
context + ' ',
'color:white; background:' +
(typeBg[type || 'log'] || typeBg.log)
];
console.log.apply(console,
colored.concat(args));
};
}