How To Debug An Angular Application In Chrome

Create a basic application or open any existing angular app in visual studio code. I have created a basic application and opened the same project in VS code.

 

 

I changed the default app.component.html with the following code, this will create a UI with two textboxes. Just for an example, I'll  add (sum) two values with doSum() function in App.component.ts, so that I can put a breakpoint to test the debugging.

 

App.Component.html

<div>
  <h1>Basic App for testing debugging in chrome</h1>
  <p>Value 1 <input type="number" placeholder="Enter Value 1" [(ngModel)]="val1"></p>
  <p>Value 1 <input type="number" placeholder="Enter Value 2" [(ngModel)]="val2"></p>
  <p><input type="button" value="Sum" (click)="doSum()"></p>
  <p>Total: {{total}}</p>
</div>

App.component.ts

export class AppComponent {
  title = 'debuggingApp';
  val1:number;
  val2:number;
  total:number;
  public doSum()
  {
    this.total=this.val1+this.val2;
  }
}

After editing your default code of App component, serve your app with the following Angular CLI command.

 

 

This will be your output after changes.

 

 

Now we need a Google chrome debugger extension for Visual Studio code, so click on extension option at left side icon of VS code.

 

 

Write “debugger for chrome” in the search box and I hope you’ll get the same list as in the following image. Select the first one and click on the install option in details page at right side.

 

 

Now go to the line that you want to debug when this  executes. Now click at to the left of this line or press F9 to add a breakpoint in this line.

 

 

Or you can find the debug option from the top menu of VS code and select the debugging breakpoint options that suit  your requirement.

 

 

Now Press F5 or start the debugging option from the debug menu.

 

 

The first time for debugging we have to select the debugging environment. For Visual Studio code debugging setting, Select Chrome.

 

 

Once you set your debugging environment it’ll set in launch.json, this file is just for local not for production.

Change your port number in URL option where your application is working, like the default port number is 4200.

 

 

Now press F5 one more time and you’ll see this will launch a new Chrome with the same URL that you set in launch.json.

 

Enter the values and click to the button. This will automatically enable that breakpoint in App.component.ts.

 

 

You check your inputs at the code.

 

 

Press continue in debug tool to submit this statement or next breakpoint.

 

Thanks, I hope this will help you.