Can Chrome Dev tools help figure out Angular component name?

Question

Assuming that I have the Angular source code for the application, how can I use Chrome Developer tools to figure out the name of a specific Angular component?

For example, let's say the application makes use of a popup dialog box and I want to find the source code for the dialog box. Can Chrome Developer tools help me figure out then name of the component?

So far I have been drilling down the elements tree in Chrome Dev tools and when I think I have the element for the dialog box I search the angular code for the HTML. However, I often get false matches and it is time consuming. I was wondering if there was a better way I might not be familiar with.

Answer 1

Use Augury:

You can use Augury. It's a Chrome and Firefox Extension Managed by the folks at Rangle.

Once you've installed it, just open Chrome Dev Tools(assuming you're using Chrome), and it will be visible as one of the Tabs in the tools.

You can simply select a Component from the Web page and it is going to accurately mark the Component that you were on as of then.

Use ng.probe($0).componentInstance

You can select a component using the Element Selector from the Elements Tab. And then go to the Console Tab, and type in:

ng.probe($0).componentInstance

This is going to give you the Component Instance of the recently selected Component along with its name and then you can look for it accordingly. Something like this:

NOTE: There methods would only work in DEV mode.