agent-device 0.13.3 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -63
- package/android-snapshot-helper/README.md +75 -0
- package/android-snapshot-helper/dist/agent-device-android-snapshot-helper-0.14.1.apk +0 -0
- package/android-snapshot-helper/dist/agent-device-android-snapshot-helper-0.14.1.apk.sha256 +1 -0
- package/android-snapshot-helper/dist/agent-device-android-snapshot-helper-0.14.1.manifest.json +17 -0
- package/dist/src/221.js +4 -0
- package/dist/src/3918.js +29 -29
- package/dist/src/8161.js +3 -3
- package/dist/src/8656.js +1 -1
- package/dist/src/9152.js +1 -1
- package/dist/src/9542.js +2 -2
- package/dist/src/9818.js +1 -1
- package/dist/src/989.js +1 -1
- package/dist/src/android-snapshot-helper.d.ts +182 -0
- package/dist/src/android-snapshot-helper.js +1 -0
- package/dist/src/index.d.ts +19 -0
- package/dist/src/internal/bin.js +413 -69
- package/dist/src/internal/daemon.js +22 -20
- package/ios-runner/AgentDeviceRunner/AgentDeviceRunnerUITests/RunnerTests+Interaction.swift +26 -2
- package/package.json +29 -9
- package/skills/agent-device/SKILL.md +20 -62
- package/skills/dogfood/SKILL.md +9 -168
- package/skills/react-devtools/SKILL.md +15 -31
- package/skills/agent-device/references/bootstrap-install.md +0 -244
- package/skills/agent-device/references/coordinate-system.md +0 -28
- package/skills/agent-device/references/debugging.md +0 -138
- package/skills/agent-device/references/exploration.md +0 -362
- package/skills/agent-device/references/macos-desktop.md +0 -88
- package/skills/agent-device/references/remote-tenancy.md +0 -188
- package/skills/agent-device/references/verification.md +0 -134
- package/skills/dogfood/references/issue-taxonomy.md +0 -83
- package/skills/dogfood/templates/dogfood-report-template.md +0 -52
- package/skills/react-devtools/references/commands.md +0 -91
- package/skills/react-devtools/references/profiling.md +0 -74
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
# Verification
|
|
2
|
-
|
|
3
|
-
## When to open this file
|
|
4
|
-
|
|
5
|
-
Open this file when the task needs evidence, regression checks, replay maintenance, or session performance measurements after the main interaction flow is already working.
|
|
6
|
-
|
|
7
|
-
## Main commands to reach for first
|
|
8
|
-
|
|
9
|
-
- `screenshot`
|
|
10
|
-
- `diff snapshot`
|
|
11
|
-
- `diff screenshot`
|
|
12
|
-
- `record`
|
|
13
|
-
- `replay -u`
|
|
14
|
-
- `perf`
|
|
15
|
-
|
|
16
|
-
## Most common mistake to avoid
|
|
17
|
-
|
|
18
|
-
Do not use verification tools as the first exploration step. First get the app into the correct state with the normal interaction flow, then capture proof or maintain replay assets.
|
|
19
|
-
|
|
20
|
-
## Canonical loop
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
agent-device open Settings --platform ios
|
|
24
|
-
# after using exploration to reach the state you want to verify
|
|
25
|
-
agent-device snapshot
|
|
26
|
-
agent-device screenshot /tmp/settings-proof.png --overlay-refs
|
|
27
|
-
agent-device close
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
## Structural verification with diff snapshot
|
|
31
|
-
|
|
32
|
-
Use `diff snapshot` when you need a compact view of how the UI changed between nearby states.
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
agent-device snapshot -i
|
|
36
|
-
agent-device press @e5
|
|
37
|
-
agent-device diff snapshot -i
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
- Initialize the baseline at a stable point.
|
|
41
|
-
- Perform the mutation.
|
|
42
|
-
- Run `diff snapshot` to confirm the expected structural change.
|
|
43
|
-
- Re-run full `snapshot` only when you need fresh refs.
|
|
44
|
-
|
|
45
|
-
## Screenshot artifacts
|
|
46
|
-
|
|
47
|
-
Use `screenshot` when the proof needs a rendered image instead of a structural tree.
|
|
48
|
-
|
|
49
|
-
- Add `--max-size 1024` when a full-resolution screenshot is too large for an agent, model, or chat attachment.
|
|
50
|
-
- Add `--overlay-refs` when you want the saved PNG to show fresh `@eN` refs burned into the screenshot.
|
|
51
|
-
- Combine them as `screenshot /tmp/proof.png --max-size 1024 --overlay-refs` when you need a smaller visual proof that still includes tappable refs.
|
|
52
|
-
- Avoid very small `--max-size` values when text, icons, or labels need to remain readable.
|
|
53
|
-
|
|
54
|
-
## Visual regression with diff screenshot
|
|
55
|
-
|
|
56
|
-
Use `diff screenshot` when comparing the current rendered screen against a saved visual baseline.
|
|
57
|
-
|
|
58
|
-
```bash
|
|
59
|
-
agent-device diff screenshot --baseline ./baseline.png --out /tmp/diff.png
|
|
60
|
-
agent-device diff screenshot --baseline ./baseline.png ./current.png --out /tmp/diff.png
|
|
61
|
-
agent-device diff screenshot --baseline ./baseline.png --out /tmp/diff.png --overlay-refs
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
- Text output includes ranked changed regions with screen-space rectangles, shape, size, density, average color, and luminance. JSON also includes normalized bounds.
|
|
65
|
-
- The diff PNG uses a light grayscale current-screen context with changed pixels tinted red and changed regions outlined.
|
|
66
|
-
- When a current image path is provided, `diff screenshot` compares the two saved files instead of capturing from the live device or requiring an active session.
|
|
67
|
-
- Install `tesseract` when you want `diff screenshot` to add best-effort OCR text deltas, movement clusters, and bbox size-change hints. OCR improves the text/JSON descriptions only; it does not change the pixel comparison or the diff PNG.
|
|
68
|
-
- When OCR is available, `diff screenshot` also reports best-effort non-text visual deltas by masking OCR text boxes out of the pixel diff and clustering the remaining residuals. Treat these as hints for icons, controls, and separators, not semantic icon recognition.
|
|
69
|
-
- Add `--overlay-refs` to `diff screenshot` when you also want a separate current-screen overlay guide for a live capture. The raw screenshot is still used for pixel comparison; the overlay guide is only context for non-text controls, icons, and tappable regions. When overlay refs intersect changed regions, the output lists the best current-screen ref matches under the affected region. Saved-image comparisons do not have live accessibility refs, so omit `--overlay-refs` when passing a current image path.
|
|
70
|
-
|
|
71
|
-
## Session recording
|
|
72
|
-
|
|
73
|
-
Use `record` for debugging, documentation, or shareable verification artifacts.
|
|
74
|
-
|
|
75
|
-
```bash
|
|
76
|
-
agent-device record start ./recordings/ios.mov
|
|
77
|
-
agent-device open App
|
|
78
|
-
agent-device snapshot -i
|
|
79
|
-
agent-device press @e3
|
|
80
|
-
agent-device close
|
|
81
|
-
agent-device record stop
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
- `record` supports iOS simulators, iOS devices, and Android.
|
|
85
|
-
- On iOS, recording is a wrapper around `simctl` for simulators and the corresponding device capture path for physical devices.
|
|
86
|
-
- On Android, recording is a wrapper around `adb`.
|
|
87
|
-
- Recording writes a video artifact and a gesture-telemetry sidecar JSON.
|
|
88
|
-
- Use `record start <path> --quality 5` when a smaller video is easier to inspect or share. The scale is 5-10, where 10 is native resolution; omit it to preserve native/current resolution.
|
|
89
|
-
- On macOS hosts, touch overlay burn-in is available for supported recordings.
|
|
90
|
-
- On non-macOS hosts, recording still succeeds but the video stays raw and `record stop` can return an `overlayWarning`.
|
|
91
|
-
- If the agent already knows the interaction sequence and wants a more lifelike, uninterrupted recording, drive the flow with `batch` while recording instead of replanning between each step.
|
|
92
|
-
|
|
93
|
-
Example:
|
|
94
|
-
|
|
95
|
-
```bash
|
|
96
|
-
agent-device record start ./recordings/smoke.mov
|
|
97
|
-
agent-device batch --session sim --platform ios --steps-file /tmp/smoke-steps.json --json
|
|
98
|
-
agent-device record stop
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
- Use this only after exploration has stabilized the flow.
|
|
102
|
-
- Keep the batch short and add `wait` or `is exists` guards after mutating steps so the recorded flow still tracks realistic UI timing.
|
|
103
|
-
|
|
104
|
-
## Replay maintenance
|
|
105
|
-
|
|
106
|
-
Use replay updates when selectors drift but the recorded scenario is still correct.
|
|
107
|
-
|
|
108
|
-
```bash
|
|
109
|
-
agent-device replay -u ./session.ad
|
|
110
|
-
agent-device test ./smoke --platform android
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
- Prefer selector-based actions in recorded `.ad` replays.
|
|
114
|
-
- Use `test` when you already have multiple `.ad` flows and need a quick regression pass after updating or recording them.
|
|
115
|
-
- Keep the skill-level rule simple: use `replay -u` to maintain one script, use `test` to verify a folder or matcher of scripts.
|
|
116
|
-
- Treat `test` as a human and CI-facing suite runner that an agent can invoke for verification, not as the main source of product documentation.
|
|
117
|
-
- Failed runs keep suite artifacts under `.agent-device/test-artifacts` by default, which is usually enough for debugging without extra agent-side processing.
|
|
118
|
-
- Use update mode for maintenance, not as a substitute for fixing a broken interaction strategy.
|
|
119
|
-
|
|
120
|
-
## Performance checks
|
|
121
|
-
|
|
122
|
-
Use `perf --json` or `metrics --json` when you need session performance data for the active session.
|
|
123
|
-
|
|
124
|
-
```bash
|
|
125
|
-
agent-device open Settings --platform ios
|
|
126
|
-
agent-device perf --json
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
- `startup` is command round-trip timing around `open`.
|
|
130
|
-
- It is not true first-frame or first-interactive telemetry.
|
|
131
|
-
- Android app sessions also expose `memory` (`dumpsys meminfo`) and `cpu` (`dumpsys cpuinfo`) snapshots when the session has an app package context.
|
|
132
|
-
- Apple app sessions on macOS, iOS simulators, and physical iOS devices also expose `memory` and `cpu` process snapshots when the session has an app bundle ID.
|
|
133
|
-
- On physical iOS devices, sampling uses a short `xcrun xctrace` Activity Monitor capture, so keep the device unlocked, connected, and the app active in the foreground while sampling.
|
|
134
|
-
- `fps` is still unavailable in this release.
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
# Issue Taxonomy (Mobile)
|
|
2
|
-
|
|
3
|
-
Reference for categorizing issues found during mobile dogfooding.
|
|
4
|
-
|
|
5
|
-
## Severity Levels
|
|
6
|
-
|
|
7
|
-
| Severity | Definition |
|
|
8
|
-
| ------------ | ------------------------------------------------------------------------- |
|
|
9
|
-
| **critical** | Blocks a core workflow, causes data loss, or crashes/freeze loops the app |
|
|
10
|
-
| **high** | Major feature broken or unusable, no practical workaround |
|
|
11
|
-
| **medium** | Feature works with notable friction or partial failure; workaround exists |
|
|
12
|
-
| **low** | Minor cosmetic or polish issue |
|
|
13
|
-
|
|
14
|
-
## Categories
|
|
15
|
-
|
|
16
|
-
### Visual / UI
|
|
17
|
-
|
|
18
|
-
- Layout broken, clipped, overlapped, or unreadable text
|
|
19
|
-
- Safe-area/notch overlap issues
|
|
20
|
-
- Incorrect dark/light appearance rendering
|
|
21
|
-
- Missing assets/icons
|
|
22
|
-
- Animation glitches or flicker
|
|
23
|
-
|
|
24
|
-
### Functional
|
|
25
|
-
|
|
26
|
-
- Buttons/controls do nothing or trigger wrong action
|
|
27
|
-
- Flows fail (create/edit/delete/submit)
|
|
28
|
-
- Navigation dead-ends or wrong destination
|
|
29
|
-
- State loss after background/foreground transitions
|
|
30
|
-
- Deep link opens wrong screen or fails
|
|
31
|
-
|
|
32
|
-
### UX
|
|
33
|
-
|
|
34
|
-
- Confusing hierarchy or navigation labels
|
|
35
|
-
- Missing loading/progress feedback
|
|
36
|
-
- Unclear error handling or no recovery affordance
|
|
37
|
-
- Excessive steps for common tasks
|
|
38
|
-
- Inconsistent behavior between similar screens
|
|
39
|
-
|
|
40
|
-
### Content
|
|
41
|
-
|
|
42
|
-
- Typos, incorrect copy, placeholder text
|
|
43
|
-
- Wrong labels/help text
|
|
44
|
-
- Truncated text with no affordance
|
|
45
|
-
- Inconsistent terminology across screens
|
|
46
|
-
|
|
47
|
-
### Performance
|
|
48
|
-
|
|
49
|
-
- Slow startup or route transitions
|
|
50
|
-
- Input lag or gesture jank
|
|
51
|
-
- Scroll hitches/frame drops
|
|
52
|
-
- Notable battery/thermal symptoms during basic usage
|
|
53
|
-
|
|
54
|
-
### Diagnostics / Logs
|
|
55
|
-
|
|
56
|
-
- Native crashes or repeated fatal exceptions
|
|
57
|
-
- Repeated warnings correlated with broken behavior
|
|
58
|
-
- Unhandled runtime errors visible during repro
|
|
59
|
-
|
|
60
|
-
### Permissions / Platform
|
|
61
|
-
|
|
62
|
-
- Permission prompt flow broken or loops forever
|
|
63
|
-
- Denied permissions not handled gracefully
|
|
64
|
-
- Platform-specific regressions (iOS-only or Android-only)
|
|
65
|
-
- Background/foreground lifecycle regressions
|
|
66
|
-
|
|
67
|
-
### Accessibility
|
|
68
|
-
|
|
69
|
-
- Missing labels or incorrect accessibility names
|
|
70
|
-
- Focus order/navigation issues for assistive tech
|
|
71
|
-
- Low contrast or unreadable text scaling
|
|
72
|
-
- Touch targets too small for reliable interaction
|
|
73
|
-
|
|
74
|
-
## Exploration Checklist
|
|
75
|
-
|
|
76
|
-
1. Visual scan: capture screenshot; verify layout/safe areas/text/icon rendering.
|
|
77
|
-
2. Interactions: press controls, open menus/modals, validate expected response.
|
|
78
|
-
3. Forms/input: test valid/invalid/empty/boundary input.
|
|
79
|
-
4. Navigation: traverse all top-level sections and return paths.
|
|
80
|
-
5. App states: loading/empty/error/offline/permission-denied/background-resume.
|
|
81
|
-
6. Logs/diagnostics: inspect app logs when behavior is suspicious.
|
|
82
|
-
7. Platform parity: verify critical flows on each requested platform.
|
|
83
|
-
8. Accessibility basics: labels, touch target sizes, readability/contrast.
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
# Dogfood Report: {APP_NAME}
|
|
2
|
-
|
|
3
|
-
| Field | Value |
|
|
4
|
-
| -------------- | -------------- |
|
|
5
|
-
| **Date** | {DATE} |
|
|
6
|
-
| **Platform** | {PLATFORM} |
|
|
7
|
-
| **Target App** | {TARGET_APP} |
|
|
8
|
-
| **Session** | {SESSION_NAME} |
|
|
9
|
-
| **Scope** | {SCOPE} |
|
|
10
|
-
|
|
11
|
-
## Summary
|
|
12
|
-
|
|
13
|
-
| Severity | Count |
|
|
14
|
-
| --------- | ----- |
|
|
15
|
-
| Critical | 0 |
|
|
16
|
-
| High | 0 |
|
|
17
|
-
| Medium | 0 |
|
|
18
|
-
| Low | 0 |
|
|
19
|
-
| **Total** | **0** |
|
|
20
|
-
|
|
21
|
-
## Issues
|
|
22
|
-
|
|
23
|
-
<!-- Copy this block for each issue found. Interactive issues need video + step screenshots. Static issues can be screenshot-only (Repro Video = N/A). -->
|
|
24
|
-
|
|
25
|
-
### ISSUE-001: {Short title}
|
|
26
|
-
|
|
27
|
-
| Field | Value |
|
|
28
|
-
| ------------------ | -------------------------------------------------------------------------------------------- |
|
|
29
|
-
| **Severity** | critical / high / medium / low |
|
|
30
|
-
| **Category** | visual / functional / ux / content / performance / diagnostics / permissions / accessibility |
|
|
31
|
-
| **Screen / Route** | {screen where issue was found} |
|
|
32
|
-
| **Repro Video** | {path to video, or N/A for static issues} |
|
|
33
|
-
|
|
34
|
-
**Description**
|
|
35
|
-
|
|
36
|
-
{What is wrong, what was expected, and what actually happened.}
|
|
37
|
-
|
|
38
|
-
**Repro Steps**
|
|
39
|
-
|
|
40
|
-
1. Open {screen/entry point}
|
|
41
|
-

|
|
42
|
-
|
|
43
|
-
2. {Action}
|
|
44
|
-

|
|
45
|
-
|
|
46
|
-
3. {Action}
|
|
47
|
-

|
|
48
|
-
|
|
49
|
-
4. **Observe:** {broken behavior}
|
|
50
|
-

|
|
51
|
-
|
|
52
|
-
---
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
# React DevTools Commands
|
|
2
|
-
|
|
3
|
-
All commands are run through `agent-device react-devtools`.
|
|
4
|
-
|
|
5
|
-
## Connection
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
agent-device react-devtools start
|
|
9
|
-
agent-device react-devtools stop
|
|
10
|
-
agent-device react-devtools status
|
|
11
|
-
agent-device react-devtools wait --connected --timeout 30
|
|
12
|
-
agent-device react-devtools wait --component <ComponentName> --timeout 30
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
- `status` shows the daemon port, connected apps, component count, profiling state, uptime, and last connection event.
|
|
16
|
-
- Most commands auto-start the daemon, but `start` is useful before launching or reloading the app.
|
|
17
|
-
- React Native development builds connect to the daemon on port 8097. For Android emulators or physical devices, use `adb reverse tcp:8097 tcp:8097` if the app cannot reach the host. If the app also uses local Metro, set `adb reverse tcp:8081 tcp:8081`.
|
|
18
|
-
|
|
19
|
-
## Validation Notes
|
|
20
|
-
|
|
21
|
-
- When validating the same app across iOS and Android with explicit `--device`, `--udid`, or `--serial` selectors, prefer an isolated `--state-dir` over separate named sessions. A named `--session` enables bound-session lock behavior, so setup commands with explicit target selectors can be rejected.
|
|
22
|
-
- Restart the React DevTools daemon between platforms so `status`, `get tree`, and profiling output belong to the currently launched app.
|
|
23
|
-
- Verify the app is visibly loaded with `snapshot` before collecting React internals. Use `react-devtools` for component state and profiling, not for proving the device/app surface is open.
|
|
24
|
-
|
|
25
|
-
## Component Inspection
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
agent-device react-devtools get tree --depth 3
|
|
29
|
-
agent-device react-devtools get component @c5
|
|
30
|
-
agent-device react-devtools find Button
|
|
31
|
-
agent-device react-devtools find Button --exact
|
|
32
|
-
agent-device react-devtools count
|
|
33
|
-
agent-device react-devtools errors
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
- `get tree` prints a component hierarchy with labels like `@c1`, `@c2`.
|
|
37
|
-
- Use `--depth` on large apps. Start at `--depth 3` or `--depth 4`.
|
|
38
|
-
- `get component` accepts a label or numeric React fiber id and shows props, state, and hooks.
|
|
39
|
-
- `find` searches by display name. Use `--exact` when fuzzy results are noisy.
|
|
40
|
-
- `errors` lists components with React-tracked warnings or errors.
|
|
41
|
-
|
|
42
|
-
## Profiling
|
|
43
|
-
|
|
44
|
-
```bash
|
|
45
|
-
agent-device react-devtools profile start "interaction name"
|
|
46
|
-
agent-device react-devtools profile stop
|
|
47
|
-
agent-device react-devtools profile slow --limit 5
|
|
48
|
-
agent-device react-devtools profile rerenders --limit 5
|
|
49
|
-
agent-device react-devtools profile report @c5
|
|
50
|
-
agent-device react-devtools profile timeline --limit 20
|
|
51
|
-
agent-device react-devtools profile commit 3
|
|
52
|
-
agent-device react-devtools profile export profile.json
|
|
53
|
-
agent-device react-devtools profile diff before.json after.json --limit 10
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
- `profile slow` ranks components by average render duration.
|
|
57
|
-
- `profile rerenders` ranks components by render count.
|
|
58
|
-
- `profile report @cN` shows render causes and changed props/state/hooks for one component.
|
|
59
|
-
- `profile timeline` lists commits. Use `--limit` and `--offset` for long sessions.
|
|
60
|
-
- `profile export` writes React DevTools Profiler JSON that can be diffed later.
|
|
61
|
-
|
|
62
|
-
## Common Flows
|
|
63
|
-
|
|
64
|
-
Inspect a component:
|
|
65
|
-
|
|
66
|
-
```bash
|
|
67
|
-
agent-device react-devtools status
|
|
68
|
-
agent-device react-devtools get tree --depth 3
|
|
69
|
-
agent-device react-devtools find SearchScreen
|
|
70
|
-
agent-device react-devtools get component @c12
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
Profile a slow interaction:
|
|
74
|
-
|
|
75
|
-
```bash
|
|
76
|
-
agent-device react-devtools profile start "slow search"
|
|
77
|
-
# Trigger the interaction with agent-device or ask the user to perform it.
|
|
78
|
-
agent-device react-devtools profile stop
|
|
79
|
-
agent-device react-devtools profile slow --limit 5
|
|
80
|
-
agent-device react-devtools profile rerenders --limit 5
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
Verify a render fix:
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
agent-device react-devtools profile start "after fix"
|
|
87
|
-
# Repeat the same interaction.
|
|
88
|
-
agent-device react-devtools profile stop
|
|
89
|
-
agent-device react-devtools profile slow --limit 5
|
|
90
|
-
agent-device react-devtools profile rerenders --limit 5
|
|
91
|
-
```
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
# React Native Profiling
|
|
2
|
-
|
|
3
|
-
Use this workflow when the user reports slow interactions, excessive re-renders, unstable props, or unclear render causes.
|
|
4
|
-
|
|
5
|
-
## Baseline
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
agent-device react-devtools status
|
|
9
|
-
agent-device react-devtools count
|
|
10
|
-
agent-device react-devtools get tree --depth 3
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
If the app is not connected, run:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
agent-device react-devtools start
|
|
17
|
-
agent-device react-devtools wait --connected
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Then reload or relaunch the React Native app if needed.
|
|
21
|
-
|
|
22
|
-
## Capture One Interaction
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
agent-device react-devtools profile start "short label"
|
|
26
|
-
# Trigger exactly the interaction being investigated.
|
|
27
|
-
agent-device react-devtools profile stop
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
Keep the profiling window narrow. Extra navigation, warm-up work, or unrelated gestures make the report harder to interpret.
|
|
31
|
-
|
|
32
|
-
## Identify Suspects
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
agent-device react-devtools profile slow --limit 5
|
|
36
|
-
agent-device react-devtools profile rerenders --limit 5
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
- A component with high average render time is a slow-render suspect.
|
|
40
|
-
- A component with high render count is a re-render suspect.
|
|
41
|
-
- A component can be both.
|
|
42
|
-
|
|
43
|
-
## Drill In
|
|
44
|
-
|
|
45
|
-
```bash
|
|
46
|
-
agent-device react-devtools profile report @c12
|
|
47
|
-
agent-device react-devtools get component @c12
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
Use `profile report` to identify render causes and changed keys. Use `get component` to inspect current props, state, and hooks.
|
|
51
|
-
|
|
52
|
-
Common interpretations:
|
|
53
|
-
|
|
54
|
-
| Signal | Meaning | Typical follow-up |
|
|
55
|
-
| ------------------------------------------ | ----------------------------------- | ---------------------------------------------- |
|
|
56
|
-
| `props-changed` with function props | Parent may pass unstable callbacks | Check whether the parent can use `useCallback` |
|
|
57
|
-
| `props-changed` with object or array props | Parent may pass unstable references | Check whether the parent can use `useMemo` |
|
|
58
|
-
| `parent-rendered` with many child renders | Child has no bailout | Check whether `React.memo` is appropriate |
|
|
59
|
-
| `state-changed` | Component state caused the render | Check whether the state update is necessary |
|
|
60
|
-
| `hooks-changed` | Hook value or dependency changed | Inspect hook values and dependencies |
|
|
61
|
-
|
|
62
|
-
## Verify
|
|
63
|
-
|
|
64
|
-
After making a change, repeat the same interaction:
|
|
65
|
-
|
|
66
|
-
```bash
|
|
67
|
-
agent-device react-devtools profile start "after fix"
|
|
68
|
-
# Repeat the same interaction.
|
|
69
|
-
agent-device react-devtools profile stop
|
|
70
|
-
agent-device react-devtools profile slow --limit 5
|
|
71
|
-
agent-device react-devtools profile rerenders --limit 5
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
Compare render counts, average durations, changed keys, and commit counts against the baseline.
|