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.

Answer 2

It seems that ng.probe($0).componentInstance doesn't work any more with Ivy. What worked with me though is ng.getOwningComponent($0) .

• Inspect an element inside the looked-for component.
• While element is still selected, type ng.getOwningComponent($0) in the console.