Is there a way for me to output logging information in my javascript/jquery code during my development so I can see the log messages in chrome/firefox, and then in production I run some tool on my javascript to minify it and also remove these logging statements.
Is there anything out there currently that can do what I want?
I know that logging is different depending on what browser you are using, is there some kind of a logging plugin that works for both chrome and firefox?
Well this depends a lot on your dev environment. I usually declare a global ENV variable in which I store the app state. You could make a new module Log in which you will check if the ENV is development. If this is the case then you will call console.log() or what do you prefer for your logging needs. If the ENV var tells the browser that the app is in production mode than in your Log module you do nothing.
Something like this:
(function (window, env){
'use strict';
var logger = {
log: function(what) {
if (env !== 'production') {
console.log(what);
}
}
}
window.myLogger = logger;
}(window, ENV));
And when you will call:
myLogger.log('Hello, I am a logger');
The message will only be logged in development mode.
Hope this helped, let me know.
Cheers!
One simple suggestion, you could overwrite the console.log() method as an empty function for production. This answer here goes over it in more detail.
This is what I do. You have to define a variable that indicates you are in development, and not in production. Output that to your HTML with your pre processor language (PHP.., etc). Some old IE browsers don't have the console object.
You have options when figuring out how to define __DEV__ You can check the host-name with JavaScript and define __DEV__ if it doesn't equal your production domain name, or you could output the JavaScript code on the server side after checking some environment variable.
if(typeof window.console === 'undefined') {
window.console = {
log: function() {}
// etc, define all the methods for which you will call
// while developing.. warn, debug..
}
}
var CONSOLE = window.console.log; // get a reference to the function
window.console.log = function() {
if(typeof window.__DEV__ != 'undefined') {
return CONSOLE.apply(this, arguments);
}
}
This is more efficient then writing something to remove all of the console.* calls in your code. You don't want to have to get used to a new calling construct such as logger.log because that would just waste time. This way you can still use your normal logging conventions, but it won't output in your production environment.
If __DEV__ is not found, then it won't log. By default it won't log. You need to define __DEV__ at the top of your HTML document.
