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.
- Template Driven Forms and Validation in Angular with Typescript
- Building an Angular 5 CLI project with ngx-bootstrap
- Share data between sibling components in Angular 5 using Rxjs BehaviorSubject?
- Dynamic Components in Angular with TypeScript?
- 3 Steps to upgrade project from Angular 5 to Angular 6?
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.
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.
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...'.
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.
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.
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.
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.
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
Posted Comments :
Eve Hunt Posted : 4 Years Ago
"Greetings! Very helpful advice in this particular post! It’s the little changes which will make the greatest changes. Thanks a lot for sharing!"
Eve Hunt Posted : 4 Years Ago
Hello, i think that i saw you visited my blog thus i came to “return the favor”.I’m attempting to find things to enhance my website!I suppose its ok to use some of your ideas!! Regards: <a href="https://www.thedarkweblinks.com">Eve Hunt</a>
Sonia Horn Posted : 4 Years Ago
Some genuinely good information, Glad I found this. “O tyrant love, to what do you not drive the hearts of men. regards: < href="https://www.techlazy.com/free-movie-streaming-sites-no-sign-up-required/">Sonia horn</a>
Sonia HORN Posted : 4 Years Ago
Thank you for all your work on this site. Gloria enjoys carrying out investigation and it’s really easy to understand why. All of us hear all about the lively mode you convey vital things through this website and cause response from others about this point then our own child is without a doubt learning a lot. Enjoy the remaining portion of the new year. You’re the one carrying out a powerful job.
Sona Horn Posted : 4 Years Ago
I was just looking for this info for a while. After 6 hours of continuous Googleing, finally I got it in your web site. I wonder what’s the lack of Google strategy that do not rank this type of informative websites in top of the list. Generally the top web sites are full of garbage.
EVEHUNT1122 Posted : 4 Years Ago
Thank you for any other wonderful post. The place else may anybody get that type of information in such an ideal way of writing? I’ve a presentation next week, and I am at the look for such info.
bigpond login error Posted : 3 Years Ago
Thank you so much for giving everybody an extremely amazing chance to read in detail from this blog. You provide to Very useful advice in this particular post! The full look of your web site is fantastic and please continue the enjoyable work. <a href="http://webmailaccountlogin.com/bigpond-webmail-support.php">bigpond login problem</a>
Harold Burton Posted : Last Year
Really great suggestions and video! Thank you. Is there an extension while you are viewing youtube comments from the comments section area, the youtube post is still playing by the side of Chrome browser instead of the very top?Thank you for your help in advance.
Ashley Jones Posted : Last Year
I don't know why people like Chrome so much. It's actually very slow to load and very power hungry. Microsoft Edge is a much better alternative. Seriously.
Holly Hooper Posted : Last Year
LastPass: Free Password Manager Nimbus Screenshot & Screen Video Recorder SearchPreview Search the current site Tampermonkey timeStats.
Eve Hunt Posted : 4 Years Ago
I consider something genuinely special in this site