vscode debug ES6 application

Question

I have VSCode 0.5.0. I set the compilerOptions flag to \"ES6\" and the editor started recognizing my ES6 code as correct. I have babel installed. My Mocha tests use the bab

Answer 1

You can try babel-register (you'll also need other companion babel modules as req'd):

npm install --save-dev babel-register

with a launch.json configuration along these lines:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/index.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy",
                "--require",
                "babel-register"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "sourceMaps": true,
            "outFiles": [
            ]
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outFiles": [],
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outFiles": []
        }
    ]
}

This is loosely based on vscode-debug-nodejs-es6 with the addition of the babel-register runtime argument.

Answer 2

babel-node & vs code attach

1. config a npm script in package.json:

   "scripts": {
       "debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
   }
   

2. add vs code debug configuration:

   {
       "name": "Attach",
       "type": "node",
       "protocol": "legacy",
       "request": "attach",
       "port": 5858
   }
   

Answer 3

Assuming you have babel-cli installed as a local module in your project the following should work.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/babel-cli/bin/babel-node.js",
            "stopOnEntry": false,
            "args": [
                "${workspaceRoot}/server.js"
            ],
...

Answer 4

This is my configuration and it works great! I am using the VSCode debugging, mocha 6.1.4, node: v8.16.0, and Babel version 6.

Make sure to load babel-register and babel-polyfill in runtimeArgs, or else you will get regeneratorRuntime is not defined!

{
    "type": "node",
    "request": "launch",
    "name": "Mocha test debug",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "protocol": "inspector",
    "stopOnEntry": false,
    "runtimeArgs": [
        "--nolazy",
        "--require",
        "babel-register",
        "--require",
        "babel-polyfill",
        "tests/*.js"
    ],
    "sourceMaps": true
}

Answer 5

When transpiling with bael-node, you should add "--inspect-brk" in the script, so that the script may break when a breakpoint is hit.

Ex:

"start": "babel-node --inspect-brk app.js --presets es2015,stage-2"

Now when you run using npm run start, debugger will be launched and you can see following in your console:

Debugger listening on ws://127.0.0.1:9229/cf72a33c-ab38-4798-be5e-8b8df072f724 For help see https://nodejs.org/en/docs/inspector

That shows debugging process has started and we can attach to it on port# 9229.

Now, you need to add the following debugger config for vs-code to attach to this process: (in launch.json)

{ "version": "0.2.0", "configurations": [ { "name": "Attach to Process", "type": "node", "request": "attach", "port": 9229 } ] }

After saving, click the "start debugging" button, to attach to process initiated by node earlier. You may read more about this here

Answer 6

Here's how to get VSCode debugger to work with Babel 6+:

First install dependencies locally:

$ npm install babel-cli --save
$ npm install babel-preset-es2015 --save

Then run babel-node:

$ node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect

By default, the debugger will listen on port 5858, so make sure the port matches in launch.json for Attach configuration:

{
  "name": "Attach",
  "type": "node",
  "request": "attach",
  "port": 5858
}

Now attach the debugger in VSCode:

• make sure debug configuration is set to Attach and not Launch
• run with F5

Nodemon

Although not required, if you also want to use nodemon to pickup code changes without restarting the server, you can do this:

Make sure nodemon is installed:

$ npm install nodemon --save-dev

Run the server

$ node_modules/.bin/nodemon node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect

Finally, attach the debugger as shown above.