Metric element

The metric element filter makes it easy to find which element is the LCP or causes a CLS. Therefore, on these two metrics, these filters are often used to work toward a solution.

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.

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. Your selector should then look as following:

$$('div.md\\:hidden')