开源 React DevTools 扩展，用于实时发现性能和状态问题

Source: Dev.to

涵盖内容

• 状态与 UI 问题：直接状态变异、缺少键、使用索引作为键
• 渲染跟踪：突出显示渲染次数过多的组件
• 副作用：缺少清理以及可疑的依赖
• 实时 CLS 监控
• React 事件的时间线视图
• 内存监控：用于检测潜在泄漏
• Redux：状态树视图 + 手动分发动作

工作原理

• 从 React DevTools 全局钩子 / Fiber 树读取
• 分析进行节流以降低开销
• 遍历受限以保持轻量
• 仅在打开 DevTools 面板时注入

安装

npx react-debugger

Then load the unpacked extension in chrome://extensions.

链接

• NPM:
• Open‑source repository:
• Demo:

我想要的反馈

• 效果警告在实际项目中是有用还是太嘈杂？
• “渲染次数过多”的合理默认阈值是多少？
• 还有哪些你希望在 DevTools 中出现的 React 调试信号？