---
title: "Metric element (Help Center / Filters / Metric)"
ai_context: "Use this article for questions about the RUMvision Metric element filter, identifying the DOM element involved in Largest Contentful Paint (LCP), Interaction to Next Paint (INP) or Cumulative Layout Shift (CLS), and turning field-data findings into element-level debugging. It covers finding LCP candidates, interaction targets and layout-shifting elements, copying selectors into browser DevTools, using `$$()` or `document.querySelectorAll()`, handling selectors with special characters, escaping invalid CSS selectors and using `CSS.escape()`. Relevant for questions about LCP elements, INP interaction targets, CLS culprits, DOM selectors, reproducing layout shifts, debugging metric elements in Chrome DevTools, selector syntax errors, utility classes containing `:` or `!`, element text grouping and using LoAF data for deeper INP investigation."
canonical: "https://www.rumvision.com/help-center/filters/metric/metric-element/"
---

Breadcrumbs: [Home](https://www.rumvision.com/?format=md) > [Help Center](https://www.rumvision.com/help-center/?format=md) > [Filters](https://www.rumvision.com/help-center/filters/?format=md) > [Metric](https://www.rumvision.com/help-center/filters/metric/?format=md) > Metric Element

# Metric element

> This filter works with the [LCP](https://www.rumvision.com/help-center/glossary/metrics/largest-contentful-paint/?format=md), [INP](https://www.rumvision.com/help-center/glossary/metrics/interaction-to-next-paint/?format=md) and [CLS](https://www.rumvision.com/help-center/glossary/metrics/cumulative-layout-shift/?format=md) 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.

![metric-element-filter.png](https://www.rumvision.com/file/upload/img/screenshot/metric-element-filter.png)

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](https://www.rumvision.com/help-center/filters/metric/element-text/?format=md#customizing-element).

## 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](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#parameters). This can be achieved by inserting a double backslash before all special characters or using the native [`CSS.escape` function](https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static). 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](https://www.rumvision.com/blog/using-your-rum-loaf-data-for-inp-debugging-purposes/?format=md).