Search code examples
visual-studio-codebabel-node

debugging in Visual Studio Code with babel-node


I'm using:

  • VS Code v1.3.1
  • node v6.3.1
  • babel-node v6.11.4
  • Windows 10

I'm unable to get a stop at a breakpoint with the following launch file. The debugger runs and attaches to a port, but when I run the applications with a breakpoint, it doesn't stop at the breakpoint and runs straight through. Anyone that has gotten this to work, please advise.

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

Solution

  • I was able to get it working following these steps:

    Package.json

    Ensure you have a build script with sourcemaps generation.

    "scripts": {
        "build": "babel src -d dist --source-maps"
    }
    

    tasks.json

    Ensure you have the task that lets VS Code to build with the npm script.

    {
        "version": "0.1.0",
        "command": "npm",
        "isShellCommand": true,
        "showOutput": "always",
        "suppressTaskName": true,
        "tasks": [
            {
                "taskName": "build",
                "args": [ "run", "build" ],
                "isBuildCommand": true
            }
        ]
    }
    

    launch.json

    Configure the script to build before launch with a preLaunchTask, start the program from the source entry point, but with the outDir pointing to the dist folder and with sourceMaps enabled.

    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/src/server.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": "build",
        "runtimeExecutable": null,
        "runtimeArgs": [ "--nolazy" ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": true,
        "outDir": "${workspaceRoot}/dist"
    }
    

    Now, each time you press F5, the babel transpilation runs before the Node process starts, but with all sourcemaps synced. With it I was able use breakpoints and all other debugger things.