Debugging Angular Applications: The Tool You Need to Know

In this article, I would like to talk about how to make debugging faster and more efficient. Because that process usually takes a great part of app development and sometimes can turn into a nightmare. Especially it will be useful for those who just started to use the Angular framework.

There are several approaches that can be used for debugging an Angular application, but I would like to highlight one of them, which is one of my favorites.

My top instrument in this case is the newly released Angular DevTools. And here I will explain why it's so good. But first, briefly about tools.

It was released this year and it supports angular application from the 9th version. To get started, we just need to find that extension in the browser store and then add it. New developer tools will appear in extensions as well as an additional tab in browser dev tools.

For demo purposes, I made a simple angular application. Based on that let's overview key features of Angular DevTools:

Components Tree Structure

This is a great visualization of all app components. It is very convenient to navigate through all of them. Filter helps to reach specific parts very fast, highly helpful in case if we are dealing with a huge app. Furthermore, next to the tree structure section, we can find all properties of selected elements. It allows to change values of them and immediately see the response of an application.

Fast access to source code

Angular DevTools provides an easy way to access component source code with one click. This is very useful in case we need to set breakpoints in some part of a code and check how it's executing.

Profiler

This is another key feature, which was made for testing the performance of an app. It has a nice visualization of change detection events fired during the interaction with an application. It helps to find unnecessary change detection or slow computation. Let's overview it in detail.

To run the profiler we need to press the record button. After interacting with the application, a bar char appears, which contains all events that have happened.

Bars represented at the timeline have a different height which means an amount of time spent for a specific change detection cycle. It is possible to inspect each of them by clicking on the bar.

It shows extra information like the source of an event and time spent. Below the timeline, there are vertical bars that indicate components affected by the selected change detection cycle. Once we click on that bars, we get components details. All these functionalities make profiling much more convenient and easier.

Disadvantages

Besides the great features mentioned above, Angular DevTools also have some disadvantages comparing to other tools. For example, there is no visualization of dependency injections and routing, like it is made in Augury (another tool for debugging angular apps). But I hope it will be added in the next updates of Angular DevTools.

Wrapping up 

Despite some disadvantages, Angular DevTools is a great instrument to make debugging fast, convenient and efficient. Moreover, you can combine all features it has with other tools, like the ones that browsers have already built it. In the end, we have a powerful set of instruments to make our applications reliable and bug-less.

Thanks for reading, I hope it was useful!