Last active
October 27, 2020 19:55
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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