Debugging Angular App in Visual Studio Code

There was a time when console.log() statement was a norm to debug web application. However, with smart code editors and with the advent of code extensions we can debug our application with ease.

In this short article, I am going to show you the way we can debug our angular application inside VS Code.

Pre-requisites:

In respect to our article, make sure you have VS Code and Angular CLI install  on your machine. In case you need more help in this regards then please refer my previous article here

Now let's get started 😎 with our debugging journey 🚀

Step 1:

Create a new angular app or open an existing angular app in vs code.

For the sake of example I've created angular application with name "scratch"

Step 2:

open the newly created project in the Visual Studio Code.

Step 3:

In the VS Code, install the extension  "Debugger for Chrome"

Step 4:

Now go to the "Debug" section from menu bar and click on "Add Configuration"

Alternatively you can also do the same thing if you go to "View" menu and click on "Debug (* see note)" and from the "RUN AND DEBUG" drop down, click on "Add Configuration"

Note: you can use shortcut key Ctrl + Shift + D to open debug window

Step 5:

step 4 above results in the creation of ".vscode" folder in the angular code area. This folder will have a "launch.json" file inside it

Inside your "launch.json" file change the port number based upon the port number you are using when you your angular app is running.

In my case it is 4201 (I've to add it specifically because my other port ae busy). You can check yours with typing "ng serve" and open your app in the browser based on the result.  Typically, if it's your first time running angular application then by default the port assign would be 4200

Step 6:

Based  on the port number from step 5, change configuration for "url" property present inside the launch.json file and click on save (ctrl + s).

In my case it is "url": "http://localhost:4201",

Step 7:

From app.component.html remove every piece of boilerplate code and add the following 

<button (click)="clickMe()">Click Me</button>

Inside the component file app.component.ts add the method clickMe() in the class AppComponent. It should look like in the snippet below 

export class AppComponent {

  title = 'scratch';

  clickMe() {

    console.log('Hi there');

  }

}

And now save everything. We are going to debug what we've done so far

Debug And Verify Results

Inside app.component.ts, add the breakpoint in the clickMe() method by clicking on left side pane adjacent to that code or by simply pressing "F9". A red spherical dot will appear as soon as you add a breakpoint.

Go to "View" menu and click on "Debug (* see note)" and click on start debugging using green arrow Or simply press "F5" to start debugging 🤔

Click on the only button available "Click Me" and you will be taken onto the visual studio code where you've added the breakpoint in clickMe() method inside app.component.ts

You can see the result in the debug window at left side. You can also check the values in local variables and this way you can play around and debug your code in effective way without writing any more console.log() statement and making round trips to browsers.

Hope it helps 😊