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. 🗺️ ✨
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. 😉
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.
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.
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.
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!
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!
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.
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.
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. 👀
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. 🔥
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. 🔍
This profile view is immensely helpful to providing insight on all the moving parts of the app and understanding the change detection execution!
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)