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}"
},

launch.json

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

DEBUG VS CODE — Node

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):

Invoque:

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 run.sh
#!/bin/bash
PORT=44455
echo "----------------------------------------------"
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 --version
nodemon --inspect-brk=${PORT} index.js

After execute run.sh, 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…

Play:

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…

regards!

Pablo

Links

Microsoft/vscode-recipes

How to debug Angular with VSCode?

Introducing Chrome Debugging for VS Code

Angular JavaScript Tutorial in VS Code