What’s new in DevTools

on YouTube ↗23m

" summary

Chrome DevTools now surfaces web.dev metrics (FCP, LCP, FID, TTI, Total Blocking Time and Cumulative Layout Shift) directly in the Performance panel, highlights the Largest Contentful Paint element, and flags long tasks using CPU throttling (example trace shows 168ms task and 230ms total blocking time; target is <50ms per task). An Issues tab groups SameSite and mixed‑content problems with links to fixes. WebAssembly debugging uses DWARF and the baseline compiler so developers can set breakpoints in original C (variable inspection coming). Rendering tools emulate extreme color‑vision deficiencies.

AI-written summary · about

" chapters (10)

1. 0:00Intro
2. 0:40Web Dev Metrics
3. 2:45Highlevel metrics
4. 4:34Red triangles
5. 5:54Total blocking time
6. 6:55Interactive time
7. 7:57Layout shifting
8. 10:36Summary
9. 15:45Issues
10. 17:49Color vision deficiency emulation

" related talks

• 28mDevTools & The Performance TabHenri Helvetica · React Miami 2025
• 48mWhat’s New in Chrome DevToolsAddy Osmani · Web Unleashed 2015
• 11mWhat's new in DevToolsJecelyn Yeen · Chrome Dev Summit 2020
• 30mThe Chrome DevTools Performance PanelRick Viscomi · SquiggleConf 2024
• 28mGetting down to brass tacks: Using chrome dev tools to level up your applicationsKen Wheeler · React Miami 2023
• 40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!Jack Franklin · Pixel Pioneers 2025
• 25mDevTools: State of the Union 2022Jecelyn Yeen · Google I/O 2022
• 35mOptimise your Web Development WorkflowUmar Hansa · ffconf 2016