React 与 Web Vitals#

agent-browser 可以检查 React 组件树、记录重新渲染、分类 Suspense 边界、测量 Core Web Vitals，并执行 SPA 导航。

启用 React 检查#

React 检查要求在页面 JavaScript 运行前安装 React DevTools hook：

bash

agent-browser open --enable react-devtools http://localhost:3000
agent-browser react tree

如果会话已经存在但浏览器尚未安装该 hook，传入 --enable react-devtools 会以已安装 hook 的状态重新启动该会话。

React 命令#

命令	说明
`react tree`	打印带有 fiber ID 的 React 组件树
`react inspect <fiberId>`	检查某个组件的 props、hooks、state 和源码
`react renders start`	开始记录组件渲染提交
`react renders stop [--json]`	停止记录并打印渲染分析
`react suspense [--only-dynamic] [--json]`	遍历 Suspense 边界并区分静态与动态边界

bash

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 profiling 构建时，它还会报告 hydration 阶段。

bash

agent-browser vitals
agent-browser vitals https://example.com --json

默认情况下，vitals 会打印一个摘要，字段与结构化的 --json 响应一致。可报告的指标包括 LCP、CLS、TTFB、FCP、INP，以及可用时的 hydration 时间。

SPA 导航#

pushstate 会执行客户端导航，而不会强制整页刷新。在 Next.js 应用中，它会尝试使用 window.next.router.push，以便 RSC 请求仍然执行。其他框架则回退到 history.pushState 加导航事件。

bash

agent-browser pushstate /dashboard
agent-browser wait --load networkidle
agent-browser snapshot -i

在需要完整导航时使用 open，在工作流需要 SPA 行为时使用 pushstate。