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
3 min read
Do you remember the good old AngularJS days 😉, where you could simply write…
…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.applyChanges(matDrawer);
Note: the video above shows a call to
ng.markDirty(...)which was however changed to
.applyChanges(..)in the final Angular 9 version
It most probably won’t be supported by Ivy
In Ivy, we don’t support NgProbe because we have our own set of testing utilities with more robust functionality. We shouldn’t bring in NgProbe because it prevents DebugNode and friends from tree-shaking properly.
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.