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.

Transcript

2. JSNATION THE QUALITY OF THE OUTCOME OFTEN DEPENDS ON QUALITY OF THE TOOLS
3. JSNATION CAN AI TRANSFORM COMPLEXITY INTO CLARITY?
4. GET ASSISTANCE IN DEVTOOLS WITH AI
5. UNDERSTAND ERRORS IN DEVTOOLS USING AI
6. ASK ABOUT SOURCES …OR NETWORK OR WEBPERF
8. JSNATION WITH EXTENSIBILITY YOUR TOOLS EVOLVE AS QUICKLY AS YOU DO
9. HIGHLIGHT UPDATES WHEN COMPONENTS RE-RENDER
10. REACT DEVTOOLS BADGES SERVER COMPONENTS!
11. SERVER LOGGING IN NEXT.JS
12. TOGGLE SUSPENSE FALLBACKS WITH REACT DEVTOOLS
13. REACT COMPILER SUPPORT IN DEV TOOLS
14. INSPECT HOOKS WITH REACT DEVTOOLS
15. CUSTOM HOOK DEBUGGING WITH USEDEBUGVALUE
16. JSNATION EXPERIMENT FREELY WITHOUT TOUCHING THE ORIGINAL CODE
17. “EDIT” LIVE PAGES WITH DEVTOOLS
18. AUTO-FIX COLOR CONTRAST
19. “EDIT” LIVE PAGES WITH OVERRIDES
20. OVERRIDE THE CONTENT OF XHR AND FETCH REQUESTS
21. OVERRIDE HTTP RESPONSE HEADERS!
22. PASTE ENTIRE HEADER STRINGS TO OVERRIDE THEM
23. DEV TOOLS TIP: HIDE CHROME EXTENSION REQUESTS
24. DEVTOOLS NOW HAS HUMAN-READABLE HTTP STATUS CODES
25. EMULATE A FOCUSED PAGE IN ELEMENTS > STYLES
26. JSNATION LAB PERFORMANCE DATA SHOW’S WHAT’S POSSIBLE. FIELD SHOWS WHAT’S REAL.
27. MONITOR LOCAL & FIELD PERFORMANCE
28. RECOMMENDATIONS IN LIVE METRICS “Real users may have slower interactions due to slower CPU speeds” “Screen size can influence LCP”
29. GET INSIGHTS RIGHT IN THE PERFORMANCE PANEL LCP by phase Layout shift culprits Third-parties Render blocking requests And more
30. ANNOTATE + SHARE PERFORMANCE FINDINGS
31. DEVTOOLS HAS A BUNDLE ANALYZER
33. What is input responsiveness? FIRST INPUT DELAY TOTAL BLOCKING TIME TIME TO INTERACTIVE INP
34. Click ➡ Open Menu
35. Click ➡ Add to Cart
36. OPTIMIZING INP FOR REACT APPS https://dub.sh/YGjr0UR
37. 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
38. 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)
39. 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
40. 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
41. JSNATION A SEAMLESS USER EXPERIENCE COMES FROM SWEATING THE SMALL STUFF.
42. PUSH THE WEB FORWARD JSNATION
47. ANIMATION INSPECTOR
48. CAPTURE ANIMATIONS AND EDIT @KEYFRAMES LIVE
49. NEXT.JS + VIEW TRANSITIONS Built with https://github.com/shuding/next-view-transitions
50. DEBUGGING LAYERS WITH DEVTOOLS
51. JSNATION WHEN WORK FEELS LIKE PLAY YOU’RE DOING SOMETHING RIGHT.
52. SPICY CONSOLE LOGS
55. DEBUG THE WEB FORWARD JSNATION