Using the Web Vitals extension to debug Core Web Vitals issues
Published: 2023-08-20 17:12:01

---
title: Using the Web Vitals extension to debug Core Web Vitals issues
published: true
date: 2023-05-04 00:00:00 UTC
tags: 
canonical_url: https://web.dev/debug-cwvs-with-web-vitals-extension/
---

The [Web Vitals extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) provides easy access to Core Web Vitals diagnostic information to help developers measure, and address Core Web Vitals issues. It supplements the other tools provided by the Chrome team to aid developers in improving the experiences on their websites.

We have updated the extension to provide additional debug information to developers to make it easier to understand and address their performance problems.

## Showing debug information in the console [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#showing-debug-information-in-the-console)

The Web Vitals extension has had a "Console Logging" debug option for some time now. It can be enabled in the Options screen:

 ![Web Vitals Extension Options screen](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format)

Prior to the this last upgrade, this logged the outputs from the [`web-vitals library`](https://github.com/GoogleChrome/web-vitals) (that underpins the extension) in a JSON object:

 ![Web Vitals Extension old console logging](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format)

This object could then be expanded to get the full details, and elements such as the LCP image, could be hovered over to highlight them in the main panel:

 ![Web Vitals Extension old console logging with element highlighting](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format)

This was helpful, but the output format was not particularly user friendly, and we thought we could provide a better developer experience. So we have improved the extension to make the most important information more visible—while still including the full object for those wanting more details.

## New debug information for each metric [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#new-debug-information-for-each-metric)

With the new release, we have added new debug information in a more readable format to help you find and address issues. Different information is provided for each of the metrics, as each one is different.

### LCP debug information [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#lcp-debug-information)

For [Largest Contentful Paint (LCP)](https://web.dev/lcp/), we show both the element, and the breakdown of the 4 phases detailed in our [Optimize LCP](https://web.dev/optimize-lcp/#lcp-breakdown) guide:

 ![Web Vitals Extension new console logging showing LCP elements and sub-parts](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format)

The LCP time (2,876 milliseconds—or about 2.9 seconds) is highlighted in amber as it is in the "Needs Improvement" category.

In this example, we see the `Resource load time` is the longest time, so to improve your LCP time you would look to optimize that - perhaps by avoiding hosting them on a separate domain, or by using smaller images or more efficient formats. In this case it's due to being artificially slowed down to demonstrate the output—web.dev is a fast site 😀

The element can also be hovered over to highlight the image:

 ![Web Vitals Extension new console logging retains element highlighting on hover](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format)

Right clicking on the element also allows you to reveal it in the elements panel.

Here the LCP element is an image, and hovering over that in the console on the right, also highlights that element on the site on the left.

### CLS debug information [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#cls-debug-information)

Shifts contributing to [Cumulative Layout Shift (CLS)](https://web.dev/cls/) are now also listed, and can be hovered over to highlight the relevant element:

 ![Web Vitals Extension new console logging showing each CLS element shift](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format)

The above screenshot shows 2 shifts, the first made up of two elements (when the banner image is loaded and the content beneath it is shifted downloaded), and the second of 4 elements (when the dynamic ad is loaded and most of the page is shifted downwards).

The `h2` element is being hovered over in this screenshot in the console on the right, and you can see this highlights the element on the site on the left.

<aside><p><span><svg width="24" height="24" viewbox="0 0 24 24" role="img" aria-label="Lightbulb" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path> </svg></span><strong>Important</strong></p>
<div> <p> Note that the shifted elements are not the elements <em>causing</em> the shift, but the ones that were <em>impacted</em> by any shifts. </p> <p> However, as per the above example, this should usually be enough to help you identify the cause of the shift by looking at the element which is either above the first shifted element (for inserted elements) or the first element itself (if this is expanded and so shifts itself). </p> </div></aside>
### FID debug information [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#fid-debug-information)

For [First Input Delay (FID)](https://web.dev/fid/) we show the affected element (which again, can be hovered over to highlight it on the page) and the interaction type, along with the full JSON object as usual:

 ![Web Vitals Extension new console logging showing FID target and type](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format)
### INP debug information [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#inp-debug-information)

For [Interaction to Next Paint (INP)](https://web.dev/inp/), we have added two new logs:

- INP - the longest interaction
- Interactions - all interactions

#### INP metric [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#inp-metric)

First up, we highlight the INP metric when it changes:

 ![Web Vitals Extension new console logging showing INP target, event type, and breakdown](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format)

Similar to LCP, the extension breaks down the INP time to show three phases:

1. Input delay
2. Processing time
3. Presentation delay

This helps you identify if the event was slow due to being held up by other events ( **input delay** ), as the event handler itself was slow due to your code ( **processing time** ), if the post-processing render delay was the reason ( **presentation delay** ), or a combination of two or more of these.

#### Interactions [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#interactions)

INP can be slow due to previous interactions blocking the main thread, and thus causing a high input delay. For this reason, we list all interactions in a similar format to the INP logging:

 ![Web Vitals Extension new console logging showing all interactions](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format)

This allows you to "live trace" a website by interacting with it and seeing in the console which interactions, in which combinations, are likely to cause an INP problem.

This also allows you to identify multiple slow interactions, rather than just the largest INP interaction to help you avoid the feeling of chasing your tail when improving your responsiveness.

## Filtering the console logs [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#filtering-the-console-logs)

All this extra information, while useful, can be distracting if you are doing other development unrelated to Core Web Vitals, or are only interested in one particular Core Web Vital at that time.

You can use the [Console filtering options in DevTools](https://developer.chrome.com/docs/devtools/console/reference/#filter) to filter out some or all of the messages:

 ![Using console filtering options](https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format)
- To remove all the extension messages, you can either turn this off in the options or use the `-Extension` filter.
- To look at just LCP you can use the `Web Vitals Extension LCP` filter.
- To look at just INP and interactions you can use the `Web Vitals Extension -LCP -CLS -FID` filter.

We're trying to keep the number of options for this extension down, but do let us know by raising a [GitHub issue](https://github.com/GoogleChrome/web-vitals-extension/issues) if DevTools filtering is not sufficient and you would prefer options here.

## Conclusion [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#conclusion)

We hope you find the new debug options in the latest version of the extension useful and that they make it easier to identify and resolve Core Web Vitals issues, improving the user experiences on your website.

Do remember that your experiences, on your developer computer, may not be representative of what your real users are experiencing. Check out our [previous blog post on how you can view the CrUX field data for your site in the extension](https://web.dev/field-data-in-the-web-vitals-extension/) to get a sense of how aligned your experiences are with your users.

We would be grateful to hear any feedback on these improvements, or any other suggestions on our [GitHub issues tracker](https://github.com/GoogleChrome/web-vitals-extension/issues).

## Acknowledgements [#](https://web.dev/debug-cwvs-with-web-vitals-extension/#acknowledgements)

_Hero image by [Farzad](https://unsplash.com/@euwars?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/p-xSl33Wxyc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_