How to Debug Angular in Visual Studio Code

Photo by Julian Hochgesang on Unsplash

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!

I would love to change the world, but they won’t give me the source code | coding 👩🏼‍💻 | coffee ☕️ | jazz 🎷 | anime 🐲 | books 📚 | drawing 🎨

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

Recommended from Medium

How to Use and Pass Functions as Props— React

Using System.web.optimization; Visual Studio For Mac

React Core Concept

Overview of some topics during a problem-solving Journey.

How to Build a Todo app with Svelte!

Please welcome our 1st Time Speakers

Building a Modular Synth With Web Audio API and JavaScript

#100DaysOfCode Day 37: Single-Page Application in React.js

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
Nil Seri

Nil Seri

I would love to change the world, but they won’t give me the source code | coding 👩🏼‍💻 | coffee ☕️ | jazz 🎷 | anime 🐲 | books 📚 | drawing 🎨

More from Medium

Angular Material Form Validation For Beginners

Application Structure and Best Practices Of Angular — Part 2

Azure AD with Angular and Express.js

Authentication using the Amazon Cognito to an Angular application