Debug with VSCode: Angular5 and Node Apps

Like the previous post about Debug Angular 5 app on Web Storm, in this one I will show my config to debug angular5 and Nodejs apps on VS Code

Note: In this post, I will show the method twice, to show a refinement

I guess that there are many options, but I am only show the ones that I am using:

DEBUG VS CODE — Angular5

Step #01: Install Extension

On Visual Studio Code install Debugger for Chrome

Step #02: Start the angular app

I am using node 9, and starting angular with -aot option

$ node use -v 9$ npm start> apex@4.1.0 start /Users/pabloinchausti/Desktop/DevOps/code/github/PabloEzequiel/UELA-Upsala
> ng serve --environment=fix --port 4800 -aot

Step #03: Add launch configuration

The default config for chrome/launch is ok!

{    "type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4800",
"webRoot": "${workspaceFolder}"

Step #04: Run and Breakpoint

In VS Code, debug I am running the “launch Chrome”, and we can see the breakpoint on an angular service:

Chrome is waiting


I will show what is the config that I have to debug a NodeJs app with express: I have three configuration available because I can debug in attach mode (Very confortable), with node and with nodemon:

{"type": "node",
"request": "attach",
"name": "backend attach",
"processId": "${command:PickProcess}"
{"type": "node",
"request": "launch",
"name": "backend nodemon",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/backend/index.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},{"type": "node",
"request": "launch",
"name": "backend node",
"program": "${workspaceFolder}/backend/index.js"
}{"type": "node",
"request": "attach",
"name": "backend attach",
"port": 8526

Let´s see it working:

First, start the app (with nodemon in this case):


First, I launch the nodemon config: It start on port 8526

$ nodemon — inspect-brk=8526 index.js

And later, I launch the attach on port 8526, I have the breakpoint available:

the browser is waiting the breakpoint

Ok, I will stop the post at this point,

I have both angular5 and nodeJS apps whit express apps with debug on visual studio enabled

— — — — — — — — -

AGAIN: I will show the same thing again, but with a refinement

DEBUG Node&Express projects with VS Code

First, I write the following script, to run a backend with a API REST with nodejs and express:

╰─$ cat!/bin/bashPORT=44455echo "----------------------------------------------"
echo " Run with nodemon to enable debug in vscode "
echo "----------------------------------------------"
echo " - PORT: ${PORT} "
echo " - VS Code launch
\"type\": \"node\",
\"request\": \"attach\",
\"name\": \"backend attach://pid\",
\"processId\": \"${command:PickProcess}\",
\"restart\": true, // To nodemon
echo "----------------------------------------------"
node --versionnodemon --inspect-brk=${PORT} index.js

After execute, the debugger is listening, but the server in not up yet:

the debugger is up…but not the server:

And now, I will launch on VSCode the node / atach by Pid

VS Code discover nodemon running…


And the debugger is now attached, but the server is not running yet because a breakpoint on first line:

VS Code Play again…

And now… we have the server listening on port 5000 and attached to the debugger:

server runnig (with nodemon) and attached to the debugger

Let´s add a breakpoint: (Line 85) and let´s do reload on browser:

breakpoint is working!

One more thing: Let´s see how nodemon reload the context.

For nodemon, it is important to add “restart”: true, to the launch (see line 35 on launch.json)

We edit index.js and save file, and both the debugger and nodemon are reladed:

and I should again to do play…

nodemon and vscode debugger both reloaded

That is very confortable, thanks to the option “restart”: true on launch.json

ok… and how I debug angular again?

DEBUG Angular5 projects with VS Code

First, I start the angular5 app wit -aot option enabled:

And later I lauch on VS Code:

"type": "chrome",
"request": "launch",
"name": "frontend chrome",
"url": "http://localhost:4800",
"webRoot": "${workspaceFolder}/UELA-app5"
both debugger angular5 and backend nodemon
the breakpoint for the front is ready

Ok! now, I will close the post, where I am explaining the same thing twice, but in the second one Is a straight path to hace in the same visual studio code instance the debugger enable both for the front app with angular5, and the back with nodemon (node & express)

see you on next post…






#cloud . #mobile ~} Sharing IT while learning It! ... Opinions are for my own

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pablo Ezequiel Inchausti

#cloud . #mobile ~} Sharing IT while learning It! ... Opinions are for my own