Duration: 6:16

36,193 views

519

Let’s dive into what’s new in DevTools for Chrome 121-123. Learn how to debug disappearing elements, navigate performance with breadcrumbs and more!

Chapters:
0:00 Intro
0:14 Emulate a focused page in Styles tab
1:23 Performance: Breadcrumbs in timeline
2:10 Performance: Enhanced Interactions track to debug INP
3:00 Performance: Event initiators in Main track
3:39 New shortcut to set logpoint
4:02 Option to toggle all breakpoints
4:16 Default indentation markers in Editor
4:28 Enhanced source maps to debug source variables
5:19 Bonus tip: Copy URL as Node.js script and more

Resources:
Interaction to Next Paint → https://goo.gle/3tFrvUe
Chrome 121 → https://goo.gle/495vX0z
Chrome 122 → https://goo.gle/3PqtruQ
Chrome 123 → https://goo.gle/43tyQ9Z

Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Chrome DevTools → https://goo.gle/chromedevtools

Catch more videos → https://goo.gle/NewInDevTools
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

#DevTools #ChromeForDevelopers #Chrome



Speaker: Jecelyn Yeen
Products Mentioned: Chrome