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.
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.
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.
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.
Output
Now, we can see that the debug point has hit.
Summary
In this article, I discussed how to debug a web application using Chrome Debugger in VS Code.