verifying-in-browser

在浏览器中验证

修改代码后，主动使用此技能验证应用是否确实正常运行。不要只相信代码没有问题——启动应用并进行检查。

步骤

1. 在后台启动开发服务器——通过列出终端检查是否已有服务器在运行。如果没有：

   npm run dev
   

   设置 block_until_ms: 0，让服务器在后台运行。然后轮询，直到看到包含 localhost URL 的“ready”消息。

2. 在侧边浏览器中打开——在代码旁边启动应用：

   Tool: browser_navigate
   Arguments: { "url": "http://localhost:3000", "position": "side", "take_screenshot_afterwards": true }
   

3. 快速健康检查——运行以下三项检查：

   控制台错误：

   Tool: browser_console_messages
   

   标记所有错误。弃用警告可以记录，但不影响继续操作。

   网络故障：

   Tool: browser_network_requests
   

   标记所有 4xx/5xx 响应、失败的 fetch 请求或 CORS 错误。

   视觉检查： 检查屏幕截图。页面是否正常渲染？布局是否正确？有没有空白屏幕或一直无法消失的加载转圈？

4. 导航到已更改的页面——如果修改针对特定路由，导航到该页面并重复检查。

5. 测试交互——如果修改了表单、按钮或交互元素：

   • 使用 browser_snapshot 获取元素引用
   • 点击、填写或悬停在已更改的元素上
   • 再截一张屏幕截图，验证结果

6. 报告结论——告知用户：

   • “已在浏览器中验证——页面渲染正常，没有控制台错误，所有网络请求均正常。”
   • 或：“发现问题：[问题列表]”

适用场景

• 修改任何 React 组件、CSS 或布局代码后
• 修改 API 路由或数据获取逻辑后
• 更新环境变量或配置后
• 安装或移除依赖项后
• 提交之前——作为最后的检查

说明

• 使用 position: "side"，同时查看代码和浏览器。
• 如果开发服务器已经在运行，跳过步骤 1，直接导航。
• 对于 SSR 应用，检查初始的服务器渲染 HTML 和客户端水合后的状态。