DEV Community

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

Discussion (16)

pic
Editor guide
Collapse
sagar profile image
Sagar

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"]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
apvarun profile image
Varun A P āš”ļø

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

Collapse
wiseintrovert_31 profile image
Wise Introvert

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?

Collapse
sharmakushal profile image
Kushal sharma Author

Thanks for your suggestions, I will try this one also

Collapse
sagar profile image
Sagar

sure šŸ‘šŸ»

Collapse
mikaelgramont profile image
Mikael Gramont

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.

Collapse
muhimen123 profile image
Muhimen

Off-topic: The pictures are so CUTE!

Collapse
mateusvellar profile image
Mateus V. Vellar

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
  })
}
Collapse
seifer7 profile image
seifer7 • 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."

Collapse
sm0ke profile image
Sm0ke

Thanks! - A+ for the undercover dog.

Collapse
misterhtmlcss profile image
Roger K. • 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

Collapse
eaboy profile image
Eduardo Aboy

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.

Collapse
utkarshsingh99 profile image
Utkarsh Singh

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

Collapse
gramsco profile image
Antonin

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

Collapse
tadeubarbosa profile image
Tadeu Barbosa

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

Collapse
ahmad_ali profile image
Ahmad Ali

wow .. saved me ages.