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.
 
Debugging Angular 11 Application In Visual Studio Code 
 
Step 3
 
This extension is provided by Microsoft
 
Debugging Angular 11 Application In Visual Studio Code 
 
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
  1. {  
  2.      "version""0.2.0",  
  3.     "configurations": [  
  4.         {  
  5.             "type""pwa-chrome",  
  6.             "request""launch",  
  7.             "name""Launch Chrome against localhost",  
  8.             "url""http://localhost:1234",  
  9.             "webRoot""${workspaceFolder}"  
  10.         }  
  11.     ]  
  12. }  
Step 4
 
Now we can see a Debugger button in the left sidebar of vscode. Select Chrome as the environment.
 
Debugging Angular 11 Application In Visual Studio Code 
 
Step 5
 
Next, we can create app.component.ts
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.scss'],  
  7. })  
  8. export class AppComponent implements OnInit {  
  9.   title = 'customepipe';  
  10.   arrList: any = [];  
  11.   constructor() {}  
  12.   ngOnInit() {  
  13.     this.arrList = [  
  14.       { id: 1, name: 'Name1', value: null, status: 'pending' },  
  15.       { id: 2, name: 'Name2', value: null, status: 'pending' },  
  16.       { id: 3, name: 'Name3', value: 'View', status: 'pending' },  
  17.     ];  
  18.   }  
  19. }  
Now, we can run the code
 
ng serve --port 1234
 
Debugging Angular 11 Application In Visual Studio Code 
 
Step 6
 
Now, we can add a breakpoint in the app component file and test the application:
 
Debugging Angular 11 Application In Visual Studio Code 
 
Now, the Debug toolbar will display on the top of the editor.
 
Debugging Angular 11 Application In Visual Studio Code 
 
Step 7
 
Now we can click the launch chrome again. It will run the Chrome browser.
 
Debugging Angular 11 Application In Visual Studio Code 
 
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.
 
Debugging Angular 11 Application In Visual Studio Code 
 
Step 8
 
On successful execution of the above command, it will show the browser:
 
Debugging Angular 11 Application In Visual Studio Code 
 

Conclusion

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

Recommended Ebook

Angular 4.0 - A Complete Study Guide

Download Now!
Similar Articles