Angular 7 Lesson 3 - How to debug in angular app in visual studio code

How to debug in angular app in visual studio code

Video Link :

Full Angular tutorial list :

 https://blog.myzingonline.com/p/angular-7.html

Step 1: Install Debugger extension

After installing it will look something like this.

Step 2: Click F5 it will bring configuration launch setting file

Launch configurations

To debug a simple app in VS Code, press F5 and VS Code will try to debug your currently active file.

{

    // 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": "http://localhost:4200",

            "webRoot": "${workspaceFolder}"

        }

    ]

}

Step 3: Run the server using npm start

Step 4: hit f5 it will automatically launch the browser and hit your break point.

Use debug console to see the value of variable

Share on Google Plus

About myzingonline

Myzingonline is all about zing to share experience, knowledge, likes, dislikes and ideas of a person to the world.