Debug ExpressJS server side code using Visual Studio Code - express

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?

Answer 1

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