用途:在完成代码修改后主动验证应用是否真的能运行,而不是仅凭代码正确性判断。适用于改动 React 组件、CSS、布局、API 路由、数据获取、环境变量或配置,以及安装/移除依赖之后,也可在提交前作为最终检查。
主要能力与步骤:
- 后台启动开发服务器。先列出终端确认是否已有服务器在运行;若没有则执行 npm run dev,设置 block_until_ms: 0 使其后台运行,然后轮询直到出现带 localhost URL 的 ready 消息。
- 在侧边浏览器打开应用:调用 browser_navigate,参数为 { "url": "http://localhost:3000", "position": "side", "take_screenshot_afterwards": true }。
- 快速健康检查三项:用 browser_console_messages 检查控制台错误(弃用警告可记录但不算阻塞);用 browser_network_requests 检查 4xx/5xx 响应、失败的 fetch 或 CORS 错误;查看截图确认页面是否渲染、布局是否正确、是否存在空白页或永不结束的加载动画。
- 若改动位于特定路由,导航到该页面并重复上述检查。
- 若改动涉及表单、按钮或交互元素,用 browser_snapshot 获取元素引用,执行点击、填写或悬停,再截图验证结果。
- 报告结论:说明页面渲染正常、无控制台错误、网络请求健康,或列出发现的问题。
限制与注意:若开发服务器已在运行,跳过第一步直接导航;使用 position: "side" 可同时查看代码与浏览器;对 SSR 应用需同时检查服务端渲染的初始 HTML 与客户端 hydration 后的状态。资料未提供其他平台支持、收费或价格信息。