Debug with VSCode: Angular5 and Node Apps

DEBUG VS CODE — Angular5

Step #01: Install Extension

Step #02: Start the angular app

$ 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

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

Step #04: Run and Breakpoint

Chrome is waiting

DEBUG VS CODE — Node

{"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
},
the browser is waiting the breakpoint

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

DEBUG Node&Express projects with VS Code

╰─$ 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
the debugger is up…but not the server:
VS Code discover nodemon running…
server runnig (with nodemon) and attached to the debugger
breakpoint is working!
nodemon and vscode debugger both reloaded

DEBUG Angular5 projects with 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

Links

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Thoughts on Await and Try…Catch

TypeScript with OOP

Making a multiplayer blockchain game using Phaser, NodeJS and Ethereum — Pt. 2

Rewind (querySelector) by Craig David feat. JS— Makers Day 31

How to build a simple CD pipeline for your nodejs project

State Charts: To Guard, or to Guard Action — Part 1

React has me hooked!

Gotra — WordPress theme | WordPress.org

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

Pablo Ezequiel Inchausti

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

More from Medium

Leverage The Power Of Node.js For Your Next Web App Development Project

Online Compilier using Node.JS

How to Add a File Upload Widget to Any Website with no Tech Background

Vite — Perfect build tool for Web development