adeolaawoyemi · October 1, 2018 08:02 · Mar 5, 2014 · Mar 5, 2014 · Mar 5, 2014 · Mar 5, 2014
diff --git a/devmode-console-helper.js b/devmode-console-helper.js
@@ -1,19 +1,23 @@
 /*
 
-	A simple helper to log different message to the
-	javascript console. Different methods print different
-	color text to the console, making reading a bit
-	easier and more helpful for heavy debugging.
+	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	
@@ -22,14 +26,12 @@
 	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()
 

diff --git a/devmode-console-helper.js b/devmode-console-helper.js
@@ -6,10 +6,9 @@
 	easier and more helpful for heavy debugging.
 	
 	To activate these tools:
-	DEV_MODE = TRUE
-	
-	
+	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
@@ -31,18 +30,8 @@
 	dev.profileEnd()	- turns off the js profiler
 	
 	
-	// To see a sample in console
+	// To see example usage
 	dev.sample()
-	
-	
-	Example usages:
-	
-	dev.info('my message')					- prints "my message"
-	
-	dev.info(my.object)						- prints "data: Object { ..your obj data.. }"
-	
-	dev.info('my message', my.object)		- prints "my message, Object { ..your obj data.. }" to console
-	
 
 */
 
@@ -263,6 +252,4 @@ window.dev = {
 
     enabled: function() { return (window.console && DEV_MODE) ? true : false; }
 
-};
-
-
+};
diff --git a/devmode-console-helper.js b/devmode-console-helper.js
@@ -1,12 +1,9 @@
 /*
 
-	I built this quick console helper to give me an easier
-	way to display different types of messages to the console
-	while I'm developing. I chose not to use the default console
-	method styles, because often times I don't need the extra data 
-	that comes along with them. This also provides a good way to 
-	easily turn off console statements that are used within the
-	"dev" namespace. Usage:
+	A simple helper to log different message to the
+	javascript console. Different methods print different
+	color text to the console, making reading a bit
+	easier and more helpful for heavy debugging.
 	
 	To activate these tools:
 	DEV_MODE = TRUE
@@ -35,13 +32,23 @@
 	
 	
 	// To see a sample in console
-	dev.test()
+	dev.sample()
+	
+	
+	Example usages:
+	
+	dev.info('my message')					- prints "my message"
+	
+	dev.info(my.object)						- prints "data: Object { ..your obj data.. }"
+	
+	dev.info('my message', my.object)		- prints "my message, Object { ..your obj data.. }" to console
+	
 
 */
 
 
 
-DEV_MODE = true; // Must be 'true' to use tools
+DEV_MODE = true;
 
 
 
@@ -225,7 +232,9 @@ window.dev = {
 
 	},
 
-	run: function() {
+	sample: function() {
+
+		// Run dev.sample() to print examples to console 
 
 		var sampleObj = { id: 234567, msg: 'testing message', myobj: { id: '4567', msg: 'obj testing message' } };
 

diff --git a/devmode-console-helper.js b/devmode-console-helper.js
@@ -0,0 +1,259 @@
+/*
+
+	I built this quick console helper to give me an easier
+	way to display different types of messages to the console
+	while I'm developing. I chose not to use the default console
+	method styles, because often times I don't need the extra data 
+	that comes along with them. This also provides a good way to 
+	easily turn off console statements that are used within the
+	"dev" namespace. Usage:
+	
+	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 a sample in console
+	dev.test()
+
+*/
+
+
+
+DEV_MODE = true; // Must be 'true' to use tools
+
+
+
+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');
+
+		}
+
+	},
+
+	run: function() {
+
+		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; }
+
+};
+
+