Agent React DevTools：让 AI Agent 访问 React 内部
- 原文：Agent React DevTools: Give AI Agents Access to React Internals
- 作者：Mike Grabowski（Callstack CTO & Founder）
- 原文发布：2026 年 4 月 14 日
不久前我们发布了 agent-device——一款面向 AI agent 的 CLI，用来在真实设备上获得接近人类的操控能力，从而用端到端方式做自动化测试，也为自动 QA 打开了新思路。
但在不断把 agent 推到极限的过程中，瓶颈也很明显：只能控制设备、读取 UI 树，并不足以做「像样的」QA。工程师调试应用时会看状态、看网络、看导航栈、看性能；DevTools 是日常武器。若仍要求 AI agent 摸黑排查，就太苛刻了。
今天我们正式发布 Agent React DevTools。
为什么要给 Agent 做 DevTools？
工程师测试应用时，不会只盯着屏幕表面，还会检查 state、观察网络请求、核对导航栈、做性能分析。
眼下 AI agent 大多仍依赖视觉/UI 树。这对交互与基础无障碍测试够用，却撑不起深度调试：例如某个按钮因 TanStack Query 尚未 resolve 而没有渲染，只看 UI 树时 agent 只知道界面「卡住」，却拿不到背后的 原因。
要让 AI agent 在复杂的 React 与 React Native 应用里真正会排错，就需要把内部状态与组件结构，以轻量、机器可读的形式直接暴露给它们。
Agent React DevTools 是什么？
Agent React DevTools 是一个 CLI，用来与 React DevTools 直接对接。
与 agent-device 主要面向无障碍/UI 树不同，Agent React DevTools 让 agent 直连 React DevTools：可以查看 React 组件树的实时快照、读取 profiling 数据，并分析 render、commit 与性能热点。
你不必再一边追不必要的重渲染或别的性能瓶颈，一边手工拷贝火焰图——agent 可以与开发者日常使用的同一套 React 工具链协同工作。
若在跑 React 或 React Native，又需要直接触及核心 React state 与组件层级，这就是为此准备的工具。
如何上手？
给 agent 开通访问的方式很直接。
要从 Agent React DevTools 开始探索核心组件树，最简单的是把它作为 skill 加进你的 agent：
npx skills add callstackincubator/agent-react-devtools
这样 agent 就能立刻连接到你正在运行的 React 或 React Native 应用，并检查其内部。
若更希望以独立 CLI 手动运行，或需要别的集成方式，完整说明见仓库：callstackincubator/agent-react-devtools。
第三方插件怎么办？
仅有核心 React 树往往不够：现代 React Native 应用还依赖大量生态。若 agent 需要调试 TanStack Query、检查 MMKV、理解 React Navigation 的路由栈，单靠核心组件树会力不从心。
这里可以配合 Rozenite：它为 React Native DevTools 提供第三方插件扩展能力；随着 Rozenite for Agents 推出，同一批插件也可以暴露给你的 AI agent。
若你今天的 QA 流程已经要求 agent 与第三方插件、框架打交道，Rozenite for Agents 能提供它们所需的扩展上下文。
下一步
我们正把 Rozenite 的第三方插件能力进一步接入 Agent DevTools。不久之后，通过 Rozenite 安装的插件将能在统一的 Agent DevTools CLI 下被 agent 自动发现。
过去十年我们一直在为 React Native 开发者造工具；随着 AI 驱动的 QA 越来越常见，我们也在搭建 agent 完成同类工作时需要的基础设施。
欢迎在真实工作流里试用这些工具、浏览各仓库，并把用法反馈给我们。
