Debugging is an important aspect while working with any size of projects. It’s not only required when doing development but also required when you get any bug on production and try to figure out which code has not worked correctly.

This article is for those who are working in an Angular application with Typescript and want to debug their code in Visual Studio Code. So, let us start and see how we can setup debugging environment for Visual Studio Code, which will debug the Angular App that runs on Chrome browser. Chrome browser is a widely used browser throughout the world.

More articles on Angular which you may like.

 

Setup the Debugging Environment with Visual Studio Code

We cannot directly debug the Angular app code in Visual Studio Code, which are running on Chrome browser because Visual Studio Code does not have inbuilt tool for debugging. To debug the Angular-Typescript code in Visual Studio Code, first, we will have to install ‘Debugger for Chrome’ extension, which is free and can install directly install in Visual Studio Code.

So, let us move to extension block from where we can search and install extensions those are created for Visual Studio Code. We have also available so many other extensions, which are helpful while doing development in Visual Studio Code. These help us while coding, debugging, maintain the code and many more.

From the extension’s search textbox, we have to search ‘Debugger for Chrome’ and install it as showing in the following image.

Debugging for chrome

 

Therefore, now we have debugger tool installed and ready to use with Visual Studio Code. Now move to your code from where you want to start debugging the code. First, create one breakpoint using mouse click just before line number from where you actually want to start debugging. You can refer following image for a breakpoint. The red circle is our breakpoint. If you want to remove that breakpoint then just click again on breakpoint to remove it.

angular debugging

Now, let jump to Debug section [Second icon from below in left panel]. At top of debugging section, you will find Debug bar with a green button, on dropdown with No Configurations and Add Configuration options and one setting icon etc. as shown in below image.

Just click to the No Configurations the dropdown and choose ‘Add Configuration...'.

Angular Debugging Configuration

It will ask to select your environments like Node.JS, Chrome and many more. As we are going to debug our application, which will run on the Chrome browser, therefore, let choose Chrome as an Environment.

Angular Debug Chrome

Just after selecting Chrome as an environment. It will auto create a launch.json file where we have available configurations for chrome debugging. As you can see a launch.json file with below image. Here you will find URL with localhost URL. By default, it will create a URL with some other port but as we generally use 4200 as a port while working with the Angular application. So, just change the port number whatever in URL section with 4200.  You can take help with the following image. 

Angular Debug with Chrome

If you are not willing to modify the port in the configuration file and want to use the same port with angular development then you have to run your app with that port. You can use the following command to run you angular app with a particular port.

ng serve –open 4300 [Change whatever port number you want].

Now, let run your app using ng serve command. However, let me clear one thing that after running your application using ng serve command, you cannot debug your code. First, you have to keep running application on an Angular server and then you have to press Debug button [Green triangle button] to start debugging for that application. 

Angular Start Debuggin

Once, you will click to start debugging. You can see with the following image, we have put the breakpoint on the submission of the form. After filling the form, when we click to submit button, it will start debugging your code from your breakpoint.

In debugging mode, you will get one sticky menu at the top with several buttons like moving forward, stop debugging etc.

typescript debuggin

Conclusion

So, today we have seen how to setup an environment for debugging in Visual Studio Code with Chrome browser.

I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and If you like this post, please share it with your friends. Thanks