SuperAPI AI 工具集

react-devtools

前端与建站

查看项目

更新于 10-15 17:31

技能介绍

用途:这是一个供 AI 智能体使用的 React DevTools CLI,连接正在运行的 React 或 React Native 应用,用于运行时调试、检查组件的 props/state/hooks,以及性能诊断。

主要能力:通过 React DevTools 协议连接应用后,可查看完整组件树、按名称搜索组件、查看组件类型统计、列出有错误或警告的组件;检查单个组件的 props、state 与 hooks;进行性能分析,包括最慢组件、重渲染次数、提交时间线和单组件报告,并支持导出为 React DevTools Profiler JSON 及对比两次导出。组件树使用 @c1、@c2 等稳定标签引用,类型用 fn、cls、host、memo、fRef、susp、ctx 等缩写表示,错误与警告以 ✗、⚠ 标注。

使用方式:先运行 agent-react-devtools status 检查连接,如未启动用 agent-react-devtools start 启动守护进程,用 agent-react-devtools wait --connected 等待应用连接。常用命令包括 get tree、get component @c5、find Button、count、errors、profile start/stop/slow/rerenders/report/timeline/commit/export/diff。分析流程通常是 start 后再触发交互,stop 后查看 slow 与 rerenders,再对问题组件用 get component 和 profile report 深入。与 agent-browser 配合时需使用 --headed 模式,因为无头 Chromium 不会正确执行 devtools 连接脚本。

适用场景:调试 React/React Native 应用运行时状态、定位慢交互与多余重渲染、验证修复效果。

限制:应用重载或组件卸载重挂后标签会重置;有另一个 DevTools 连接时 ID 会重新分配,需重新获取组件树;profile 只捕获 start 与 stop 之间的渲染;深层组件树建议用 --depth 限制输出;status 显示 0 个连接应用时树观察命令会以退出码 1 返回,应视为未观察到结果而非正常结果。Web 用户可能需要运行 npx agent-react-devtools init,React Native 用户还需按 setup.md 手动配置。