DEV Community

Cover image for Debugging and inspecting Angular apps using Angular DevTools
Alisa
Alisa

Posted on

Debugging and inspecting Angular apps using Angular DevTools

There's a new Chrome extension for Angular 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 and explore the features in Angular DevTools together. πŸ—ΊοΈ ✨

Person exploring

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, 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. πŸ˜‡

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

Person inspecting a website

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 logo alisaduncan / angular-animations-code-2019

Code samples for angular animations

If you haven't already done so, install the Angular DevTools Chrome Extension and open Chrome DevTools. You'll see a new tab labeled Angular. We'll start our exploration on the Components tab.

Alt Text

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

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!! ❀️

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 HeroComponents. Shouldn't we see every HeroComponent in the *ngFor since they are components? πŸ‘€

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

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

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

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.

Person looking at charts

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 that looks like this.

Angular app with an input to filter a table above the table display containing pagination controls

A table displays a filtered and paginated list of Star Wars planets, courtesy of Star Wars API. 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. πŸ‘€

Angular DevTools Profiler view with 19 bars representing a change detection cycle

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. πŸ”₯

Angular DevTools Profiler view in tree map layout

Angular DevTools Profiler view in flame map layout

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

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

You can read more details and watch a helpful video on the Angular blog.

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

Top comments (0)