javascript - How to make console.log configurable -


in web-app( heavy on client side, light on server side), while in development, need lot of debugging, console.log helpful, ideally in production, there must not debug message shown, planning add below code:

window.production = false;  // set true when in production mode.  if(window.production){         window.log = function(){}; }else{     window.log = function(){         console.log.apply(console, arguments);     }; }     //then replace console.log(a, b, c, ...) window.log(a, b, c, ...) in code. 

is way make debugging configurable, or must make grunt removes console.log lines production?

so if end goal not show debug messages in production have huge amount of options choose from! should decide if following important you:

  1. being able perform other work outside of log statement should not run in production.
  2. minimizing file size in production , not shipping logging code.
  3. multiple log levels, or different logging groups.
  4. the ability turn these logging levels or groups on/off in production.
  5. minimizing amount have type each log statement.

at basic level calling

if (window.console && window.console.log) {     window.log = console.log.bind(console); // function devnull() { }; } else {     window.log = function() { }; }  log('this log!'); 

will enough allow turn logging on/off. fulfill goal (5) in list above , works quite well.

an alternate solution works minifiers uglify can remove dead code surround logging statements (you may not want pollute global namespace however):

window.loglevels = {     off:        0x00000000,     error:      0x00000001,     warning:    0x00000002,     timing:     0x00000004,     data:       0x00000008,     status:     0x00000010,     ...     verbose:    0x04000000, };  window.loglevel = loglevels.error | loglevels.warning;  window.shouldlog = function(mask) {     return ((window.loglevel & mask) === mask); };  if (shouldlog(loglevels.error)) { log('this error!'); } 

this satisfy condition (1), (3), , (4) , sets solve (2) @ cost of (5).

coupled pre-defined debug constant (or similar), in build step can replace log statements regex:

productioncode = debugcode.replace(/shouldlog\(((?!loglevels\.error|loglevels\.warning)[^)]*)\)/g, 'debug'); 

this remove non-error , non-warning level logging in code , satisfy (2). don't want people peeking @ logs right.. plus better perf! :)

bonus if want funky, can use following (at least in chrome) stack trace each logging statement in console. no more 'why did log hit'!

window.log = function () {     console.groupcollapsed.apply(console, arguments);     var stack = new error().stack.split('\n');     for(var = 2; < stack.length; ++)     {         // trim , remove 'at ';         console.log('%c' + stack[i].trim().substring(3), 'padding-left: 10px; color: #777');     }     console.groupend(); }; 

Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -