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.

A new Global object ng is used for exposing a set of functions that helps in debugging. If you type ng in the browser console, you could see the different methods available in it.

Now lets see some of them in action.

For this example we will use the a simple application which has 2 components.
A 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.getComponent($0);

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 greetings to 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 greeting to 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 AppComponent

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.