Whether you are a beginner JavaScript Developer or an experienced developer working in the biggest organization in the world, you can't deny using console statements to debug your code. Even though nothing is wrong with doing it, you might expose some sensitive data to end users if you forget to remove those before committing the code. In this quick article, let us discuss different ways by which you can prevent log statements from going into the production code. Overriding Methods console This simplest practice removes console statements from the production build, leaving you with a great debugging tool during development. In this method, we check the node environment of the app and override console functions with empty functions if the environment is not . By doing this, you can still use console statements if the app is in development mode. development Paste the following code into the entry file of your application. In most cases, it would be named or . index.js app.js if (process.env.NODE_ENV !== "development") {
    console.log = () => {};
    console.debug = () => {};
    console.info = () => {};
    console.warn = () => {};
} If you are using React or Next, you can paste this in or , respectively. src/index.js pages/_app.js ES-Lint If you are using the ESLint configuration, you can add the rule to ensure that console statements are not committed to the version control. You can even exclude some statements (like or ) if you wish. no-console .warn() .error() However, you can follow this method only if you have integrated ESLint with your app. If you have ESLint, add the following rule in the file. .eslintrc.json {
    "rules": {
        "no-console": "error",
    }
} This rule will throw an error if a console statement is encountered. You can change the behavior by replacing with . Similarly, you can exclude specific methods by adding an option, like this: error warning allow {
    "rules": {
        "no-console": ["error", {
            allow: ["warn", "error"]
        }],
    }
} This will allow and but throw an error in other cases. You can read more about this rule on their . console.warn() console.error() docs Using a Babel Plugin A plugin called removes all console statements from your application. All you need to do is install it and add it to the file. babel-plugin-transform-remove-console .babelrc Install this plugin by NPM or Yarn like this: # NPM
npm i babel-plugin-transform-remove-console

# Yarn
yarn add babel-plugin-transform-remove-console Then open and paste the following. If the file doesn't exist, create a new file with the same name in the root directory. .babelrc {
    "env": {
        "production": {
            "plugins": ["transform-remove-console"]
        }
    }
} You can find more information about this library at the . NPM repository Wrapping Up! The console statements are often not taken seriously. Removing them from production is always a best practice while building apps. But it could cause performance or security issues if you mishandle them. If you found this article helpful, share this within your socials so everyone can follow best practices. I write blogs about web development, open source, and personal experiences. If you want to say hi or need help with frontend or technical writing, catch me on , , and . Twitter Showwcase Peerlist Until then, happy logging! 👨‍💻 Also published . here

Twitter

Hacktoberfest 101 with ReactPlay

How to Add Script Tags in React

Read My Stories

Let's Connect!

Nominated for 2022 - HackerNoon Contributor of the Year - Rest Api

Nominated for 2022 - HackerNoon Contributor of the Year - How To

Nominated for 2022 - HackerNoon Contributor of the Year - Git

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Too Long; Didn't Read

How to Remove Console Statements From Production Build in 3 Easy Ways

How to Remove Console Statements From Production Build in 3 Easy Ways

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

7 Essential Tips for Competitive Programming and DSA

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

124 Stories To Learn About Frontend Development

7 Essential Tips for Competitive Programming and DSA

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

124 Stories To Learn About Frontend Development

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps