Metric element

This filter works with the LCP, INP and CLS metrics

The metric element filter makes it easy to find which element is the LCP, which element people interacted with when an INP issue happened or causes a CLS. Therefore, these filters are often used for diagnosing and resolving issues related to these three metrics.

With this information, it becomes much easier and faster for the developer to look at what needs to be looked at in the code. Reproducing a layout shift is also ideal this way.

If you're looking to group this data in other ways, you can use our element text dimension and its suggestion to customize it.

Heading to lab data

RUMvision users can easily copy the above individual metric element selectors to use it for further debugging. A typical workflow would be to try and find an element in the DevTools of your browser. This can be convenient for either debugging CLSP, INP and LCP.

In your DevTools, go to the console panel. When you copied an element selector, use it as following in your console:

$$('div.product-info.flex.flex-col.flex-grow')

You will now get a list of all nodes matching this selector.

$$ is supported by Chromium's DevTools and is the shorthand version of document.querySelectorAll.

Escaping special characters

Nowadays, classnames containing exlamation marks (!) or colons (:) aren't an exception anymore. An example:

$$('div.md:hidden')

However, when trying to find elements in the JS Console in DevTools, it will lead to selector syntax errors. You could run into the following error:

Uncaught DOMException: Failed to execute '$$' on 'CommandLineAPI': 'md:hidden' is not a valid selector.

However, that might have been what RUMvision is reporting and you might have just copied and pasted this into your console. If that's the case and when running into the above DOMException, you should escape special characters. This can be achieved by inserting a double backslash before all special characters or using the native CSS.escape function. Your selector should then look as following:

$$( CSS.escape('div.md:hidden') )

INP debugging

We published a blogpost that is describing how our LoAF data can be used to debug INP issues.

Table of Contents