Chrome DevTools: From friction to flow

Опубликовано 16 мая 2024, 14:07

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 → goo.gle/devtools-override
Understand console errors with Gemini → goo.gle/devtools-console-messa...
Ignore node_modules during debugging → goo.gle/devtools-ignore-list
Zoom in performance timelines → goo.gle/devtools-navigate-perf...

Speakers: Jecelyn Yeen

Watch more:
Check out all the Web videos at Google I/O 2024 → goo.gle/io24-web-yt

Subscribe to Google Chrome Developers → goo.gle/ChromeDevs

#GoogleIO

Products Mentioned: Chrome DevTools
Event: Google I/O 2024