Docs

Docs

Component Locator

Use Component Locator to identify components in views and find their source code in an IDE.

You can use the component locator to identify components, and to find their code when running applications in development mode. The component locator opens the corresponding source code in your IDE when you click a component (e.g., a Button in a view).

Enabling Component Locator

Start by running your Vaadin Flow application project in development mode. Click on the Vaadin symbol }> at the bottom right-hand corner of your browser window — as indicated in the screenshot here.

The Vaadin symbol location in development mode.

Next, go to the Code tab from the menu (see screenshot) and click on Find component in code to initialize the Component Locator.

The Code tab viewed in the Dev tools menu.

Using Component Locator

Now that the Component Locator has been enabled, it’s ready to be used. To highlight a component in red and identify it, hover your pointer over one in the view. The component names appear in a list at the bottom right-hand corner of your browser window. You can use the arrow keys to navigate that list.

Component Locator highlighting and identifying the Button component.

Finally, click on the highlighted component to open the relevant source code in your IDE, as you can see in the screenshot here:

The Button component and corresponding source code.

Disable Component Tracking

Component tracking isn’t an expensive operation, but it may at times be useful to disable it. Be aware that with component tracking disabled, the Component Locator tool cannot identify any components. To disable tracking, set the vaadin.devmode.componentTracker.enabled configuration parameter to false. See Configuration Properties for more information about setting configuration parameters.