Debug ExpressJS server side code using Visual Studio Code

Question

i have made a simple CRUD app using

• express: 4.13.4
• gulp: 3.9.1
• mongodb :v3.0.6
• reactjs : 15.0.2.
• node : 4.0.0

For server side code i hear it is possible to debug via Visual Studio Code (v1.1.1.).

From git bash i start the app via gulp serve.But i am at a loss to find out how to Start debugging!

A snippet of my gulp task.

gulp.task('serve',['bundle','start-server'],function(){

    browserSync.init({
        proxy:'http://localhost:3000',
        port:9001
    });

});

When we click the debug button on VS Code to launch the debug interface, we r presented with a launch.json , where we have two configuration options.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    },
    {
        "name": "Attach",
        "type": "node",
        "request": "attach",
        "port": 3000,
        "address": "localhost",
        "restart": false,
        "sourceMaps": false,
        "outDir": null,
        "localRoot": "${workspaceRoot}",
        "remoteRoot": null
    }
]

}

i am guessing these are launch and attach configs. But how do we actually lauch gulp via debug.

i have seen people launch grunt process by modifying the "program" key as "program": "/usr/local/bin/grunt". But it seems i am not able to do that for gulp

Even when i have launched my app via git bash and try to 'attach' the debugger as mentioned here , vs code just shows an error message saying 'Cancelled' !

TLDR;

• how do we kick start gulp (or) grunt (or) start the server when we launch debugging in VS code?
• is it possible to launch the app externally via cmd or bash and still be able to debug server side code using the debugger? if so , what changes are needed in launch.json?

Solution

Allrighty, numerous bookmarks and links later i have finally succeeded in debugging via launch and attach.

Debug via launch config:

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

on pressing the green > button on the VSC debug view with launch option selected in the dropdown, you should see something like this in the VSC console.

node --debug-brk=21735 --nolazy server.js

And a the debugger should pause on the first line of your server.js file. Debug away with breakpoints ! :)

Debug via attach config:

       {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }

Start your server externally

$node --debug-brk server.js

You prompt should be paused at

Debugger listening on port 5858

Press the green > button on the VSC debug view with attach option selected in the dropdown , the debugger should automatically attach itself and pause at the first line of server.js

Debug Ad nauseam

Comments

[timebandit]

If at first the solution does not attach then try a browser refresh. Also VS code has an option to auto attach at the bottom of the screen.

[Liam]

outDir is now deprecated

[Triet Pham]

what is "Start your server externally" ?

[Daniel]

@TrietPham the attacher doe not start the server, you have to do that manually, e.g. npm run start or something like that depending on your scripts.

[Daniel]

I think that was already said already in the post: > $node --debug-brk server.js Does it make sense?