Debugging An Angular Application In Chrome

Introduction

In today’s article we will look at how we can debug an Angular application in Chrome. We will create a boilerplate Angular application from the Visual Studio 2019 template and then see how we can debug both the server-side code which is a Web API application and the client-side code which is an Angular application.

Creating an Angular application in VS 2019

We will first create an Angular application with a C# Web API using the Visual Studio 2019 Community Edition standard template.

After the above steps are done, we have the below boiler plate code.

Let us open the “WeatherForecastContoller.cs” file and add a breakpoint.

And after that change the below line in the Startup.cs from.

spa.UseAngularCliServer(npmScript: "start");

To

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

Below is the final version of the file.

Before we can run the application, we would need to ensure the following steps have been completed,

1. Install Node.js
2. Run Npm Install
3. Open location of the ClientApp and type “npm run start”
   

Next, we run the application from VS 2019 and get to the Main Page.

When we click on the “Fetch Data” link we hit the breakpoint that we added in the Web API as below.

These steps are rather simple and straightforward.

Debugging an Angular application in Chrome

Next, we look at how we can debug the Angular application which is the client-side application. We need to follow the below steps.

First, we find the “TS” file where we want to add the breakpoint to debug.

Next, we open the application in the Chrome browser and complete the following steps,

1. Open the developer tools by selecting “More tools” and then “Developer tools”. The shortcut to get there is “Ctrl+Shift+I”.
2. Select Sources
3. Select FileSystem and click +
4. Find the location of your TS file and select it
5. Now, you will see your code and then you can add a breakpoint as done below.
   

Now, when you refresh the page or navigate to this page again, the breakpoint will be hit, and you can see the values of variables etc.

Summary

In this article, we looked at how we can debug an Angular application created from the VS 2019 template on both and server and client side using Visual Studio and the Chrome browser. This is a quick start method to debug the application and find issues etc. when working with an Angular application. The technique to debug the Angular application using Chrome can also be used with other applications and is not only limited to the template from VS 2019. Happy Coding!