Advanced debugging and performance optimization tool for React applications. Detect issues, monitor performance, and debug Redux state—all in one extension.
Everything you need to debug and optimize your React applications
Detect direct state mutations, missing keys, and index-as-key anti-patterns automatically.
Track component re-renders, identify excessive renders, and find performance bottlenecks.
Find missing cleanup functions and dependency issues in useEffect hooks.
Track Cumulative Layout Shift in real-time and identify layout shift sources.
View state tree, dispatch actions manually, and debug Redux state changes.
Monitor memory usage, detect leaks, and track heap size over time.
Get up and running in minutes
The fastest way to get started. Run a single command:
npx react-debugger
Then load the extension in Chrome:
chrome://extensions/Clone and build the extension yourself:
git clone https://github.com/hoainho/react-debugger-extension.git
cd react-debugger-extension
npm install
npm run build
Then load the dist folder in Chrome using the same steps above.
Open DevTools on any React application and find the "React Debugger" tab. Start debugging immediately.
Open DevTools → React Debugger tab
React Debugger is open source and welcomes contributions. Report bugs, suggest features, or submit pull requests.