Welcome to today’s post.
I will discuss how to setup interactive debugging of your Angular application within Visual Studio Code.
To debug within Visual Studio Code will require the Chrome Debugger extension.
Once the extension is found, install it.
Next build the application using ng build:
Next, run the application using ng serve:
Once the application server is running you can run the Chrome browser under the debugging context:
If you have not run the debugger before, you will be presented with some launch options. Select Chrome:
In the launch.json configuration file use port 4200 and save:
Once the application runs you set a breakpoint in your typescript code by double-clicking on the left of the line number:
In this application we set it within the authentication service component.
After submitting our login form, we see our Chrome browser freeze.
Do not be alarmed! Our code has hit the breakpoint we set in the Visual Studio Code IDE.
Go back to the Visual Studio Code IDE and select the Debug Icon as shown below from the side bar:
You will see any active breakpoints shown in the breakpoint section near the bottom left of the IDE:
Now open the source file with the breakpoint and step into the code using F10 (step over), F11 (step into) and add watch expressions as desired.
To output information to our debug console, we can use the logging methods:
The debugger console will then display useful logging information:
You can see how straightforward it was for us to install, configure and use rich debugging features to interactively debug our Angular web application using the Chrome debugger extension.
That’s all for today’s post.
I hope you found this post useful and informative.