In Focus

Debug A Web Application Using VSCode

There are many ways to debug a web application. Let us learn the debug process using VS Code.

Introduction

To increase the quality of systems or an application, we use debugging. It is used to detect the errors or bugs and it locates the exact position of each exception.

There are many ways to debug web applications. We normally use the browser's developer tool to debug the web application but if you are familiar with Visual Studio debugging and want to achieve the same in VSCode, you can achieve it by using the Chrome's debugger extension in VS Code.

Follow the below steps.

Step 1

We need VS Code. Let's download it from this link.

To check whether the debugger is hitting or not, I have created an Angular project using the below command.

ng new demoApp

Open this project in VS Code; click on the Extension button and search for the Chrome Debugger to install it. Reload the VS Code for the changes, as shown below.

Debugging In Web Application Using VSCode

Step 2

In this step, we have to create a configuration file. So, click on Debug >> Configuration button. After clicking on this, it will show a pop-up which has the list of extensions. From this list, select "Chrome", as shown below.

Debugging In Web Application Using VSCode 

After this, the system will create a lauch.json file which contains the configuration information. Here, in this file, we have to make some changes. Since my project is running on localhost:4200 port, I have to update this port number in the lauch.json file.

Debugging In Web Application Using VSCode 

Step 3

In this step, I have set the debug point and hit the command ng serve.
Now, let us run the project by clicking on the "Play" icon in the Debug section.

Debugging In Web Application Using VSCode 

Output

Now, we can see that the debug point has hit.

Debugging In Web Application Using VSCode 
 

Summary

In this article, I discussed how to debug a web application using Chrome Debugger in VS Code.