How to Debug Angular in Visual Studio Code
You should first install Debugger for Chrome that you can find here: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Restart your Visual Studio Code.
Click the Debug tab on the left:
Click on “create a launch.json file” link that is under “Run and Debug” button.
A variety of options in a drop-down will appear, select Chrome (legacy).
launch.json file with a default content will appear. You can update your “url” here, the way I did.
You can copy paste from here too:
{// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch Chrome against localhost","url": "https://localhost:1932","webRoot": "${workspaceFolder}"}]}
Make sure you started your application from terminal (like “ng serve — configuration=dev — port=1932”).
Once your application is up, click on the green play icon next to your config (make sure your configuration is selected).
A debug toolbar will appear at the top of the screen and chrome will open.
You can put a breakpoint on your .ts file and now you are ready for debugging!
Happy Coding!
