How to debug ES6 NodeJS with VSCode

🚧 UPDATE 2021 version 👇

🐛 How to debug TypeScript and Jest via VSCode

🚧 OUTDATE 2016 version 👇

love me love my bug

No more Unexpected token import, wrong line breakpoint, unreadable transpiled.

TLDR : https://github.com/katopz/vscode-debug-nodejs-es6

Problems

SyntaxError: Unexpected token import

$ node --debug-brk=14397 --nolazy server.js 
Debugger listening on [::]:14397
/Users/katopz/git/vscode-debug-nodejs-es6/server.js:1
(function (exports, require, module, __filename, __dirname) { import fetch from 'isomorphic-fetch';
                                                              ^^^^^^
SyntaxError: Unexpected token import
...

Solutions

Use babel-register

Pro tips : You also can use babel-node and else but it will need more config for VSCode so I won’t confuse you with that yet just node atm.

$ npm i -D babel-register

with babel preset

$ npm i -D babel-preset-es2015

and config babel in package.json

{
  // ...
  // something else
  // ...
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-register": "^6.18.0"
  },
  "babel": {
    "presets": [
      "es2015"
    ],
    "sourceMaps": true,
    "retainLines": true
  }
}

or .babelrc

{
  "presets": [
    "es2015"
  ],
  "sourceMaps": true,
  "retainLines": true
}

Note : This example use package.json to keep it at one place.

Bonus

By add this to babel config (already added above)

"sourceMaps": true,
"retainLines": true

And also in .vscode/launch.json

"sourceMaps": true,

Instead of this

kinda hate this!

You’ll get this when place some breakpoint via VSCode.

Nice eh?

Best practise

For production, you should use transpiled version as noted here

Note that this is not meant for production use. It’s considered bad practice to deploy code that gets compiled this way. It is far better to compile ahead of time before deploying. However this works quite well for build scripts or other things that you run locally.

Now we all happy debugging! Yeah! :D

FYI (ref)

Click DigitalOcean and get yourself free $10 credit, It’s perfect developer cloud!