Debug Angular Apps Easily Using Angular DevTools
Tags: angular, webdev, debugging, productivity
Published: 2022-12-15 12:37:32

---
title: Debug Angular Apps Easily Using Angular DevTools
published: true
date: 2022-12-15 11:42:40 UTC
tags: angular, webdev, debugging, productivity
canonical_url: https://www.syncfusion.com/blogs/post/debug-angular-apps-easily-using-angular-devtools.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00o3tjzn2u9y2d2hsn9o.png
---

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](https://angular.io/guide/devtools "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

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](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh "Angular DevTools extension on Google Chrome") and [Mozilla Firefox](https://addons.mozilla.org/en-GB/firefox/addon/angular-devtools/ "Angular DevTools extension on Mozilla Firefox"). It supports Angular apps built with version 9 or above with Ivy enabled.

## Getting Started with Angular DevTools

You can download the Chrome extension for Angular DevTools from [here](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh "Angular DevTools extension on Google Chrome"), and if you are a Firefox user, you can find the add-on at [this link](https://addons.mozilla.org/en-GB/firefox/addon/angular-devtools/ "Angular DevTools extension on Mozilla Firefox").

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.

![Components and Profiler tab in Angular DevTools](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Components-and-Profiler-tab-in-DevTools.png)

## Debugging the Application

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.

### View and Modify Property Values

![Displaying the details of the selected property](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Displaying-the-details-of-the-selected-property.png)As illustrated in the screenshot, when a specific component or directive instance is selected, additional information, such as properties, metadata, inputs, and outputs, is displayed on the right panel. This panel also allows you to modify a property value and see the feedback immediately in the UI, as shown in the following image.

**Note:** Text input won’t be visible if the edit functionality is unavailable for a specific property value.

![View and Modify Property Values](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/View-and-Modify-Property-Values.png)

### Look Up a Component or Directive

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.

### Navigate to the Source Code

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.

![Navigate to the Source Code](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Navigate-to-the-Source-Code.png)

### Access the Recently Selected Component or Directive

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.

## Profiling the Application

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.

![Profiler tab in Angular DevTools](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Profiler-tab-in-Angular-DevTools.png)To start profiling your app, click on the **Start recording** icon at the top-left corner of the **Profiler** tab (or upload an existing recording). Then, during profiling, when you interact with the elements in the app, each event execution, such as change detection or implementation of a lifecycle hook, will be captured by the profiler. Finally, by clicking on the icon again, you can finish recording.

I will go through some of the tasks that can be carried out under this tab in detail.

### Understand the Application’s Execution

![Sequence of bars depicting a separate change detection cycle](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Sequence-of-bars-depicting-a-separate-change-detection-cycle.png)As shown in the previous screenshot, after you complete the recording, you can see a sequence of bars, each depicting a separate change detection cycle. The height of a bar represents the time you spent on each cycle.

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.

![Sequence bar displaying the details of the particular affected cycle](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Sequence-bar-displaying-the-details-of-the-affected-cycle.png)As visible in the previous screenshot, each directive or component used during the cycle is sorted based on the time it took. This can be used to find the heaviest components in your application.

### Inspect the Execution of Components or Directives

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.

![Inspect the Execution of Components or Directives](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Inspect-the-Execution-of-Components-or-Directives.png)

### Different Visualizations to Better Understand the Execution

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.

![Different Visualizations to Better Understand the Execution](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Different-Visualizations-to-Better-Understand-the-Execution.png)

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.

![Color and intensity of the block depicting the time spent](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Color-and-intensity-of-the-block-depicting-the-time-spent.png)Similar to in the bar chart view, additional details will appear on a panel next to a specific block when you click on it.

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.

![Zoom the DashboardLayoutComponent block to see its nested children](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Zoom-the-DashboardLayoutComponent-block-to-see-its-nested-children.png)To view only the components that were affected by the change detection, check the check box on top of the sequence of bars. It will change the color of the blocks in which changes are detected  blue, while the rest will be turned gray.

![Select the Show only change detection check box](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Select-the-Show-only-change-detection-check-box.png)Finally, you can export the recorded profiler as a JSON file by clicking the **Save Profile** button at the top-right corner.

**Make sure your profiler recording doesn’t contain confidential information if you share it with someone else.**

## Conclusion

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](https://www.syncfusion.com/angular-ui-components "Angular Components Library") 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](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out the available features. Also, check out our demos on [GitHub](https://github.com/syncfusion "Syncfusion examples on GitHub").

If you have questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/angular "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easy Steps to Create a Read-Only Angular PDF Viewer ](https://www.syncfusion.com/blogs/post/easy-steps-to-create-a-read-only-angular-pdf-viewer.aspx "Blog: Easy Steps to Create a Read-Only Angular PDF Viewer")
- [Easily Generate Bulk Reports Using Mail Merge in Angular ](https://www.syncfusion.com/blogs/post/easily-generate-bulk-reports-using-mail-merge-in-angular.aspx "Blog: Easily Generate Bulk Reports Using Mail Merge in Angular ")
- [Top 7 Features of Angular 14 ](https://www.syncfusion.com/blogs/post/top-7-features-of-angular-14.aspx "Blog: Top 7 Features of Angular 14")
- [Building Custom Structural and Attribute Directives in Angular](https://www.syncfusion.com/blogs/post/building-custom-structural-and-attribute-directives-in-angular.aspx "Blog: Building Custom Structural and Attribute Directives in Angular")