Chrome DevTools: From friction to flow

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*

Speakers: Jecelyn Yeen

Watch more:

#GoogleIO

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

[MRKS]

Shoutout to the presenter. This is the best structured, charming tech presentation I've seen in a long time

[mohammadshehadeh]

My fav part is 'debug disappearing elements', finally no more struggle with that

[maabed]

The presentator is a breath of fresh air! Kudos!

[PRonYouTube]

Round of applause for Chrome DevTools, one of my favorite pieces of software! Thanks for such awesome, innovative, and productive tooling.

[YatinPatelAhmedabad]

I like "Mock HTTP responses"

[silvrArrow]

- Debug disappearing elements is going to get a lot of use!
- The mock data is awesome! No more need to mock that in code.
- Last but not least, looking forward to the perf enhancements, looks like it's starting great!

[paulpandi]

My favorites,
- Ignore node_modules during debugging
- Mock HTTP responses
- Debug disappearing elements
- Understand console errors with Gemini

[shangyilim]

Love all the features! Very relatable!

[johnmcgg]

incredible updates! excited to use all of these 🙌

[sergiomartin]

Great presentation and great new features!

[fruyament]

Awesome features and Super awesome presentation 👍

[javiasilis]

Holy crap. These are something powerful

[thevutv]

Wow! 👏👏👏You read our minds good job!! So much better dx

[maxbarbul]

Great updates! This really feels driven by real experience and feedback. Presentation is high class! In the beginning it felt a little bit overplayed to my taste, like Dori cartoon. Anyways, the contents is gold!

[chinmayghule]

I understood most part except the performance one. Frankly speaking I've never used it since I don't to what to do with it, and the thing I used closest to it was the React Devtools Profiler. Dear Chrome Devtools team, please make the performance panel noob-friendly for people like me.

[aram]

Years go by and I am still LOST IN DATA when I look into Performance panel. Also, a point of friction is when I need to troubleshoot accessibility on my web page. I wish there was a way to specify a custom set of HTML attributes to be shown, anything else (esp. framework-specific ones) filtered out as noise.

[littleoddboy]

googlers are build so many perfect stuffs, and I'm just happy with a single thing that just hides all the annoying warnings of my chrome extensions.

[Ostap]

Would be awesome not to receive error logging reports about chrome extensions as well.

[dogoku]

"emulate focused page" - where have you been all my life?

[RandomRaju-zbvf]

pls make a full video on React Performance improvement using humble request 🙏🙏🙏🙏