Easily Debug Angular 8 Application In Visual Studio Code

Sarathlal Saseendran

7y42.6k10100Article

Angular Visual Studio Code Angular 8debuggerDebug Angular ApplicationDebugger for Chrome

10 Comments

Join the conversation! Your thoughts help the community grow.

Arvind Singh7y ago
Nice article.....
- Sarathlal Saseendran7y ago
  Thank you very much Arvind Singh Baghel
Pankajkumar Patel7y ago
Nice article
- Sarathlal Saseendran7y ago
  Thank you very much Pankaj Patel
Sourav Kumar Das7y ago
Nice Article Sir.
- Sarathlal Saseendran7y ago
  Thank you very much Sourav Kumar Das
Abhishek Mishra7y ago
Loved it. Helpful
- Sarathlal Saseendran7y ago
  Thank you very much Abhishek Mishra ji
Faisal Pathan7y ago
Excellent idea!
- Sarathlal Saseendran7y ago
  Thank you very much Faisal Pathan

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

<button (click)="clickButton()" type="button">Click Here!</button>

We can modify the class file also with below code.

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
clickButton() {
let num = 10;
num++;
alert(`Value of 'num' is : ${num}`);
}
}

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.