How to find the Lightning Component API name from Lightning App Builder?

Question

If I go to an App in Lightning Experience, and then select a tab on this app, the URL will read [domainName].force.com/one/one.app#/n/LabelNameOfLightningPage. In other words, whatever Lightning Page I am on, the label name of that Lightning Page will be displayed in the URL.

Now, I want to look at the Lightning Components that make up this page. If I go to Setup | Lightning App Builder, I navigate to the Lightning Page in question and I select 'Edit'. I am able to see all of the Lightning Components which make up this Lightning Page.

If I click on a Lightning Component, on the right hand side, it reads 'Page > LabelNameOfLightningComponent'.

I now go to Setup | Lightning Components to search for 'LabelNameOfLightningComponent' however, there is no match.

By trial and error, I found the Lightning Component in question and in the Design resource of the bundle, the label name is 'LabelNameOfLightningComponent'.

So it is difficult to navigate to the relevant Lightning Component that is on a Lightning Page. I have to know what the label name of the Design resource is.

Is there an easier way for me to find out what the API name of a Lightning Component is from clicking on a Lightning Page via Lightning App Builder?

Answer 1

There is the Salesforce Lightning Inspector for Google Chrome that allows you to inspect the Lightning DOM, which will give you the namespace, name, and attributes for all Lightning components in a page. I know you asked for a Lightning App Builder way of doing this, but I've found this an easier way to inspect how a page a constructed. This method also currently even exposes internal chrome elements (e.g. visualBuilder:appBuilder for the Lightning App Builder), although compilation security will prevent you from being able to use those internal, undocumented components directly.