React

Debugging Commands

Debug React applications with React DevTools, profiling, and error boundaries. Inspect component trees, track re-renders, and diagnose performance issues.

3 commands

Pro Tips

Install React DevTools browser extension for component tree inspection, props/state viewing, and profiling.

Use the Profiler tab in React DevTools to record and analyze render timings — find unnecessary re-renders.

Enable 'Highlight updates when components render' in React DevTools settings to visually spot re-renders.

Common Mistakes

React DevTools shows different information in development vs production. Profile in production mode for accurate perf data.

StrictMode in development renders components twice on purpose. This is expected — don't optimize for it.

Commands

Enable Node.js inspector

$ npm run dev -- --inspect

Start Next.js dev server with Node.js debugging enabled (chrome://inspect).

Enable debug mode

$ NEXT_PUBLIC_DEBUG=true npm run dev

Start Next.js with debug logging enabled for troubleshooting.

Build with React profiling

$ npm run build -- --profile

Build Next.js with React profiling enabled for performance analysis.