Controling console.log client side

Question

I'm working on a site that takes fairly long to build/deploy. I sometimes need information that is only available server-side for debugging. Using console.log is annoying since adding a console.log in the code and building takes too long. But I also don't want the site to always log that information to the console.

My plan was to have a wrapper function for console.log, that checks if there is eg dev_config set in localStorage.

For example to activate certain verbose levels that then show respective logs, or log only in certain sections.

Would this have a significant impact on performance of the site?

For instance something like this:

const devLog = (message) => {
  devConfig = JSON.parse(localStorage.getItem('dev_config'))
  
  if (devConfig != null) {
    // ...
    // other checks (set devMode to true)
    // ...
      
    if (devMode === true) {
      const now = new Date()
      const hours = now.getHours()
      const min = (now.getMinutes() + '').padStart(2, '0')
      const sec = (now.getSeconds() + '').padStart(2, '0')
      console.log(`[${hours}:${min}:${sec}] `, message)
    }
  }
}

PS: I am aware of the built-in browser dev tools and I am using them in most cases. But since the information in my current problem is server side, I don't think I can get with the dev tools what I need.

Answer 1

You could overwrite console.log but that could annoy you later on. I prefer to have my own logger like your devLog function. It's more explicit.

As @Barmar suggested in the comments you could instead check the localStorage on load instead of on every call. I have something similar to the below in a few projects of mine:

{
    let devConfig = JSON.parse(localStorage.getItem('dev_config'));

    devLog = (...args) => {
        if (devConfig) {
            const time = new Date().toLocaleTimeString()
            console.log(`[${time}] `, ...args)
        }
    };
    
    devLog.activate = () => {
        devConfig = true;
        localStorage.setItem('dev_config', true)
    }
    
    devLog.deactivate = () => {
        devConfig = false;
        localStorage.setItem('dev_config', false)
    }
    
    devLog.toggle = () => {
        if ( devConfig ) {
            devLog.deactivate()
        } else {
            devLog.activate()
        }
    }
}

Since when you're reading dev_config from the localStorage for the first time you'll get null it will start off deactivated - which seems like a good default to me.