agent-react-devtools

CLI that connects to a running React or React Native app via the React DevTools protocol and exposes the component tree, props, state, hooks, and profiling data in a token-efficient format.

Core Workflow

1. Ensure connection — check agent-react-devtools status. If the daemon is not running, start it with agent-react-devtools start. Use agent-react-devtools wait --connected to block until a React app connects.
2. Inspect — get the component tree, search for components, inspect props/state/hooks.
3. Profile — start profiling, trigger the interaction (or ask the user to), stop profiling, analyze results.
4. Act — use the data to fix the bug, optimize performance, or explain what's happening.

Essential Commands

Daemon

agent-react-devtools start              # Start daemon (auto-starts on first command)
agent-react-devtools stop               # Stop daemon
agent-react-devtools status             # Check connection, component count, last event