Debugging Angular Applications
After upgrading my projects to Angular v9, while I was trying to debug the application using
ng.probe, I kept getting the following error
I was confused and I was thinking where did
ng.probe go ?
For those who are not familiar with
ng.probe and are working on angular versions < 9, here is an amazing article that explains it.
We are solely going to focus on v9+ as Ivy is officially used as the default compiler. And Ivy brought some new powerful API’s that helps in easier debugging.
Now lets see some of them in action.
For this example we will use the a simple application which has 2 components.
GreetingsComponent which displays
Hi Abdu Manaz, is nested within
AppComponent. We will use the new debugging API’s and change the greeting to
Hello Abdu Manaz using the debugging methods and without having to actually change the code. This is a simple use case, but one that’ll help you understand more about debugging.
A couple of things before we start, when you inspect an element in Chrome, the element can be accessed using the variable $0 (as marked in the above screenshot).
So if you go ahead and type $0 in console, you will get the below output
We have the HTML reference to the element. To get the component reference of that element, execute the below command in console.
ng — refers to the global object exposing the debugging functions
getComponent — used to get a reference to the component
$0 — refers to the element in DOM
Now we have access to the
GreetingsComponent. Using the component reference we can manually call the different functions inside the component as well as update its state. Let’s change the value in variable
Hello Abdu Manaz as shown below
We can store the component reference into a variable
component and use it for further actions too. Here we have changed the variable
Hello Abdu Manaz .
But wait a minute, nothing changed. That’s because, Angular change detection hasn’t run and the changes that we have done aren’t picked up yet.
So we can manually trigger change detection using
ng.applyChanges($0). Now the view will be updated.
Lets look at some of the other useful methods
ng.getOwningComponent — which will return the immediate parent component of the selected element. In our example,
GreetingsComponent is nested in
AppComponent — so the method returns a reference to
ng.getDirectives — which will return an array of Directives applied on the element. Since we are not using any directives in our example app, it will return empty array.
ng.getListeners — will return an array of listeners attached to the element. In our example, we have attached a
click event to the
img element. If we execute this method after selecting the
img element we will get the below output
These are some of the functions that helps in better debug our angular application.
For further details go to : https://angular.io/api/core/global
Also please note that, these methods are only available in development mode and these are not available in prod mode.