Web user context
Angular Debug SPA Visual Code

Interactive Debugging of Angular Applications

Welcome to today’s post.

I will discuss how to setup interactive debugging of your Angular application within Visual Studio Code.

With most browsers including Firefox and Chrome that support JavaScript, you can configure debugging by enabling script debugging, which can help when developing cross-browser functionality. In this post, I will be discussing how we can, using the Visual Studio Code IDE, configure it to support Chrome debugging.

In Chrome there is already a feature that allows you to open the JavaScript source for your NPM Webpack built application and set breakpoints. This is not the most user-friendly interface to debug your angular application as you are required to locate the target source code at the start of each debug session, which can be time consuming. I will show how to install, configure, and run a basic debug session using 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.

Social media & sharing icons powered by UltimatelySocial