| name | react-devtools |
| description | Inspect and profile React Native component trees from agent-device. Use when debugging React Native props, state, hooks, render causes, slow components, excessive re-renders, or questions like why a component re-rendered. |
react-devtools
Use this skill when the task needs React Native internals that are not visible in the accessibility tree: component hierarchy, props, state, hooks, render causes, or profiling data.
Run commands through agent-device react-devtools. The command dynamically runs pinned agent-react-devtools@0.4.0 and passes arguments through 1:1.
The first run may download the pinned package from npm. agent-device global flags work before or after react-devtools; use -- before downstream flags only when they intentionally share an agent-device global flag name.
Default flow
- Use
agent-device to open the React Native app and verify the visible state when needed.
- Check
agent-device react-devtools status.
- If no app is connected, start or wait for the devtools daemon, then reload or relaunch the app.
- Inspect with
get tree, find, and get component.
- Profile only around the interaction being investigated.
- Verify the fix with the same command sequence and interaction.
For cross-platform validation with explicit --device, --udid, or --serial selectors, prefer an isolated --state-dir over separate named sessions. Named sessions enable bound-session locks during setup. Restart agent-device react-devtools between iOS and Android runs so status, get tree, and profiling clearly refer to the currently launched app.
Main commands
agent-device react-devtools status
agent-device react-devtools wait --connected
agent-device react-devtools get tree --depth 3
agent-device react-devtools find <ComponentName>
agent-device react-devtools get component @c5
agent-device react-devtools profile start
agent-device react-devtools profile stop
agent-device react-devtools profile slow --limit 5
agent-device react-devtools profile rerenders --limit 5
Decision rules
- Need current UI text, refs, screenshots, logs, network, or device metrics: use the
agent-device skill.
- Need props, state, hooks, component ownership, render causes, or React profiler data: use this skill.
- Start component-tree reads with
get tree --depth 3 or find <name> to keep output bounded.
- Labels like
@c5 reset when the app reloads or components remount. After reload, run wait --connected and inspect again.
- Profiling only captures renders between
profile start and profile stop.
- On Android, set
adb reverse tcp:8097 tcp:8097 for React DevTools. If Metro is local, also set adb reverse tcp:8081 tcp:8081.
- For Android sessions connected through
agent-device connect --remote-config, run agent-device react-devtools ... normally. The CLI registers a bridge companion tunnel to the local DevTools daemon on 127.0.0.1:8097 and unregisters it when the command exits.
- Remote Android React DevTools assumes the React Native-bundled DevTools behavior in React Native 0.83+. Do not assume older browser/Chromium DevTools workflows exist in remote sandboxes. For Expo apps, verify the SDK's bundled React Native version and runtime behavior first; no Expo SDK version is separately verified by this skill.
References
| File | When to read |
|---|
| commands.md | Command reference and common inspection flows |
| profiling.md | Render profiling workflow and interpretation |
