Chrome DevTools: State of the Union 2024 - Debugging React & Beyond

on YouTube ↗27m

" summary

Live demos show a new Gemini assistant in DevTools that edits CSS and explains errors from console context, plus AI queries against sources, network and flame graphs; React DevTools surfaces server components (v6+), server logging, and React Compiler memo badging; persistent local overrides and HTTP header overrides let developers mock requests; built-in bundle treemap and trace annotation aid collaboration; animation inspector captures in-progress animations; a Veo case study claims a 69% INP improvement with React 18 upgrades, task yielding, and hook optimizations.

AI-written summary · about

" chapters (13)

1. 0:00Introduction to React and Chrome DevTools
2. 3:36AI in the Console & React DevTools Extensibility
3. 5:49Server Logging & React DevTools Features
4. 7:28Experimenting with Browser DevTools
5. 9:50Advanced Overrides and Header Control
6. 11:00Advanced Network Panel and Performance Tooling
7. 13:18Enhancing Performance Analysis and Collaboration
8. 15:38Analyzing JavaScript Bundles and Optimizing Pages
9. 16:39Core Web Vitals and Input Responsiveness
10. 17:51Veo Case Study: Optimizing React App
11. 19:57Debugging UI with DevTools
12. 21:19Enhancing Animations with DevTools
13. 23:10Debugging Tools and Fun Logging Tips

" related talks

• 25mDevTools: State of the Union 2022Jecelyn Yeen · Google I/O 2022
• 28mModern Web DebuggingJecelyn Yeen · JSNation 2023
• 11mWhat's new in DevToolsJecelyn Yeen · Chrome Dev Summit 2020
• 26mReact Developer toolingBrian Vaughn · React Conf 2019
• 50mModern Web DebuggingJecelyn Yeen · SmashingConf Freiburg 2023
• 43mModern web debugging with devtoolsJecelyn Yeen · BrazilJS Conf 2024
• 37mAll tooled up and nowhere to go?Christian Heilmann · HalfStack Online May 2020
• 32mWhy don’t browser dev tools understand your code?Steven Schkolne · Conf42 JavaScript 2023