How To Debug An Angular Application

Introduction

This article demonstrates how to debug an angular application. In this article, we will discuss.

1. How to Debug an Angular Application in VS Code
2. How to Debug an Angular Application in Chrome Dev Tool

Prerequisite

• We have already created and opened an Angular application

Debugging Angular Application in VS Code

Here are the steps to debug an Angular application in Visual Studio Code.

Step 1. Configure debugging environment

Go to the Debug View by clicking on the Debugging icon on the left side of the VS code editor or using the shortcut [Ctrl] + [Shift] + [D]. VS Code stores local debugging configuration in the launch.json file.

If launch.json is not configured yet, VS Code asks to create one. Click on the Run and Debug option.

Once you click on Run and Debug, it will open and ask you to Select the Environment dialog box. Just type “Chrome” there and select.

VS Code will create the launch.json file with a configuration to launch the application. Here's an example.

We need to change the port number in the URL to 4200 as an angular application running on this port. We can modify the configuration name, but that is optional.

If launch.json is already there in VS Code, then we can select the Add Configuration.. option from the Run and Debug dropdown.

 

Then we can select the Launch Chrome option, which will create the configuration like below.

Step 2. Run the App and start debugging

Before debugging, run the angular application first using the below command

ng server -o

Note. It is necessary to run the app on port 4200 first and then launch debugging because the debugger needs to connect to a running instance of the application in order to interact with it. By default, Angular serves the application on port 4200. This means that when we run the application using the command ng serve -o or ng serve --port 4200, it will start a local development server and make the application available at http://localhost:4200/.

Once the application is running, we can launch the debugger in VS Code by using the Debug panel and selecting a configuration (e.g., "Launch Chrome against localhost"). The debugger will then connect to the running instance of the application on port 4200 and allow us to perform tasks such as setting breakpoints, inspecting variables, and stepping through the code.

Let’s set a breakpoint in the code by clicking to the left of the line number. Start the debugging session by clicking on the green play button or using the shortcut F5. The application will launch in Google Chrome and will stop at the breakpoint.

We can now inspect variables, call stack, and perform other debugging actions from within Visual Studio Code.

Debugging Angular Application in Chrome Dev Tool

Run the Angular application in Google Chrome. Then right-click on the page and select "Inspect" or press "[F12]" to open the DevTools.

Go to the "Sources" tab and press [Ctrl]+[P] to search for a TS file to debug. Otherwise, we can manually locate the file from webpack section.

Open the file and set a breakpoint in the code by clicking on the line number where we want to pause the execution.

In addition to setting breakpoints, we can also use the DevTools' debugging features, such as the "Call Stack" and "Scope Variables" panels, “Watch Variables,” to understand the context in which the code is running.

Refresh the page or trigger the action that causes the breakpoint to be hit.

The execution will pause at the breakpoint, and we will be able to inspect the values of variables, evaluate expressions, and step through the code.

Hope you find this article useful.

Happy Learning!