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?

semuzaboi · Accepted Answer · 2016-05-24 10:45:16Z

23

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

answered May 24, 2016 at 10:45

semuzaboi

5,2025 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

timebandit Over a year ago

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 Over a year ago

outDir is now deprecated

Triet Pham Over a year ago

what is "Start your server externally" ?

Daniel Over a year ago

@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 Over a year ago

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

Collectives™ on Stack Overflow

Debug ExpressJS server side code using Visual Studio Code

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related