Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Chrome DevTools: State of the Union 2024 - Debu...

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.

Addy Osmani

November 25, 2024
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. RECOMMENDATIONS IN LIVE METRICS “Real users may have slower interactions

    due to slower CPU speeds” “Screen size can influence LCP”
  2. GET INSIGHTS RIGHT IN THE PERFORMANCE PANEL LCP by phase

    Layout shift culprits Third-parties Render blocking requests And more
  3. REACT 18+ CONCURRENT RENDERING IMPACT From sync to concurrent rendering

    • Rendering is interruptible • Enables better prioritization of user interactions • Impact: • Desktop: 46% improvement (450ms → 240ms) • Mobile: 54% improvement (1.1s → 500ms https://dub.sh/YGjr0UR
  4. BREAKING UP LONG TASKS Yield to the main thread between

    operations https://dub.sh/YGjr0UR • Track events were causing main thread blocking • Solution: Yield to main thread between operations • Impact • Implementation using setTimeout(0) or scheduler API • 19% improvement in INP (saved ~120ms)
  5. REACT RE-RENDERING OPTIMIZATIONS • Simplify complex custom hooks causing re-rendering

    • Replace React Router APIs with window.location/history • Colocate functions within useE ff ect • Memoize selectors properly • Impact • Another 45% INP improvement Before After
  6. FINAL RESULTS & KEY RECOMMENDATIONS Pro fi ling with Chrome

    & React DevTools can help lead to signi fi cant gains • Results: • INP General: 69% improvement (850ms → 260ms) • INP Mobile: 72% improvement (1.1s → 300ms) • INP Desktop: 66% improvement (440ms → 150ms) • Key Recommendations: • Simplify abstractions (smaller hooks, colocated state) • Defer non-UI related code • Properly memoize selectors • Break up long tasks https://dub.sh/YGjr0UR