Tracking down a Lightning Web Component

componentlightninglightning-web-components

I'm working on a project where I can't always ask the creator of some LWCs what the name of certain component files are. Documentation is also non-existent..

Are there any best practices or tips and tricks for tracking down an LWC that is exhibiting some bug? I have some Google Chrome addons that make it easier to search for Apex Classes, VF components, Custom Labels, etc. but it doesn't help with LWCs since they can only really be found in VS Code.

Any suggestions would greatly be appreciated.

Best Answer

If you can right-click on the component, just inspect it, and go up the DOM until you find it.

Inspect

Finding the parent component

As you can see here, I right-clicked on the component I wanted to find, clicked Inspect, which highlights the exact element (here, some text), then I went up the tree until I found the component.

There are other ways to get at invisible elements, etc, but this is by far the most common trick I use to find components.

You can also use the Developer Console (F12) in your browser to break on exceptions, browse the source code as it runs (including the JavaScript), and so on. The Developer Console makes it very easy to find things you might be looking for.

To carry on with this example, I can look at the source code for the element above:

Compiled Source Code for my LWC

You do need to scroll down a bit to find the class (highlighted in the picture), and it is compiled, so it will look a bit different, but it's usable to set debug breakpoints, etc.

You can also use the Lightning Inspector, which helps you with rendering cycles, events fired, etc. This is a free browser extension that helps you get a better understanding of your code.

You can also track down the component if you know where it is configured. For example, if you're on a Record Page, you can click the Gear (⚙) icon in Salesforce, then click on Edit Page. You'll be able to find the component pretty easily (at least, the top level component).

Learning all the possible places you can configure components (e.g. Quick Actions, Pages, Utility Bar, etc) will help you find ways to identify components via configuration.

Related Topic