Debugging and inspecting Angular apps using Angular DevTools
Tags: angular, webdev, tutorial, productivity
Published: 2021-05-18 21:52:48

---
title: Debugging and inspecting Angular apps using Angular DevTools
published: true
description: Using Angular DevTools to inspect components, component properties, and profile change detection in Angular apps.
tags: angular, webdev, tutorial, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttlw7bou9ar8xb1h94xh.png
---

There's a new Chrome extension for [Angular](https://angular.io/) apps! Angular DevTools is a brand new way debug and inspect Angular applications to help you better visualize and profile your app. Let's install [the Chrome Extension](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) and explore the features in Angular DevTools together. 🗺️ :sparkles:

![Person exploring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmc825zu4jxeda3pco68.png)

# Can I use Angular DevTools on any and all Angular apps?

When you navigate to your local app, you'll see the red Angular icon for the extension light up. That's when the fun begins!

Angular DevTools uses the power of [Ivy](https://angular.io/guide/ivy), Angular's new compilation and rendering pipeline, to gather the component properties, view the component tree structure, and access the internal visibility it needs. Ivy is required for Angular DevTools to work, so apps need to be at least >= v9. Angular DevTools displays a warning if you try to use it on a version of Angular that doesn't support Ivy.

Oh and one more caveat. Angular DevTools only works on non-production code, so trying to be nosy about how prod apps won't work. :innocent:

Even though you can't inspect prod mode apps, it is fun to see icon light up when the app is built in Angular. :wink:

![Person inspecting a website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/neghkhyx0o6fej61dpvj.png)

# Let's inspect components!

I'll start with a slightly modified Tour of Heroes app with some changes in component structure to better showcase the tool. Unfortunately, you can't use Angular DevTools directly on StackBlitz projects so here's the repo to view the small modifications and follow along.

{% github alisaduncan/angular-animations-code no-readme %}


If you haven't already done so, install [the Angular DevTools Chrome Extension](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) and open Chrome DevTools. You'll see a new tab labeled **Angular**. We'll start our exploration on the **Components** tab.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r6npg9rkjcsexv9fqm3.png)

## The Components tab
You're presented with the component tree and as you hover your mouse over the different components, you'll see the corresponding components in your app light up, just like we see in Chrome DevTool's Elements view. 

When you select a component to inspect, you'll get a list of properties and a helpful link to Angular docs. The props include both public and private props so you'll get a complete picture of the component at a glance.

![Angular DevTools Component tree view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il3zt293ql4pn2mena2l.png)

Do you see that **<>** icon to the right of the component name? If you click on it, it'll automatically navigate you to Chrome DevTool's **Sources** tab **_and open the component code for you_**. Handy!! :heart:

In the app we'll navigate to a view that shows all the heroes and inspect this view in Angular DevTool's **Component** tab. In this component template, we use `*ngFor` and display each hero in a child `HeroComponent`. However, notice that our component tree looks very minimal in Angular DevTools. We don't see all the `HeroComponent`s. Shouldn't we see every `HeroComponent` in the `*ngFor` since they are components? :eyes:

We can see all the child components if we enable the option to view comments. Click on the gear icon and turn on **Show comment nodes**. Yay! We now see all the `app-hero` child components in the component tree!

![Angular DevTools Components view showing all child nodes in a ngFor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb3bineqdaa9tgm3l1q0.png)

Now here's where we can start having some fun! We can further inspect props and edit them. This includes editing `@Input()` property values. :rocket:

We can look at the properties for `app-hero` component and change the `@Input` hero property value. The change is then reflected in the app view. What a helpful way to test things out! 

![Angular DevTools Components view showing Input and Output properties for a selected component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd1rktejbkemrijeie6a.png)

These are basic examples for a very small component without a lot of moving pieces, but you can see how inspecting and manipulating data can be very powerful as your app increases in complexity. I've poked around inspecting and manipulating components in apps containing dynamic CDK Portals and state management, and I get helpful and complementary app visualization when used along with Chrome DevTools built in features and [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en).

![Person looking at charts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6wbqz7ue5geaennh4r4.png)

# Let's profile the app and inspect change detection cycles!

For this section, I'll use a different app. I'm using an app that showcases filtering and pagination using [Material components](https://material.angular.io/) that looks like this.

![Angular app with an input to filter a table above the table display containing pagination controls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/439qjr6xq76eqhcsg81u.png)

A table displays a filtered and paginated list of Star Wars planets, courtesy of [Star Wars API](https://swapi.dev/). Interacting with the filter input or the pagination controls makes an API call and updates the table. There's more moving parts and more change detection cycles within a view in this app compared to the modified Tour of Heroes.

View the **Profiler** tab and press the circular play button to start a profile session. Now I will start searching for "Tatooine" in the app. After entering 3 letters- "T", "a", "t", I narrowed down the list of planets to the "Tatooine" entry so I stopped the profiler. Let's see what we get. :eyes:

![Angular DevTools Profiler view with 19 bars representing a change detection cycle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r83fc5zl4p2dn3251xd.png)

We get 19 change detection cycles. If I click on a cycle, I see a bar chart of the different child components along with the change detection cycle that it processed and time it took to process it. WOW! You can also visualize the cycles as a Tree map and Flame graph. :fire: 

![Angular DevTools Profiler view in tree map layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlck0zg2nhiblwq7puuh.png)

![Angular DevTools Profiler view in flame map layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6clffzim20klztpf0gd.png)

You can see what happens for each letter typed in the filter input - "T" at cycle 3, "a" at cycle 9, and "t" at cycle 14. Immediately preceding those cycles see we see a short delay from a `debounce` added to the input stream, then the call out to the API, and lastly updating the table.

As I dive into the cycle details, I can see which lifecycle hook also triggered as a result of change detection, and how long the change detection took to process in each child component. 🔍

![Angular DevTools Profiler view with a breakdown of child components and how change detection affects each component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s36b2oj1rl3qquv9tpqg.png)

This profile view is immensely helpful to providing insight on all the moving parts of the app and understanding the change detection execution!

![Animated gif stepping through each change detection cycle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqqs43m9knufmfsopatw.gif)

You can read more details and watch a helpful video on the [Angular blog](http://goo.gle/angular-devtools).

Have you tried using Angular DevTools yet? If so, what's your favorite feature? And please share your inspecting/debugging tips!