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 babel compilers and my tests pass. My app runs from the command line with no problems when I launch it with babel-node . When I debug the app from within VSCode, it starts up without the ES6 support, and the app fails for ES6 syntax issues. Are there debug settings that I missed turning on?

score 21 · Answer 1 · edited Sep 22 '18 at 16:13

21

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.

edited Sep 22 '18 at 16:13

Thomas Crowley

988
2
8
23

answered Feb 03 '16 at 14:45

Johnny Oshika

54,741
40
181
275

6

How do you keep retainLines:true (babel) or sourcemaps: true (launch.json)? When I use babel and attach to the process, the breakpoints break but they are not on the correct line numbers which makes debugging pretty tricky. – VtoCorleone Mar 18 '16 at 13:43
@VtoCorleone .babelRc file is where you put them options – Martin Dawson Jan 15 '17 at 12:50
When nodemon picks up changes and restarts the server, it kicks the vscode attached debugger off and you need to manually reconnect. Any thoughts? – dmorrow Mar 30 '17 at 14:35

score 8 · Answer 2 · edited Jun 26 '16 at 15:56

8

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"
            ],
...

edited Jun 26 '16 at 15:56

G3z

663
6
19

answered Jan 20 '16 at 04:01

Craig McKenna

268
3
10

4

This runs the application, but it doesn't attach the debugger (i.e. breakpoints aren't hit). – Johnny Oshika Feb 03 '16 at 14:22
1

@Johnny Oshika You're correct. It does pause on acceptations though. When I get a minute I'll try your solution. Looks awesome! – Craig McKenna Feb 03 '16 at 16:17
1

this does load the debugger in `Visual Studio Code Version 0.10.10 Commit 5b5f4db87c10345b9d5c8d0bed745bcad4533135 Date 2016-03-07T10:38:23.764Z Shell 0.35.6 Renderer 45.0.2454.85 Node 4.1.1`. VSCode automatically adds the `--debug-brk=` args when starting with `F5` – philk Apr 21 '16 at 08:22

score 8 · Answer 3 · answered Dec 01 '16 at 11:02

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.

Andre Weinand · Accepted Answer · 2015-08-20T08:35:42.577

By default VSCode launches node just with a --debug-brk option. This is not enough to enable ES6 support. If you can find out what options 'babel-node' passes to node, you could specify the same options in the VSCode launch config (through the runtimeArgs attribute). But this does not solve the issue that babel-node transpiles your ES6 code before running it.

Alternatively you could try to set the 'runtimeExecutable' in your launch config to 'babel-node'. This approach works with other node wrappers, but I haven't verified that is works with babel-node.

A third option (which should work) is to use the attach mode of VSCode: for this launch babel-node from the command line with the '--debug' option. It should print a port number. Then create an 'attach' launch config in VSCode with that port.

score 6 · Answer 5 · answered Apr 13 '17 at 14:13

babel + nodemon

In the VS Code Terminal, launch your server with the --inspect argument:

nodemon --inspect --watch src --exec node_modules/.bin/babel-node --presets react,es2015 src/server.js

Among the other lines, one will show the port on which the debugger is listening:

...
Debugger listening on port 9229
...

Create the following debug configuration:

{
    "type": "node",
    "request": "attach",
    "name": "Attach to Port",
    "address": "localhost",
    "port": 9229
}

Launch the debugger, and if everything went fine you will see in the output Terminal:

Debugger attached.

From now on, you can debug your application.

score 1 · Answer 6 · answered Feb 21 '17 at 18:14

There are two ways of doing it:

First Option using npm command prompt

In package.json file create build command that will execute babel

{
  "scripts": {
    "build": "babel src --out-dir dist --watch --source-maps"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-es2015-node6": "^0.4.0",
    "eslint": "^3.16.0"
  }
}

In launch.json Enter following code:

{
  "configurations": [
    {
      "name": "Launch",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/src/index.js",
      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceRoot}",
      "runtimeArgs": [
        "--nolazy"
      ],
      "sourceMaps": true,
      "outFiles": [
        "${workspaceRoot}/dist/**/*.js"
      ]
    }
  ]
}

Open your cmd window, navigate to your package.json file and execute:

npm run build

Open your VS Code and run your code. It will run and it will stop at all your breakpoints. The reason it works because source maps are generated and VS knows how to map them to your code.

Second option using VS Code task:

In VS Code add following task (Ctrl + Shift + P) and type 'Tasks: Configure Task Runner':

Add following code to tasks.json file

{
  "version": "0.1.0",
  "command": "${workspaceRoot}/node_modules/.bin/babel",
  "isShellCommand": true,
  "tasks": [
    {
      "taskName": "watch",
      "args": [
        "src",
        "--out-dir",
        "dist",
        "--watch",
        "--source-maps"
      ],
      "suppressTaskName": true,
      "isBuildCommand": true
    }
  ]
}

Now execute task, but pressing Ctrl + Shift + B (build command) and now you can run and debug your code. VS Code doing the same as what npm is doing in step one.

You will also need to configure babel in .babelrc (located in the root of the project) file like this:

{
  "presets": [
    "es2015-node6"
  ]
}

and jsconfig.json (located in the root of the project)

{
  "compilerOptions": {
    "target": "ES6"
  },
  "include": [
    "src/**/*"
  ]
}

score 1 · Answer 7 · answered Jun 18 '19 at 18:24

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
}

score 0 · Answer 8 · edited Jun 13 '17 at 11:49

0

babel-node & vs code attach

config a npm script in package.json:

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

add vs code debug configuration:

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

edited Jun 13 '17 at 11:49

Eric Aya

69,473
35
181
253

answered Jun 13 '17 at 11:40

承彬熊

1
1

`--debug-brk` is deprecated now, use `--inspect-brk` instead. – Blaze Oct 10 '17 at 13:08

score 0 · Answer 9 · answered Oct 10 '17 at 13:07

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

`--inspect` also works if you do not want to break at the start of the script — Donghua Liu, May 07 '19 at 07:28

vscode debug ES6 application

9 Answers9

babel + nodemon

Linked