Using "debugger", 👍 or 👎 ?

[lfilmeyer]

Hey all,

I wanted to share something I found useful for debugging as well as open up a conversation about how people are debugging their code.

Issue: When inserting a debugger statement in my JS code, I received an Unexpected 'debugger' statement no-debugger error from eslint.

Solution: I found this post, describing how to disable the eslint rule on a per line or per file basis:

debugger // eslint-disable-line

/* eslint-disable no-debugger */

Open Question:

• Is using debugger becoming less standard by JS developers? This post linking to this page seems to indicate it has fallen out of favor, but the post was also heavily downvoted. If so, what are the other methods of debugging (besides console.log) developers are using?

[ambielecki]

I've just been leaning on console.log and the gigantic errors Vue likes to throw when I do something silly. I usually rely on setting breakpoints in the console, but debugger would definitely make sense for code that's running through webpack (the legacy code I work on isn't that fancy sadly).

[susanBuck]

Is using debugger becoming less standard by JS developers?

I can't say I've heard one way or another about debugger "falling out of favor". I can't think of a reason not to continue to use it - the key thing is just making sure they don't make it to production code.

To facilitate this, I recommend configuring es-lint so that it does not throw an error when it encounters debug statements in dev, but does throw an error when you build for production.

To do this, create a new file, .eslintrc.js in the root of your project with this code (note the rules section that dynamically sets the value based on the environment)

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: [
        'plugin:vue/essential',
        'eslint:recommended'
    ],
    parserOptions: {
        parser: 'babel-eslint',
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    },
}

This config file will supersede the eslintConfig rules in package.json so you can remove the eslintConfig section from that file.

With this new config in place, if your code has any debugger or console statements, it will serve fine locally, but will fail when you build for production. This is good as it'll remind you to go in and remove any debugger/console statements you might have been using during development.