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

React Summit US 2024 #ReactSummitUS #GitNation Website – https://reactsummit.us/ Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://gitnation.com/events/react-summit-us-2024 Talk: Chrome DevTools: State of the Union 2024 - Debugging React & Beyond Get ready for an exciting journey through the latest in Chrome DevTools and React DevTools as we dive into the State of the Union for 2024. We'll explore the powerful tools and features that continue to empower developers to craft high-performance web experiences. We’ll also touch on the latest in React debugging including updates like React Compiler support. Whether you're a veteran user or new to the DevTools magic, this session will equip you with actionable tips and insights to level up your development process. Timestamps: 00:00 Introduction to React and Chrome DevTools 03:36 AI in the Console & React DevTools Extensibility 05:49 Server Logging & React DevTools Features 07:28 Experimenting with Browser DevTools 09:50 Advanced Overrides and Header Control 11:00 Advanced Network Panel and Performance Tooling 13:18 Enhancing Performance Analysis and Collaboration 15:38 Analyzing JavaScript Bundles and Optimizing Pages 16:39 Core Web Vitals and Input Responsiveness 17:51 Veo Case Study: Optimizing React App 19:57 Debugging UI with DevTools 21:19 Enhancing Animations with DevTools 23:10 Debugging Tools and Fun Logging Tips