Debugging React apps often feels like detective work — the symptoms are obvious but the root cause still takes too long to find. I kept seeing the same patterns: missing effect cleanups, accidental state mutations, and components re-rendering far too often.
So I built an open‑source Chrome DevTools extension that hooks into the React Fiber tree and flags those issues while you’re developing.
What it covers
- State & UI issues: direct state mutation, missing keys, index-as-key
- Render tracking: highlights components with excessive re-renders
- Effects: missing cleanup and suspicious dependencies
- CLS monitoring in real time
- Timeline view of React events
- Memory monitoring for potential leaks
- Redux: state tree view + manual action dispatch
How it works
- Reads from React DevTools global hook / Fiber tree
- Analysis throttled to reduce overhead
- Traversal capped to keep it lightweight
- Only injects when DevTools panel is opened
Install
npx react-debugger
Then load unpacked in chrome://extensions.
Links
Npm: https://www.npmjs.com/package/react-debugger
Opensourced: https://github.com/hoainho/react-debugger-extension
Demo: https://jumpshare.com/share/Z1Hd1eS69yNqrVKn0qzw
Feedback I’m looking for
- Are the effect warnings useful or too noisy in real projects?
- What’s a reasonable default threshold for “too many re-renders”?
- Any other React debugging signals you wish existed in DevTools?
Top comments (0)