Debugging is always been a crucial part of troubleshooting and it is as important as coding for developers, to build good apps, you must be able to debug them effectively, to debug effectively, you must be able to use all of your available tools.

Angular 9 with Ivy new debugging APIs have been added to the global “ng” object to make our life easy, so, first of all, let’s see where can we access these new debugging APIs then we will discuss in detail, If you open up your browser devtools and type “ng”, you’ll see something like this:

Before we start I just want to tell you about $0, as we are going to use this in the rest of the article and demo, $0 is the most recent selected element reference from the Elements inspector or from using inspect Element in browser developer tool.

---

API Methods

Below are some of the main debugging methods provided by Ivy -

ng.getComponent(el)

ng.getOwningComponent(el)

ng.getContext(el)

ng.getDirectives(el)

ng.getListeners(el)

Other than above methods there is one other method “ng.applyChanges(el)” 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 -

ng.getComponent(el): Retrieves the angular component instance from an HTML element, this is very useful for checking what is the state of the app at any moment in time, it is also very helpful for testing any third party component (eg: ng bootstrap, ag grid).

With “ng.getComponent**_” _**you need select exact component element else it will return null as shown below -

getComponent returns “component instance” in case of selecting exact element ()

getComponent returns “null” in case of selecting other elements (

#angular-9 #angular #web-development #debugging #programming