Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Debugging Angular Ivy Applications from the Devtools Console

Learn how Ivy allows us to debug our components directly from the browser devtools

3 min read

Do you remember how in AngularJS (v1.x) we could easily debug/change the state of our components from the browser’s devtools. Guess what: now with Ivy a new easy API returns that openes up a variety of new ways. Let’s see how that works.

Do you remember the good old AngularJS days 😉, where you could simply write…

> angular.element($0).scope()

…to your browser’s devtools console and get access to the scope of your component to manipulate and inspect it? About 3 years ago (man time passes by), I wrote a blog post about Debugging Angular Applications. It highlighted how you could easily inspect the component state from the browser devtools console with AngularJS and how that changed with the early versions of Angular (2+). In fact starting from the early versions of Angular 2+ the ng.probe API has been introduced to allow you to interact with the component state from your console.

"Ivy is an enabler" Igor Minar

With Ivy new APIs have been added to the global ng object. If you open up your devtools (i.e. Chrome’s Devtools) and type ng, you’ll see something like this:

What we can do now is to go to the “Elements” panel in the devtools and choose for instance the <mat-drawer> component (which comes from Angular Material).

When you click on an element, you then have it at disposal as $0 in the devtools console ($1 the second last, $2 the third last etc..you get the idea). We can now use the ng.getComponent(...) and directly pass it the DOM tag we’ve selected previously, basically $0. We can store the component in a variable and then start to interact with it.

For instance let’s invoke the toggle() function of the <mat-drawer> to close the side menu.

The commands executed are:

// grab the component instance of the DOM element stored in $0
let matDrawer = ng.getComponent($0);

// interact with the component's API
matDrawer.toggle();

// trigger change detection on the component
ng.markDirty(matDrawer);

Conclusion

This new API allows us to quickly interact with components and test out things without having to go back and forth between our editor and browser. But even more, new devtools extensions can be developed on top of these APIs to facilitate our lifes even more. For instance, if you take a look at the components, they have a __ngContext__ attached which has a debug object with lots of interesting methods to query the component and it’s template properties. Note however, these APIs (or some of them) are only available in development mode and will be compiled away in production mode.


Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus