DevTools and Debugging

Browser console first

Log values, watch network requests, and read error stacks in the browser developer tools.

console.log({ count, items });

Install React Developer Tools

Add the React DevTools extension for your browser. The Components panel shows the tree, props, and hooks state.

Common beginner errors

• Calling hooks inside conditions or loops
• Updating state directly on objects/arrays instead of copying
• Missing key on list items
• Infinite loops from setting state inside render or an effect with bad deps

Reproduce small

Copy the failing component into a tiny example. Smaller files make mistakes obvious.