Kushal sharma

Posted on Jun 7, 2020 • Edited on Sep 17, 2023

Hide 🙈 all console logs in production with just 3 lines of code

#javascript #webdev #beginners #react

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.

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.

If you are on Twitter, can you follow me there as well? I post these kinds of stuff there as well. => Follow @kushal_js

Top comments (19)

Sagar • Jun 7 '20

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"]
}

Varun A P ⚡️ • Jun 7 '20

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

Wise Introvert • Nov 2 '20

How do I achieve this in the modern cra-generated applications, where .babelrc file is not exposed and requires me to eject from the react app?

Kushal sharma • Jun 7 '20

Thanks for your suggestions, I will try this one also

Sagar • Jun 7 '20

sure 👍🏻

Mikael Gramont • Jun 7 '20

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.

Sm0ke • Jun 7 '20

Thanks! - A+ for the undercover dog.

Muhimen • Jun 7 '20

Off-topic: The pictures are so CUTE!

Mateus V. Vellar • Jun 8 '20

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
  })
}

seifer7 • Jun 9 '20 • Edited

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."

Roger K. • Jun 8 '20 • Edited

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

Eduardo Aboy • Jul 13 '20

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.

Utkarsh Singh • Jun 28 '20

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