React & Web Vitals#
agent-browser can inspect React component trees, record re-renders, classify Suspense boundaries, measure Core Web Vitals, and perform SPA navigation.
Enable React inspection#
React inspection requires the React DevTools hook to be installed before page JavaScript runs:
agent-browser open --enable react-devtools http://localhost:3000
agent-browser react treeIf the browser is already running, close it before relaunching with --enable react-devtools.
React commands#
| Command | Description |
|---|---|
react tree | Print the React component tree with fiber IDs |
react inspect <fiberId> | Inspect props, hooks, state, and source for one component |
react renders start | Begin recording component render commits |
react renders stop [--json] | Stop recording and print a render profile |
react suspense [--only-dynamic] [--json] | Walk Suspense boundaries and classify static versus dynamic boundaries |
agent-browser react tree
agent-browser react inspect 42
agent-browser react renders start
agent-browser click @e3
agent-browser react renders stop
agent-browser react suspense --only-dynamicWeb Vitals#
vitals works on any site. When a React profiling build is detected, it also reports hydration phases.
agent-browser vitals
agent-browser vitals https://example.com --jsonBy default, vitals prints a summary using the same fields as the structured --json response. Reported metrics include LCP, CLS, TTFB, FCP, INP, and hydration timing when available.
SPA navigation#
pushstate performs client-side navigation without forcing a full browser reload. On Next.js apps, it attempts to use window.next.router.push so RSC fetches still run. Other frameworks fall back to history.pushState plus navigation events.
agent-browser pushstate /dashboard
agent-browser wait --load networkidle
agent-browser snapshot -iUse open for full navigation and pushstate when the workflow needs SPA behavior.