Coding and debugging should flow, not fizzle. Find out what’s new and improved in Chrome DevTools to make your web development and debugging journey fast and easy.
4 themes, 12 improvements,💚 mark the highlights.
*Chapters*
0:00 Introduction
1:35 *Theme – Made UI testing easier*
1:40 Mock HTTP responses 💚
2:35 Debug disappearing elements
3:50 Explore code with better default
5:10 *Theme – Help me understand*
5:54 Spot inactive CSS
6:57 Understand console errors with Gemini 💚
9:00 Evaluate variables with source maps
10:02 *Theme – Let me stay focused*
10:12 Remove source map errors in Console
10:48 Hide Chrome extensions network requests
11:13 Ignore node_modules during debugging 💚
12:22 *Theme – Identify performance opportunities*
12:56 Zoom in performance timelines 💚
13:32 Reorder to prioritize performance tracks
14:10 Collapse repeating performance entries
*Resources*
Mock HTTP responses → https://goo.gle/devtools-override
Understand console errors with Gemini → https://goo.gle/devtools-console-messages-ai
Ignore node_modules during debugging → https://goo.gle/devtools-ignore-list
Zoom in performance timelines → https://goo.gle/devtools-navigate-performance
Speakers: Jecelyn Yeen
Watch more:
Check out all the Web videos at Google I/O 2024 → https://goo.gle/io24-web-yt
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
Products Mentioned: Chrome DevTools
Event: Google I/O 2024