Sign in to follow this  
Eminem

「︎RAP GOD」︎☣️ Debug A Web Application Using VSCode ☣️

Recommended Posts

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.

 

 

[hide]

 

 

Thereare 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.

 

We need VS Code.

 

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

 

ngnew 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.

 

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.

 

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.

 

 

 

[/hide]

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this