Debugging is a great tool for every developer. And Angular 9 introduced new Debugging API which make our life easy. Generally, debugging is a crucial part of troubleshooting a code. In Angular 9, it has been added a global “ng” object to make your easier.
Ok, where can I use this Debugging API 🙋?
Nice question. Firstly, we are going to see where we can use it. And, then we will discuss these debugging API in details with example.
Are you ready to grab a knowledge cake 🍰?
Yes, of-course!! That’s why you are here. Am I right? Ok then do one thing. Open your favorite browser. For my case, I am using Microsoft edge (it’s up to you). Then type ng. What you get on your screen?
Before move to our tutorial, I want to ask you a question.
What is a $0 😕?
$0 is the most recent selected element reference from the Elements inspector or from using inspect Element in browser developer tool. We will use it many time in this debugging API tutorial.
Now we are going to elaborate these hidden debugging API methods provided by Ivy. Generally, Ivy gives five main API methods. But I want to tell you about one more underdog method before moving to main methods.
This method triggers change detection of the selected component like if we made some changes in any of the angular objects using the above methods in console we need to call “ng.applyChanges” in order to reflect that changes in DOM, now let’s go through one by one each of them.
It is a very helpful method which is used to check the current state of the app at any moment of time. It retrieves the angular component instance from an HTML element. We can use this method for testing any third party component like ng-bootstrap.
You have to select exact component element otherwise it returns null as shown below:
getComponent returns component instance in case of selecting exact element (<app-root>)
getComponent returns “null” in case of selecting other elements (<div>)
This method return the parent component for given HTML element. Just like getComponent. But wait, Its not exactly same as ng.getComponent . You don’t need to select the exact component in the DOM, you can select any of the HTML element it will return the parent angular component instance of that element.
As you can see in above example, You can see that we can get the parent component instance of div element with the help of ng.getOwningComponent while ng.getComponent returns null for the same element.
We can also change the state of the component directly from the console but we need to call ng.applyChanges each time we made changes, see below:
It returns the context of an *ngIf or *ngFor for the HTML element, if you have an array of items or like a list we can actually use it to get some insight into what the *ngFor is doing inside of that element.
With ngContext you can check properties like $implicit, index, even, odd, first, last and count.
It retrieves an array of directives from an HTML element, this is very useful to see which directives are affecting an element, like sometimes we have directives that are affected elements through standard attributes.
It returns an array of both HTML (ex. click, change, focus) and host listeners for an HTML element, this is very useful when you want to trigger listeners without actually running through the action.
In above example method returns all listeners for the element div, we can even call the callback function directly from the console, but we need to call ng.applyChanges in order to apply in DOM, see below:
There are also a couple of other methods, I will not really go over them in any depth for this article, but just wanted to make you aware about these methods like ng.getRootComponents and ng.getInjector they are just like to retrieve base root component that’s been bootstrapped by angular as well as getting injector for a specific component.
If you want to know about these methods also. Then comment us. We will create another article with these methods in details.