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. Use when this capability is needed.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
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. Use when this capability is needed.
metadata
{"author":"callstackincubator"}
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
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.
Inspect — get the component tree, search for components, inspect props/state/hooks.
Profile — start profiling, trigger the interaction (or ask the user to), stop profiling, analyze results.
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
agent-react-devtools --connected
agent-react-devtools --component App
# Check connection, component count, last event
wait
# Block until a React app connects
wait
# Block until a component appears
Component Inspection
agent-react-devtools get tree # Full component hierarchy (labels: @c1, @c2, ...)
agent-react-devtools get tree --depth 3 # Limit depth
agent-react-devtools get component @c5 # Props, state, hooks for a specific component
agent-react-devtools find Button # Search by display name (fuzzy)
agent-react-devtools find Button --exact # Exact match
agent-react-devtools count # Count by type: fn, cls, host, memo, ...
agent-react-devtools errors # List components with errors or warnings
Performance Profiling
agent-react-devtools profile start # Start recording
agent-react-devtools profile stop # Stop and collect data
agent-react-devtools profile slow # Slowest components by avg render time
agent-react-devtools profile slow --limit 10 # Top 10
agent-react-devtools profile rerenders # Most re-rendered components
agent-react-devtools profile report @c5 # Detailed report for one component
agent-react-devtools profile timeline --limit 10 # First 10 commits (use --limit; uncapped can dump 300+ lines)
agent-react-devtools profile timeline --limit 10 --offset 10 # Next 10 (pagination)
agent-react-devtools profile timeline --sort duration --limit 5 # Top 5 most expensive commits
agent-react-devtools profile timeline --sort timeline --limit 5 # Explicit chronological order (same as default)
agent-react-devtools profile commit 3 # Detail for commit #3
agent-react-devtools profile export profile.json # Export as React DevTools Profiler JSON
agent-react-devtools profile diff before.json after.json # Compare two exports
Understanding the Output
Component Labels
Every component gets a stable label like @c1, @c2. Use these to reference components in follow-up commands:
When specific changed keys are available, a changed: suffix shows exactly which props, state keys, or hooks triggered the render (e.g. changed: props: onClick, className state: count hooks: #0).
Common Patterns
Wait for the app to connect after a reload
agent-react-devtools wait --connected --timeout 10
agent-react-devtools get tree
Use this after triggering a page reload or HMR update to avoid querying empty state.
Diagnose slow interactions
agent-react-devtools profile start
# User interacts with the app (or use agent-browser to drive the UI)
agent-react-devtools profile stop
agent-react-devtools profile slow --limit 5
agent-react-devtools profile rerenders --limit 5
Then inspect the worst offenders with get component @cN and profile report @cN.
Use profile commit <N> to drill into a specific commit once you spot a spike.
Find a component and check its state
agent-react-devtools find SearchBar
agent-react-devtools get component @c12
Verify a fix worked
agent-react-devtools profile start
# Repeat the interaction
agent-react-devtools profile stop
agent-react-devtools profile slow --limit 5
# Compare render counts and durations to the previous run
Using with agent-browser
When using agent-browser to drive the app while profiling or debugging, you must use headed mode (--headed). Headless Chromium does not execute ES module scripts the same way as a real browser, which prevents the devtools connect script from running properly.
agent-browser --session devtools --headed open http://localhost:5173/
agent-react-devtools status # Should show 1 connected app
Important Rules
Labels reset when the app reloads or components unmount/remount. After a reload, use wait --connected then re-check with get tree or find.
status first — if status shows 0 connected apps, the React app is not connected. The user may need to run npx agent-react-devtools init in their project first.
Headed browser required — if using agent-browser, always use --headed mode. Headless Chromium does not properly load the devtools connect script.
Profile while interacting — profiling only captures renders that happen between profile start and profile stop. Make sure the relevant interaction happens during that window.
Use --depth on large trees — a deep tree can produce a lot of output. Start with --depth 3 or --depth 4 and go deeper only on the subtree you care about.
