Let’s goooo~ Explore the latest DevTools features in Chrome 130-132! Join Jecelyn, Oliver, and Matthias as they dive deep into the updates and show you how to use them.
Chapters:
0:00 Intro
0:25 Debug CSS with AI Assistance
1:16 Ask AI about network, sources, performance
1:57 Spot scrollable elements with scroll badge
2:23 View performance insights
2:54 Annotate performance traces
3:25 Inspect extension storage
4:57 Better console stack traces
5:29 Bonus tip: Export network HAR with sensitive data
Resources:
AI Assistance quickstart → https://goo.gle/wndt-ai-quickstart
Scroll badge → https://goo.gle/swe-devtools-scroll-badge
Annotate performance traces → https://goo.gle/4fMVRdm
Extension storage → https://goo.gle/3ZofhhQ
Demos:
CinemAI → https://goo.gle/49yzMNG
Scroll badge → https://goo.gle/4iwF2FE
What’s New blog posts:
130 → https://goo.gle/new-in-devtools-130
131 → https://goo.gle/new-in-devtools-131
132 → https://goo.gle/new-in-devtools-132
Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Matthias Rohmer → https://goo.gle/matthiasrohmer
Oliver Dunk → https://goo.gle/oliverdunk_
Chrome DevTools → https://goo.gle/chromedevtools
Watch more New in Devtools → https://goo.gle/NewInDevTools
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#DevTools #ChromeForDevelopers #Chrome
Products Mentioned: Chrome