It’s not a secret that the Angular community has needed better tools to inspect the structure of Angular applications and profile their performance. Angular DevTools has been introduced for just that!
This article will go through Angular DevTools in detail and provide step-by-step guidance on making the best of it.
Angular DevTools is a browser extension introduced with Angular 12. It visualizes the structure of your app and previews the directive and component instances’ state. It gives you insight into the change detection cycles and helps you understand the app’s execution.
Angular DevTools is available for both Google Chrome and Mozilla Firefox. It supports Angular apps built with version 9 or above with Ivy enabled.
You can download the Chrome extension for Angular DevTools from here, and if you are a Firefox user, you can find the add-on at this link.
After installing the DevTools extension, open an Angular application that runs in development mode. There, you can see that the extension’s icon color changes from black to red, indicating that you can debug the application. Now, open the developer tools and select the Angular tab.
The running Angular version and the latest commit hash for the extension will be visible in the top-right corner of the DevTools. Additionally, as shown in the following image, when you open the DevTools, you’ll see two subtabs: Components and Profiler.
The Components subtab visualizes the application’s structure, lets you inspect the directive and component instances, and lets you preview or edit their states. In addition, you can examine the application’s component tree from here, which exhibits the hierarchical relationship between directives and the components within.
Let’s go through some of the tasks that can be carried out under this tab.
Note: Text input won’t be visible if the edit functionality is unavailable for a specific property value.
Imagine you need to jump directly to a specific directive or component using its name. You can do this simply by using the search box above the component tree. Enter and Shift + Enter keyboard shortcuts come in handy to navigate into the next and previous search matches, respectively.
Angular DevTools also allow you to navigate to a particular component’s source code. After selecting a specific component, you just click on the <> icon at the top-right corner of the right panel. Then, it will navigate to the source code of the selected component.
Angular DevTools gives you access to the instances of the recently selected directives and components via the console. While $ng0 provides a reference to the currently selected instance, $ng1 works as a reference for instances chosen previously. Using this reference, you can easily read any value or method related to the referenced directive or component.
Not only can you debug an app with Angular DevTools, you can also profile your app to identify the factors that degrade its performance.
You can profile your application using the Profiler tab next to the Components tab.
I will go through some of the tasks that can be carried out under this tab in detail.
As shown in the following screenshot, when you click on a particular bar, it will display further information, such as total time spent, the source of the change detection, and the directives and components affected by the cycle.
Each of these component bars displays additional information. For example, you’ll see the total time taken by each component, the exact methods triggered, and the parent hierarchy of the selected element.
From the bar chart view, you can switch to tree map or flame graph views to visualize the change detection to better understand your application’s execution.
In the flame graph view, the color of each block represents the time the app spent on that component. DevTools changes the intensity of the color based on the time consumed by each component relative to the component where the app spent the most time in change detection. That means the more time an app spent on a specific component, the higher the intensity of the block color will be.
As you can see in the previous screenshot, the component and directives executed under the DashboardLayoutComponent are not clearly visible. However, you can double-click on the DashboardLayoutComponent block and zoom into it to get a clear view of its nested children.
Make sure your profiler recording doesn’t contain confidential information if you share it with someone else.
In this article, I’ve discussed the features of Angular DevTools and how to use them. Even though it’s relatively new to the Angular community, DevTools eases your development process and brings transparency. If you still haven’t tried it out, I encourage you to do so.
Thank you for reading!
Syncfusion’s Angular UI component library is the only suite you will ever need to build an app. It contains over 75 high-performance, lightweight, modular, and responsive UI components in a single package.
For existing customers, the newest Essential Studio version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the available features. Also, check out our demos on GitHub.
If you have questions, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!