react-devtools

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

当任务需要查看无障碍树中不可见的React Native内部信息（如组件层级、props、state、hooks、渲染原因或分析数据）时，使用此skill。

通过

agent-device react-devtools

运行命令。该命令会动态运行固定版本的

agent-react-devtools@0.4.0

，并直接传递所有参数。

首次运行时可能会从npm下载固定版本的包。

agent-device

全局标志可以放在

react-devtools

之前或之后；只有当下游标志与

agent-device

全局标志名称重复时，才需要在下游标志前添加

--

。

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.

使用
```
agent-device
```
打开React Native应用，必要时验证其可见状态。
执行
```
agent-device react-devtools status
```
检查状态。
如果没有应用连接，启动或等待devtools守护进程，然后重新加载或重启应用。
使用
```
get tree
```
、
```
find
```
和
```
get component
```
命令进行检查。
仅针对正在调查的交互过程进行性能分析。
使用相同的命令序列和交互操作验证修复效果。

对于使用显式

--device

、

--udid

或

--serial

选择器的跨平台验证，优先使用独立的

--state-dir

而非单独的命名会话。命名会话会在设置期间启用绑定会话锁。在iOS和Android运行之间重启

agent-device react-devtools

，以便

status

、

get tree

和性能分析明确指向当前启动的应用。

Main commands

主要命令

bash

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

bash

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
```
.

需要当前UI文本、引用、截图、日志、网络或设备指标：使用
```
agent-device
```
skill。
需要props、state、hooks、组件归属、渲染原因或React性能分析数据：使用本skill。
从
```
get tree --depth 3
```
或
```
find <name>
```
开始读取组件树，以控制输出范围。
类似
```
@c5
```
的标签会在应用重新加载或组件重新挂载时重置。重新加载后，运行
```
wait --connected
```
并再次检查。
性能分析仅捕获
```
profile start
```
和
```
profile stop
```
之间的渲染操作。
在Android上，需设置
```
adb reverse tcp:8097 tcp:8097
```
以使用React DevTools。如果Metro在本地运行，还需设置
```
adb reverse tcp:8081 tcp:8081
```
。

References

参考资料

File	When to read
commands.md	Command reference and common inspection flows
profiling.md	Render profiling workflow and interpretation

文件路径	阅读场景
commands.md	命令参考和常见检查流程
profiling.md	渲染性能分析流程与解读