DEV Community

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

Kushal sharma on June 07, 2020

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. ...
Read full post
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 •

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
 
sm0ke profile image
Sm0ke •

Thanks! - A+ for the undercover dog.

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
  })
}
Enter fullscreen mode Exit fullscreen mode
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
 
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
 
spotnick profile image
spotnick •

would you like to share it? :)

Collapse
 
devmaster7 profile image
dev-master-7 •

We can also use the Flag devMode to disable console log in production full article :- stacksjar.com/post/disable-console...

Collapse
 
tadeubdev profile image
Tadeu Barbosa •

Thanks for that! Many times I found an log message on my console on production 😅😅

Collapse
 
ahmad-ali14 profile image
Ahmad Ali •

wow .. saved me ages.

Collapse
 
devmaster7 profile image
dev-master-7 •

In Angular You get the Built in Feature to Detect the application environment so you can Disable console log in production check this: stacksjar.com/post/disable-console...