Post
Ask Question

Easily Debug Angular 8 Application In Visual Studio Code

Introduction


I have seen many developers still use developer tools and Chrome console to debug their web applications. Visual Studio Code have a very powerful inbuilt debug option available for debugging. In this post, I will explain all the simple steps for debugging an Angular application.

Install Debugger for Chrome extension in Visual Studio Code


Open Extension menu in Visual Studio Code.
 
 
 
Search for “Debugger for Chrome” and install the extension.
 
 
 
This extension is provided by Microsoft
 
 
 

Create a new Angular 8 application using CLI


We can create a new Angular application using CLI
 
ng new AngularDebugger
 
After some time, all the node packages will be created successfully. Open the application in Visual Studio Code.
 
We can modify the default template of App component by below code.
 
app.component.html
  1. <button (click)="clickButton()" type="button">Click Here!</button>  
We can modify the class file also with below code.
 
app.component.ts
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   
  10.   clickButton() {  
  11.     let num = 10;  
  12.     num++;  
  13.     alert(`Value of 'num' is : ${num}`);  
  14.   }  
  15. }  
You can see a “Debug” button in the left side bar of visual studio code. Please click that button.
 
 
We can create a new configuration file for Debug by clicking “Add Configuration”
 
 
 
Select Chrome as environment
 
 
 
It will automatically create a new “launch.json” file. You can modify the default port number in “url” section of this file to “4200”. By default, Angular is running in this port.
 
 
 
We can add a break point in App component class file and test our application.
 
 
 
We can run the Angular application using below command.
 
ng serve
 
Again, go to Debug toolbar and click “Start Debugging” button.
 
It will automatically open a new Chrome window.
 
 
 
We have already added the break point in “clickButton” method in App component class. You can click above button in application to call that method.
 
 
You can see the debugger is successfully invoked. We can use this debugger to debug complex application very easily.

Conclusion


In this post, we have seen how to add Chrome debugger extension in Visual Studio Code, and we have successfully debugged our application using this debugger tool.


Similar Articles