Monitor live Core Web Vitals in Chrome DevTools #DevToolsTips // TRAIN BRAIN

Monitor live Core Web Vitals in Chrome DevTools #DevToolsTips

Barry shows Jecelyn the new Performance panel landing page featuring a live view of your local Core Web Vitals performance. Learn how it can be used to debug LCP issues, use CrUX data to see if you’re debugging a similar experience to your users, and measure INP in real time as you interact with the page.
Chapters:
0:00 - Introduction
0:25 Intro to Live Metrics panel
0:47 The Core Web Vitals
1:10 Investigating slow LCP issues
1:32 Checking your developer experience matches
1:54 Show Chrome User ExperienceReport (CrUX) data
3:00 How field data helps in debugging
3:18 How query params are handled in CrUX data
3:50 Other things to keep in mind when looking at field data
4:24 Identifying INP issues my mentoring interactions
Resources:
Blog post → https://goo.gle/3NDozRD
Documentation → https://goo.gle/3NBiXYf
Watch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#DevToolTips #ChromeForDevelopers #Chrome
Speaker: Jecelyn Yeen
Products Mentioned: Chrome DevTools

Chrome for Developers

Making the web more awesome....

Accurately segment text in different language with Intl.Segmenter

CSS highlight inheritance is changing

Squishy Wasm apps using Extism with Dylibso's Steve Manuel - WasmAssembly

Live metrics in Performance panel #DevToolTips

Modern CSS for sites: View transitions, scroll effects, and more!

CSS light-dark function

New in Chrome 131: external CSS highlight inheritance, improvements to details, and more!

ml5.js - Friendly machine learning for the web

Web AI on next generation AI PCs

The Web Neural Network (WebNN) API: Where we are and what's Next

Transformers.js: State-of-the-art Machine Learning for the web

Web AI Summit 2024: State of client side machine learning

Build confidently with Baseline

Monitor live Core Web Vitals in Chrome DevTools #DevToolsTips

Supercharge your forms with the Constraint Validation API

CSS property: box-decoration-break

The future of third-party cookies

A deep dive into WebAssembly with Thomas Nattestad - WasmAssembly

Preparing for Chrome’s third-party cookie changes

What are third-party cookies?

Behind the Chrome Web Store review process

Manage your JavaScript with Import Map

Document picture-in-picture improvements

Navigating the future of third-party cookies

An experience for user choice with third-party cookies

What is a Remote Hosted Code?

Test your site for third-party cookie breakages

Elevate UX with the Screen Wake Lock API

New in Chrome 130: Document Picture-in-Picture, CSS nesting improvements, and more!

Customize performance data in DevTools with extensibility API #DevToolsTips

Chrome shifts to user choice for third-party cookies

Special episode on the June meeting of the WebAssembly Community Group - WasmAssembly

Time to check your site for third-party cookies

Third-party cookies and the era of user choice

Build a custom chrome cursor

Intro to Long Animation Frames (LoAFs)

Subgrid: Stress-free, flexible grid layouts

Looking back on Season 5

Real-time metrics in the Performance panel #DevToolsTips

An introduction to WebAssembly

091: Season 5 wrap-up

Interactive pop-ups using dialog element and popover attribute

Visit scroll-driven-animations.style

Animate intrinsic sized elements with interpolate-size

Real-time metrics in the Performance panel

Exploring the Bytecode Alliance with Cosmonic's Hailey Bayes - WasmAssembly

090: Scroll-driven animations

Anchoring experiences

What are view transitions?

Yield long tasks with scheduler.yield()

Built-in AI: Gemini Nano in Chrome

089: View transitions

State queries in CSS

What’s new in DevTools: Chrome 127-129

New in Chrome 129: Yield long tasks, animate intrinsic sized elements, and more!

088: State queries

Simulate low storage quota with DevTools #DevToolsTips

Over-Easy Anchor + Popover Mini Web Machine

Promise.try

Caching demystified: Inspect, clear, and disable caches #DevToolsTips

Distinguishing the anchor from the positioned element

Line-breaks for the ruby element

A promising feature: JavaScript Promise Integration with Francis McCabe - WasmAssembly

087: Anchor positioning

Learn how to transition dialog elements with the Pop n’ Lock Mini Web Machine

New in Chrome 128: line-breaks for the ruby element, Promise.try, and more

What are content scripts?

Top 10 web updates from Google I/O ‘24

Say goodbye to the & symbol for nesting bare HTML elements

Create bounce and spring effects with linear()

String built-ins with Mozilla's Ryan Hunt - WasmAssembly

085: Linear easing function fun

How to inspect disappearing elements

How to add a custom cursor to Chrome

Pop n' Lock Dialog Mini Web Machine

CSS font-size-adjust

Freeze screen & inspect disappearing elements #DevToolsTips

New in Chrome 127: cross-document view transitions, CloseWatcher API re-enabled, and more

Testing best practices for web apps

Professional text wrapping with one line of CSS