React & Web Vitals
agent-browser 可以检查 React 组件树、记录重新渲染、对 Suspense 边界进行分类、测量 Core Web Vitals，并执行 SPA 导航。
启用 React 检查¶
React 检查要求在页面 JavaScript 运行之前安装 React DevTools hook：
如果会话中的浏览器未安装该 hook，传入 --enable react-devtools 会以安装好该 hook 的状态重新启动该会话。
react tree 在有可用组件树时将其打印出来。如果响应中只包含表头，则表示未收集到组件树。请确认页面使用了 React，且 React 根节点已完成挂载。
React 命令¶
| 命令 | 说明 |
|---|---|
react tree | 使用 fiber ID 打印 React 组件树 |
react inspect <fiberId> | 检查单个组件的 props、hooks、state 和 source |
react renders start | 开始记录组件渲染提交 |
react renders stop [--json] | 停止记录并打印渲染分析报告 |
react suspense [--only-dynamic] [--json] | 遍历 Suspense 边界并将边界分类为静态或动态 |
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-dynamic
Web Vitals¶
vitals 可用于任何站点。当检测到 React 性能分析构建时，它还会报告 hydration 阶段。
默认情况下，vitals 会打印一份摘要，其字段与结构化 --json 响应一致。报告的指标包括 LCP、CLS、TTFB、FCP、INP，以及可用的 hydration 时间。
SPA 导航¶
pushstate 执行客户端导航，而不会强制进行完整的浏览器重新加载。在 Next.js 应用中，它会尝试使用 window.next.router.push，以确保 RSC 请求仍然运行。其他框架则回退到 history.pushState 并附带导航事件。
agent-browser pushstate /dashboard
agent-browser wait --url "**/dashboard"
agent-browser snapshot -i
需要完整导航时使用 open；当工作流需要 SPA 行为时使用 pushstate。
本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 agen/agent-browser