loading...
Cover image for Hide ๐Ÿ™ˆ all console logs in production with just 3 lines of code

Hide ๐Ÿ™ˆ all console logs in production with just 3 lines of code

sharmakushal profile image Kushal sharma ใƒป1 min read

We basically use the console.log() in our JS application to check wether our code is working properly or to replicate the bug or issue in the app. without the logs it is very time consuming and difficult to find the problem.

But these logs are meant for the developer only and you don't want to show these to the end users so we have to remove the console statement or to comment that.

Alt Text

Before i know this stuff i was commenting all the console.logs in my application and deploying the app on the live server. so the console's are not visible to the users

How I hide all the consoles

if (env === 'production') {
    console.log = function () {};
}

Here we are overriding the default console.log function with the new one which was returing nothing. Here we have added the environment check to override console function only if the environment is production. if you don't have environment variable then you can jsut simply do.

    console.log = function () {};

I am using this on my live app to hides the console. If someone know any other method or any disadvantage of using this one. plz leave your comment.

To keep up with everything Iโ€™m doing, follow me on Twitter. I am posting these hacks and tricks there also ==> Kushal Sharma

Posted on by:

sharmakushal profile

Kushal sharma

@sharmakushal

I'm Kushal Sharma from India, I am a Frontend Developer and I like the Javascript and react

Discussion

markdown guide
 

There is plugin available to remove a console.log statements from project source called babel-plugin-transform-remove-console

Usage:
add plugin name in .babelrc file.

{
  "plugins": ["transform-remove-console"]
}
 

This is a better option than assigning an empty function to console.log. The empty function removes the option to log anything in your production environment, even for debugging purposes.

If you are using Terser in your build, they provide an option to remove log statements (drop_console: true) from your minified code

 

Thanks for your suggestions, I will try this one also

 
 

Off-topic: The pictures are so CUTE!

 

That is one way to do it, and it certainly is simple. However, you're still shipping the code that makes those calls in the first place.

To address that, one could take advantage of the bundling process to strip out all those calls in the first place. For example, it looks like UglifyJS supports conditional compiling that will help with that.

 

I wrap my console.log function in my own function.
Hopefully this helps someone.
Something like:

function myLog(level, input) {
if(!AppDebug && level < AppDebugThreshold) return;
console.log({level:level, log:input});
}

So in your overall JavaScript window / class / enclosure just set the variable AppDebug to true to log everything, or leave it false and set AppDebugThreshold to a integer to only log debug messages above that "level."

 

As said in comments, I'd go with transformers in build time. But in case one is going with the article's approach I'd suggest something like:

if (env === 'production') {
  const noop = () => {}
  ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
    'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
    'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
    'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn',
  ].forEach((method) => {
    window.console[method] = noop
  })
}
 

Thanks! - A+ for the undercover dog.

 

Use turbo log an extension in VSCode that'll remove all the console.logs you were working on. I see no reason to get more lost in your code than that

 

Off topic: I read somewhere that there are so many other functions in the console object. Any way to customize their outputs for Node in terminal?
I know the different outputs look different in the browser, though. Just wondering if that'd be possible in Node

 

I've recently created a small library that let you hide all your console statements. I also added some configuration to show the statements for debugging adding a custom key to the local storage. And you can set some initial styled messages to be shown on the console of your site. Just check it out:

github.com/eaboy/clean-console

Any feedback is very welcome.

 

Thanks for that! Many times I found an log message on my console on production ๐Ÿ˜…๐Ÿ˜…

 

I have a strict eslint + husky policy for console logs on the projects I run because I always forget about them ๐Ÿ˜