Making the debuggers work

Ok so as a member of a team that use both Vscode and Webstorm and someone who likes to jump between them himself I really wanted a nice easy way to spin up a simple Javascript project that would let me use all the nice new features from ES6 (particularly the imports / modules and other syntactic sugar).

The best way to do this is weith Babel

Initialise npm and a package.json. Using -y will skip all the questions and adding details manually you can go back and modify later.

$ npm init -y

Install the dependencies needed.

$ npm i dotenv @babel/cli @babel/core @babel/node @babel/preset-env nodemon

Create a folder called /src with another folder called /modules in it. In the /src folder create a new file called index.js. Then in the modules folder create another file called maths.js. The final structure should look like something below.

// /src/index.js
import 'dotenv/config';

import { sumAll } from './modules/maths';

const result = sumAll(1, 1);

console.log(result);

// /src/modules/maths.js
let sumAll = (a, b) => { return a + b; }
let subtractAll = (a, b) => { return a - b; }
let divideAll = (a, b) => { return a / b; }
let multiplyAll = (a, b) => { return a * b; }
let findModulus = (a, b) => { return a % b; }

export { sumAll, subtractAll, divideAll, multiplyAll, findModulus };

The tricky part is this bit. If you try to run this project with out babel you will end up with the following error.

c:\dev\Learning\nodejs\babel-es6-debugging\src\index.js:1
import 'dotenv/config';
       ^^^^^^^^^^^^^^^

SyntaxError: Unexpected string
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

SOOOOOOO.. To get this rocking we do this bit o magic. Stick a file called .babelrc in the root folder of the project. Use the following snippet to kick up the presets and make it produce sourMaps

// .babelrc
{
    "presets": [
        "@babel/preset-env"
    ],
    "sourceMaps": true
}

Then in the package.json file add the following to the "scripts" section.

"scripts": {
  "start": "nodemon --exec babel-node src/index.js"
},

Running

$ npm run start

Should produce this. Showing that we have managed to transpile and run the script

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `babel-node src/index.js`
2
[nodemon] clean exit - waiting for changes before restart

BUT WHAT ABOUT DEBUGGING

Yes, don't worry I hadn't forgot, this was the bit that actually caused me some realy head scratching. I could add lots of links to the numerous StackOverflows, blogs, videos and issues I've plodded through in order to get this working but I think I'll just give you the solutions as once it works it works.

Start by adding @babel/register this is a little touch of hot sauce that means you can run the babel files in memory rather than having to do the whole. Build into dist folder thang.

$ npm i --save-dev @babel/register

Then create a babel.config.js file in the root of the project. The file contents needs to look like.

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                // sourceMaps: true,
                targets: {
                    node: 'current',
                },
            },
        ],
    ],
};

VSCode

SO next in vscode go to the configuration / debug section and make the launch.json file look like.

The most interesting parts are the args for the working folder. This needs to pint at the correct file for the debugging. IN this case and index.js. Then the runTimeArgs are needed to transpile the babely babel stuff in-memory rather than with a dist folder.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "args": [
                "${workspaceRoot}/src/index.js"
            ],
            "restart": true,
            "protocol": "inspector",
            "stopOnEntry": false,
            "runtimeArgs": [
                "--nolazy",
                "--require",
                "@babel/register"
            ],
            "sourceMaps": true
        }
    ]
}

From here you should be able to hit F5 with a breakpoint in place and have it hit that.

Webstorm

In webstorm the easiest way to do this is to open the index.js and use a right click Debug File. This will give you a configuration in the config manager.

In there it will end up looking like

In the Node parameters field add

--nolazy --require @babel/register 

Make sure the configuration is saved, close the dialog and hit the little red debug button with a breakpoint added.

Bonus

next few tips are just to finish the boiler plate off

I personally like using commitizen to make sure there is a structure to my commits this allows a number of other things to be done at a later stage. Start by adding the dependencies.

$ npm i --save-dev commitizen cz-conventional-changelog

Next add the following section to the bottom of the package.json

  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

Then add the following to the "script"section of the package.json file:

    "cm": "git add -A && git cz",

Next to stop us committing a load of rubbish that we don't need create a file in the root directory called .gitignore add the following into it.

node_modules/
.idea/
.vscode/
dist/

.env

This will stop the directories being added to source control as we don't want them up there.

Finally you can run

$ npm run cm

This will add all the files to git staging and trigger the commitizen template and ask you a number of questions about the commit.

? Select the type of change that you're committing: (Use arrow keys)
> feat:        A new feature
  fix:         A bug fix
  improvement: An improvement to a current feature
  docs:        Documentation only changes
  style:       Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  refactor:    A code change that neither fixes a bug nor adds a feature
  perf:        A code change that improves performance

This will allow you to enter details about the commit and push if you need to.

Round up

Ok so after alllllllll this you should be able to debug ES6 javascript in Vscode and Webstorm. If thrown together a repo on github with all the files in.
https://github.com/AndrewAllison/babel-es6-debugging andy feedback is much appreciated.

Comments

[jayakumarsharp]

This perfectly saved my time a lot and thanks again for posting all the steps.