feat(react-devtools): profile React renders through the Metro inspector
Summary
agent-device react-devtools is now React Native performance profiling, built into agent-device. profile start and profile stop attach to the app's JavaScript runtime through its Metro dev server (CDP Runtime.evaluate) and drive the React DevTools backend that development builds already ship. The app, Metro config and Babel config need no changes, and there is no helper to start or wait for.
$ agent-device react-devtools profile start
$ agent-device react-devtools profile stop
React profile 3.0s: 8 commits, 1197ms rendering, 8 over 16ms (worst #0 170ms)
1. memo-defeated ContactRow: memo bypassed on 480/480 updates; new highlight (object) 480x, onSelect (function) 480x from ContactList -> wrap those props in useCallback/useMemo in ContactList
stop prints ranked findings (about 100–200 tokens), saves the profile, and ends with a More: line naming the drill-down views over the saved profile:
agent-device react-devtools profile report ContactRow # causes, changed props and their kinds, owners, costliest commits
agent-device react-devtools profile commit 6 # one commit's components, grouped, by self time
agent-device react-devtools profile slow --limit 5
agent-device react-devtools profile rerenders --limit 5
agent-device react-devtools profile timeline --limit 20 --sort duration
Tables say how many rows they omit. Each subcommand rejects options it does not read. If one app is connected from several devices, profiling fails closed until --metro-device names one.
Removed:
- the
npm exec agent-react-devtoolspassthrough (status,start,wait,get tree,find,errors,profile export,profile diff) - its 8097 remote tunnel and port reverse
- the injected-dispatch seam that only that port reverse used
Help and docs now describe profiling only.
Validation
At 639d73d05d, check:affected --run, check:production-exports and check:di-seams all pass.
The Perf lab (#3612) was run through agent-device open/click/wait plus profile start/stop:
| RN | platform | expected first finding |
|---|---|---|
| 0.74 / 0.76 / 0.80 / 0.83 | Android | 7/7 each |
| 0.83 | iOS simulator | 7/7 |
| 0.88-rc | Android, final build | 7/7, plus a smoke of the route rework |
Drill-downs, live: on Android RN 0.88-rc after the memo-defeated scenario, profile report ContactRow printed its causes, the changed prop kinds and its costliest commits. On the RN 0.83 iOS simulator, profile report ProductTile printed both of its findings.
Not verified: remote bridges; help and docs say so.