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.

--

--

--

Loves JS, java and anything tech.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

LeetCode SQL| 196. Delete Duplicate Emails

JS @ Stitched: Get out of the way of your designer

I will be a full stack developer …

Getting Started with OpenSeadragon in React

Automated UI Tests With React, Jest and Enzyme

Some Important Topics Of JavaScript

How to Assign Variable Values Using the Ternary (?) and Logical AND (&&) Operators in JavaScript.

Blue Steel Bridge by Tim Swaan on Unsplash

Getting started with Camera in React Native

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdu Manaz C A

Abdu Manaz C A

Loves JS, java and anything tech.

More from Medium

Angular Best Practices: Foundation For Performant Angular Apps

Angular Framework

Implementing ApexCharts in Angular

Knowing the differences between Angular vs Angular JS