feat(react): React introspection, Web Vitals, and SPA primitives (#1257)
* feat(react): first-class React introspection, Web Vitals, and nextjs skill
Add React-general and web-universal features as first-class agent-browser verbs
(react tree/inspect/renders/suspense, vitals, pushstate). Genuinely Next.js-specific
workflows (PPR cookie protocol, /_next/mcp bridge, dev-server endpoints) ship as
a new `nextjs` skill that composes the primitives. No new runtime dependencies -
the React DevTools installHook.js is vendored (MIT) and include_str!'d into the
binary.
New commands:
react tree Full React component tree (depth id parent name)
react inspect <fiberId> Props, hooks, state, source for one fiber
react renders start|stop Fiber profiler with Insts/Mounts/Re-renders/Self/DOM
+ prev->next change details
react suspense Suspense boundaries + classifier (client-hook,
request-api, server-fetch, cache, stream, framework)
+ root-cause grouping + recommendations
vitals [url] LCP/CLS/TTFB/FCP/INP + React hydration phases
pushstate <url> Generic SPA client-side navigation
removeinitscript <id> Remove a script registered via addinitscript
New launch flags:
--init-script <path> Register init scripts before first navigation
(repeatable; env AGENT_BROWSER_INIT_SCRIPTS)
--enable <feature> Built-in init scripts; currently react-devtools
(repeatable; env AGENT_BROWSER_ENABLE)
Other primitives:
network route ... --resource-type <csv> Filter by CDP resource type
cookies set --curl <file> Auto-detects JSON/cURL/Cookie-header
* fixes
* fixes
* fixes
This commit is contained in:
@@ -5,16 +5,38 @@ Complete reference for all agent-browser commands. For quick start and common pa
|
||||
## Navigation
|
||||
|
||||
```bash
|
||||
agent-browser open <url> # Navigate to URL (aliases: goto, navigate)
|
||||
agent-browser open # Launch browser (no navigation); stays on about:blank.
|
||||
# Pair with `network route`, `cookies set --curl`, or
|
||||
# `addinitscript` to stage state before the first navigation.
|
||||
agent-browser open <url> # Launch + navigate (aliases: goto, navigate)
|
||||
# Supports: https://, http://, file://, about:, data://
|
||||
# Auto-prepends https:// if no protocol given
|
||||
agent-browser back # Go back
|
||||
agent-browser forward # Go forward
|
||||
agent-browser reload # Reload page
|
||||
agent-browser pushstate <url> # SPA client-side navigation. Auto-detects
|
||||
# window.next.router.push (triggers RSC fetch on Next.js);
|
||||
# falls back to history.pushState + popstate/navigate events.
|
||||
agent-browser close # Close browser (aliases: quit, exit)
|
||||
agent-browser connect 9222 # Connect to browser via CDP port
|
||||
```
|
||||
|
||||
### Pre-navigation setup (one-turn batch)
|
||||
|
||||
```bash
|
||||
agent-browser batch \
|
||||
'["open"]' \
|
||||
'["network","route","*","--abort","--resource-type","script"]' \
|
||||
'["cookies","set","--curl","cookies.curl","--domain","localhost"]' \
|
||||
'["navigate","http://localhost:3000/target"]'
|
||||
```
|
||||
|
||||
`open` with no URL gives you a clean launch so any interception, cookies,
|
||||
or init scripts you register take effect on the *first* real navigation.
|
||||
Use for SSR-only debug (`--resource-type script`), protected-origin auth,
|
||||
or capturing fresh `react suspense`/`vitals` state without noise from a
|
||||
prior page.
|
||||
|
||||
## Snapshot (page analysis)
|
||||
|
||||
```bash
|
||||
@@ -310,12 +332,57 @@ agent-browser profiler start # Start Chrome DevTools profiling
|
||||
agent-browser profiler stop trace.json # Stop and save profile
|
||||
```
|
||||
|
||||
## React / Web Vitals
|
||||
|
||||
Requires `--enable react-devtools` at launch for the `react ...` commands.
|
||||
`vitals` and `pushstate` are framework-agnostic.
|
||||
|
||||
```bash
|
||||
agent-browser open --enable react-devtools <url> # Launch with React hook installed
|
||||
agent-browser react tree # Full component tree
|
||||
agent-browser react inspect <fiberId> # Props, hooks, state, source
|
||||
agent-browser react renders start # Begin re-render recording
|
||||
agent-browser react renders stop [--json] # Stop and print render profile
|
||||
agent-browser react suspense [--only-dynamic] [--json] # Suspense boundaries + classifier
|
||||
# --only-dynamic hides the "static" list
|
||||
agent-browser vitals [url] [--json] # LCP/CLS/TTFB/FCP/INP + hydration
|
||||
agent-browser pushstate <url> # SPA client-side nav (auto-detects Next router)
|
||||
```
|
||||
|
||||
## Init scripts
|
||||
|
||||
```bash
|
||||
agent-browser open --init-script <path> # Register before first navigation (repeatable)
|
||||
agent-browser addinitscript <js> # Register at runtime (returns identifier)
|
||||
agent-browser removeinitscript <identifier> # Remove a previously registered init script
|
||||
```
|
||||
|
||||
## cURL cookie import
|
||||
|
||||
```bash
|
||||
agent-browser cookies set --curl <file> # Auto-detects JSON/cURL/Cookie-header
|
||||
agent-browser cookies set --curl <file> --domain example.com # Scope to a domain
|
||||
```
|
||||
|
||||
Supported formats: JSON array of `{name, value}`, a cURL dump from
|
||||
DevTools -> Network -> Copy as cURL, or a bare Cookie header. Errors never
|
||||
echo cookie values.
|
||||
|
||||
## Network route by resource type
|
||||
|
||||
```bash
|
||||
agent-browser network route '*' --abort --resource-type script # Block scripts only (SSR-lock pattern)
|
||||
agent-browser network route '*' --resource-type image,font --body '' # Stub images and fonts
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
```bash
|
||||
AGENT_BROWSER_SESSION="mysession" # Default session name
|
||||
AGENT_BROWSER_EXECUTABLE_PATH="/path/chrome" # Custom browser path
|
||||
AGENT_BROWSER_EXTENSIONS="/ext1,/ext2" # Comma-separated extension paths
|
||||
AGENT_BROWSER_INIT_SCRIPTS="/a.js,/b.js" # Comma-separated init script paths
|
||||
AGENT_BROWSER_ENABLE="react-devtools" # Comma-separated built-in init script features
|
||||
AGENT_BROWSER_PROVIDER="browserbase" # Cloud browser provider
|
||||
AGENT_BROWSER_STREAM_PORT="9223" # Override WebSocket streaming port (default: OS-assigned)
|
||||
AGENT_BROWSER_HOME="/path/to/agent-browser" # Custom install location
|
||||
|
||||
Reference in New Issue
Block a user