Debugging TypeScript In Visual Studio Code Using Chrome

This article is for those who are working in an Angular application with Typescript and want to debug their code in Visual Studio Code.

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 in 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 set up a debugging environment for Visual Studio Code, which will debug the Angular App that runs on the 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 is running on the Chrome browser because Visual Studio Code does not have an inbuilt tool for debugging. To debug the Angular-Typescript code in Visual Studio Code, first, we will have to install ‘Debugging Typescript In Visual Studio Code Using Chrome’ extension, which is free and can install directly in Visual Studio Code.

So, let us move to extension block from where we can search and install extensions 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, maintaining the code and much more.

From the extension’s search textbox, we have to search ‘Debugging Typescript In Visual Studio Code Using Chrome’ and install it as showing in the following image.

Debugging Typescript In Visual Studio Code Using Chrome

Therefore, now we have the 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 to the 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.

Debugging Typescript In Visual Studio Code Using Chrome

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

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

Debugging Typescript In Visual Studio Code Using Chrome 

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's choose Chrome as an Environment.

Debugging Typescript In Visual Studio Code Using Chrome

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

Debugging Typescript In Visual Studio Code Using 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's run our app using ng serve command. However, let me clear up one thing -- after running your application using ng serve command, you cannot debug your code. First, you have to keep running your application on an Angular Server and then you have to press the "Debug" button [Green triangle button] to start debugging for that application. 

Debugging Typescript In Visual Studio Code Using Chrome

Once you click to start debugging, you can see the following image. We have put the breakpoint on the submission of the form. After filling in the form, when we click the 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 move forward, stop debugging etc.

Debugging Typescript In Visual Studio Code Using Chrome

Conclusion

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

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