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)
There is plugin available to remove a
console.log
statements from project source called babel-plugin-transform-remove-consoleUsage:
add plugin name in
.babelrc
file.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
How do I achieve this in the modern cra-generated applications, where
.babelrc
file is not exposed and requires me toeject
from the react app?Thanks for your suggestions, I will try this one also
sure ðð»
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.
Thanks! - A+ for the
undercover
dog.Off-topic: The pictures are so CUTE!
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:
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
totrue
to log everything, or leave it false and setAppDebugThreshold
to ainteger
to only log debug messages above that "level."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
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.
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 have a strict eslint + husky policy for console logs on the projects I run because I always forget about them ð
would you like to share it? :)