Chrome DevTools: From friction to flow
Вставка
- Опубліковано 13 чер 2024
- 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-mess...
Ignore node_modules during debugging → goo.gle/devtools-ignore-list
Zoom in performance timelines → goo.gle/devtools-navigate-per...
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 - Наука та технологія
Check out all the web sessions at Google I/O → goo.gle/io24-web-yt
Where is the example page of "Bubble Jiggle", I want to try with spot inactive CSS from example.
Shoutout to the presenter. This is the best structured, charming tech presentation I've seen in a long time
My fav part is 'debug disappearing elements', finally no more struggle with that
The presentator is a breath of fresh air! Kudos!
Round of applause for Chrome DevTools, one of my favorite pieces of software! Thanks for such awesome, innovative, and productive tooling.
I like "Mock HTTP responses"
- 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!
The mock feature is just awesome!
My favorites,
- Ignore node_modules during debugging
- Mock HTTP responses
- Debug disappearing elements
- Understand console errors with Gemini
Such a wonderful presentation!
Love all the features! Very relatable!
Great work, guys!
Awesome Jecelyn! 👏👏👏
Holy crap. These are something powerful
incredible updates! excited to use all of these 🙌
Great presentation and great new features!
great work! you guys are the best!
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!
Extremely informative
Wow! 👏👏👏You read our minds good job!! So much better dx
Awesome features and Super awesome presentation 👍
感謝しかない
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.
Great updates!
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.
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.
Would be awesome not to receive error logging reports about chrome extensions as well.
Wow AI in dev tools
"emulate focused page" - where have you been all my life?
pls make a full video on React Performance improvement using devtools.....a humble request 🙏🙏🙏🙏