Debugging Angular 11 Application In Visual Studio Code

Introduction

In this article, we will learn how to debug an Angular 11 application in Visual Studio code.

Step 1 - What is Debugging?

Debugging is key to building any application.

Using the debugger in any file on our codebase will cause the application to break at the point where the statement is set. There are a few things we could do to avoid creating bugs from a developer's point of view.

Example:

Defensive Programming or Test-Driven Development.

Debugging an application is a key skill for developers, and speeds up the process of remove bugs and delivering the application.

How to debug Angular in Visual studio code (short note)

Create an Angular application
Click on Extension then Install Debugger for Chrome
Configure Debug port in Environment
Add a pointer
Start Debugging

Step 2 - How to Install the Debugger for Chrome extension in VS Code

In Header navigation, click on the View Open Extension menu in Visual Studio Code:

Debugging Angular 11 Application In Visual Studio Code

Or directly click on sidenavabar extension (ctrl+shift+X) then search the debugger for chrome and install the extension.

Step 3

This extension is provided by Microsoft

Create a launch.json config file

The launch.json file should look like this, with values changed to reflect your environment,

Set the angular port in the URL

{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:1234",
"webRoot": "${workspaceFolder}"
}
]
}

Step 4

Now we can see a Debugger button in the left sidebar of vscode. Select Chrome as the environment.

Step 5

Next, we can create app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
title = 'customepipe';
arrList: any = [];
constructor() {}
ngOnInit() {
this.arrList = [
{ id: 1, name: 'Name1', value: null, status: 'pending' },
{ id: 2, name: 'Name2', value: null, status: 'pending' },
{ id: 3, name: 'Name3', value: 'View', status: 'pending' },
];
}
}

Now, we can run the code

ng serve --port 1234

Step 6

Now, we can add a breakpoint in the app component file and test the application:

Now, the Debug toolbar will display on the top of the editor.

Step 7

Now we can click the launch chrome again. It will run the Chrome browser.

Debugger shortcuts are below:

Step Over F10
Step Into F11
Step Out Shift+F11
Restart Ctrl+Shift+F5
Continue / Pause F5
Stop Shift+F5

Step 7

Now, in our visual Studio code, the debuggers are working successfully for our application.

Step 8

On successful execution of the above command, it will show the browser:

Conclusion

After reading this, you know more about debugging in Visual Studio Code and how to practice it.