React DevTools CLI for AI agents. Use when the user asks you to debug a React or React Native app at runtime, inspect component props/state/hooks, diagnose render performance, profile re-renders, find slow components, or understand why something re-renders. Triggers include "why does this re-render", "inspect the component", "what props does X have", "profile the app", "find slow components", "debug the UI", "check component state", "the app feels slow", or any React runtime debugging task.
A command-line tool for AI agents that connects to a running React or React Native app through the React DevTools protocol and exposes the component tree, props, state, hooks, and profiling data in a token-efficient format. It is intended for runtime debugging tasks such as inspecting component props, state, and hooks, diagnosing render performance, profiling re-renders, finding slow components, and explaining why something re-renders.
The core workflow is to ensure a connection, inspect, profile, and then act. Connection is managed through a daemon with commands like start, stop, and status, plus wait --connected to block until a React app connects and wait --component to block until a named component appears. Component inspection includes get tree for the full hierarchy (optionally limited with --depth), get component to see props, state, and hooks for a specific component, find to search by display name with an optional --exact match, count to tally by type, and errors to list components with warnings or errors. Every component receives a stable label such as @c1 or @c2 used to reference it in follow-up commands, and type abbreviations distinguish function, class, host, memo, forwardRef, Suspense, and context nodes.
Profiling commands cover starting and stopping recording, listing slowest components by average render time, showing the most re-rendered components, producing a detailed report for one component, browsing the commit timeline with --limit and --offset pagination and sorting, drilling into a specific commit, exporting to React DevTools Profiler JSON, and diffing two exports. Profiling output annotates render causes such as props-changed, state-changed, hooks-changed, parent-rendered, force-update, and first-mount, and can show exactly which keys changed. Common patterns include waiting for reconnection after a reload, diagnosing slow interactions, and verifying a fix by comparing runs; when driving the app with agent-browser, headed mode is required because headless Chromium does not run the connect script properly, and component labels reset when the app reloads or components remount.
It is for React and React Native runtime debugging: inspecting component props, state, and hooks, diagnosing render performance, profiling re-renders, finding slow components, and understanding why something re-renders.
Check agent-react-devtools status, start the daemon with start if needed, and use wait --connected to block until a React app connects. There is also wait --component to block until a named component appears.
Every component gets a stable label like @c1 or @c2 that you use to reference it in follow-up commands such as get component or profile report. The labels reset when the app reloads or components unmount and remount.
Profiling output annotates render causes such as props-changed, state-changed, hooks-changed, parent-rendered, force-update, and first-mount, and when available a changed: suffix shows exactly which props, state keys, or hooks triggered the render.
Yes. You must use headed mode with agent-browser, because headless Chromium does not execute the ES module connect script the same way as a real browser, which prevents the devtools connection.
Quick Setup:
.claude/skills/Repository
callstackincubator/agent-react-devtools