React Debugging

Essential debugging techniques for React.

React DevTools

Install browser extension: - Chrome/Edge: React Developer Tools - Firefox: React DevTools

Features: - Inspect component tree - View props/state - Edit values live - Track renders

Console Methods

```javascript // Log state changes useEffect(() => { console.log('Count changed:', count); }, [count]);

// Debug object console.table(users);

// Group logs console.group('User Details'); console.log('Name:', user.name); console.log('Age:', user.age); console.groupEnd(); ```

Debugging useEffect

```javascript useEffect(() => { console.log('Effect ran'); return () => console.log('Cleanup'); }, [dependency]); ```

Error Boundaries

```javascript componentDidCatch(error, info) { console.error('Error:', error); console.error('Info:', info); } ```

Performance Profiling

Use React DevTools Profiler: - Record interactions - See render times - Find slow components

Remember

- Use React DevTools - Log state changes - Profile performance - Use Error Boundaries

> Next: Learn best practices!