DevTools Deep Dive
summary
Performance Panel now surfaces live local metrics and can fetch field data while letting local origins map to production origins so traces compare lab and real users; the network track shows richer tooltips, initiator arrows, and a direct link into the Network panel; traces gain annotations export that preserve labels, arrows and ranges for sharing; flame chart noise is removable via hide/ignore rules; an Ask AI action appears in Canary and Insights visualizes CLS as diamonds with a purple cluster and LCP by phase.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:09Chrome DevTools performance focus
- 2:13Performance panel new features
- 3:57Lab versus field performance data
- 4:40LCP and layout shift improvements
- 5:24Network track upgrades
- 7:51Searching and blocking network requests
- 8:33Annotating performance traces
- 10:16Zooming and focusing traces
- 13:46Exporting annotated traces
- 15:11Customizing flame charts
- 17:17Ignore list in performance panel
- 19:04Extensibility API for tracks
- 21:52AI assistance for analysis
- 23:59Providing feedback and bugs
- 27:46New Insights feature
- 31:12Core Web Vitals insights
- 33:39Third-party impact analysis
- 35:47Navigating multi-page traces
- 36:29Q&A
related talks
28mDevTools & The Performance Tab
30mThe Chrome DevTools Performance Panel
52mDevtools, AI, Insights
23mWhat’s new in DevTools
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
25mDevTools: State of the Union 2022
29mHands on performance debugging with the browser in devtools
50mChrome Developer Tools Deep Dive