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:
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:
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/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 run.sh, the debugger is listening, but the server in not up yet:
And now, I will launch on VSCode the node / atach by Pid
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:
Let´s add a breakpoint: (Line 85) and let´s do reload on browser:
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…
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"
},
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