Skip to content

Instantly share code, notes, and snippets.

@onestepcreative
Last active October 27, 2020 19:55
Show Gist options
  • Save onestepcreative/9361281 to your computer and use it in GitHub Desktop.
Save onestepcreative/9361281 to your computer and use it in GitHub Desktop.
Color code your console log messages with a shorter syntax to console.log and easily turn off console logging by setting a DEV_MODE variable to false.
/*
Author: Josh McDonald
Twitter: @onestepcreative
Website: joshmcdonald.net
A simple helper to log color coded messages to the
javascript console, using a shorter syntax to console.log
You can leave your dev.log() statements scattered throughout
your code, and easily turn off logging for production
by setting the global DEV_MODE variable to false;
To activate these tools:
DEV_MODE = true;
Simple helper methods:
dev.mode() - check to see if tools are available
dev.check() - quickly check the state of a boolean value
Available console methods:
dev.log() - your default console.log statement
dev.info() - logs bright blue text
dev.warn() - logs bright orange text
dev.error() - logs bright red text
dev.start() - logs bright green text
dev.end() - logs bright red text
Just for shorter syntax:
dev.group() - nested block of console statements
dev.groupEnd() - closes most recently opened group
dev.profile() - turns on the js profiler
dev.profileEnd() - turns off the js profiler
// To see example usage
dev.sample()
*/
DEV_MODE = true;
window.dev = {
log: function(msg, obj) {
msg = (arguments.length === 2) ? msg + ': ' : msg;
obj = (obj) ? obj : '';
if(dev.enabled()) {
if(typeof msg !== 'string') {
console.log('%c ' + 'data: ', 'font-family:"Helvetica Neue", Helevetica; font-size:13px;', msg);
} else {
console.log('%c ' + msg, 'font-family:"Helvetica Neue", Helevetica; font-size:13px;', obj);
}
}
},
info: function(msg, obj) {
obj = (obj) ? obj : '';
if(dev.enabled()) {
if(typeof msg !== 'string') {
console.log('%c ' + 'data: ', 'color: #00F; font-family:"Helvetica Neue", Helevetica; font-size:13px;', msg);
} else {
console.log('%c ' + msg, 'color: #00F; font-family:"Helvetica Neue", Helevetica; font-size:13px;', obj);
}
}
},
warn: function(msg, obj) {
obj = (obj) ? obj : '';
if(dev.enabled()) {
if(typeof msg !== 'string') {
console.log('%c ' + 'data: ', 'color: #FFA500; font-family:"Helvetica Neue", Helevetica; font-size:13px;', msg);
} else {
console.log('%c ' + msg, 'color: #FFA500; font-family:"Helvetica Neue", Helevetica; font-size:13px;', obj);
}
}
},
error: function(msg, obj) {
obj = (obj) ? obj : '';
if(dev.enabled()) {
if(typeof msg !== 'string') {
console.log('%c ' + 'data: ', 'color: Orangered; font-family:"Helvetica Neue", Helevetica; font-size:13px;', msg);
} else {
console.log('%c ' + msg, 'color: Orangered; font-family:"Helvetica Neue", Helevetica; font-size:13px;', obj);
}
}
},
start: function(msg, obj) {
obj = (obj) ? obj : '';
if(dev.enabled()) {
if(typeof msg !== 'string') {
console.log('%c ' + 'data start: ', 'color: #0F0; font-family:"Helvetica Neue", Helevetica; font-size:13px; font-weight:bold;', msg);
} else {
console.log('%c ' + msg, 'color: #0F0; font-family:"Helvetica Neue", Helevetica; font-size:13px; font-weight:bold;', obj);
}
}
},
end: function(msg, obj) {
obj = (obj) ? obj : '';
if(dev.enabled()) {
if(typeof msg !== 'string') {
console.log('%c ' + 'data end: ', 'color: #F00; font-family:"Helvetica Neue", Helevetica; font-size:13px; font-weight:bold;', msg);
} else {
console.log('%c ' + msg, 'color: #F00; font-family:"Helvetica Neue", Helevetica; font-size:13px; font-weight:bold;', obj);
}
}
},
group: function(title) {
obj = (obj) ? obj : '';
if(dev.enabled()) console.group(title);
},
groupEnd: function() {
obj = (obj) ? obj : '';
if(dev.enabled()) console.groupEnd();
},
profile: function(title) {
if(dev.enabled()) {
(title) ? console.profile(title) : console.profile();
}
},
profileEnd: function(title) {
if(dev.enabled()) {
(title) ? console.profileEnd('End Profile: ' + title) : console.profileEnd('End Profile');
}
},
check: function(state, msg) {
if(dev.enabled()) console.log('%c ' + state + ':', 'color: Fuchsia; font-weight:bold', msg);
},
mode: function(msg) {
if(dev.enabled()) {
console.log('%c DEV MODE IS ON', 'color: #0F0; font-weight:bold');
} else {
console.log('%c DEV MODE IS OFF', 'color: #F00; font-weight:bold');
}
},
sample: function() {
// Run dev.sample() to print examples to console
var sampleObj = { id: 234567, msg: 'testing message', myobj: { id: '4567', msg: 'obj testing message' } };
dev.log('regular console message');
dev.info('this is an info statement');
dev.warn('this is a warning statement');
dev.error('this is an error statement');
dev.start('starting something');
dev.end('ending something');
dev.log('regular with data', sampleObj);
dev.info('info with data', sampleObj);
dev.warn('warn with data', sampleObj);
dev.error('error with data', sampleObj);
dev.start('start with data', sampleObj);
dev.end('end with data', sampleObj);
dev.log(sampleObj);
dev.info(sampleObj);
dev.warn(sampleObj);
dev.error(sampleObj);
dev.start(sampleObj);
dev.end(sampleObj);
},
enabled: function() { return (window.console && DEV_MODE) ? true : false; }
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment