Chrome DevTools 页面验证

开发完成后，使用 Chrome DevTools MCP 验证页面效果。替代 Playwright 进行交互式浏览器验证。

When to Use

当用户：

说"验证一下"、"看看效果"、"测试一下页面"
完成 UI 组件开发后需要确认渲染效果
修复 bug 后需要确认修复结果
需要截图记录页面状态
需要检查表单交互、API 调用是否正常

前置条件

确保 Chrome DevTools MCP 已配置在 .claude/mcp.json:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

核心规则

交互前必须 take_snapshot — uid 是动态的，每次页面变化后必须重新获取
操作后用 wait_for 等待状态变化 — 再做下一步操作或截图
结束前必须检查错误 — list_console_messages(types: ["error"]) 确认无报错
API 验证 — list_network_requests(resourceTypes: ["fetch"]) 确认请求状态正确

验证工作流

场景 1: 快速验证（最常用）

页面改完后，确认渲染正常、无报错。

new_page(url: "http://localhost:3001/ratel/目标路径")
resize_page(width: 1280, height: 720)
take_snapshot  → 确认页面元素存在
take_screenshot  → 截图存档
list_console_messages(types: ["error"])  → 确认无报错

场景 2: 表单交互验证

验证表单填写、提交、API 响应。

take_snapshot  → 获取表单元素 uid
fill(uid: "<phone-input-uid>", value: "13800138000")
fill(uid: "<password-input-uid>", value: "Test123456")
click(uid: "<submit-button-uid>")
wait_for(text: "成功")  → 等待结果
list_network_requests(resourceTypes: ["fetch"])  → 检查 API 状态码
take_screenshot  → 截图记录

场景 3: UI 变更验证（含响应式）

验证视觉效果 + hover 状态 + 移动端适配。

navigate_page(type: "url", url: "...")
take_screenshot  → 桌面端截图
hover(uid: "<target-uid>")
take_screenshot  → hover 状态截图
emulate(viewport: {width: 375, height: 812, isMobile: true, hasTouch: true})
take_screenshot  → 移动端截图
emulate(viewport: null)  → 恢复桌面端

场景 4: 暗色模式验证

emulate(colorScheme: "dark")
take_screenshot  → 暗色模式截图
emulate(colorScheme: "light")
take_screenshot  → 亮色模式截图

Playwright 对照

Playwright	Chrome DevTools MCP
`page.goto(url)`	`new_page` / `navigate_page`
`page.click(sel)`	`take_snapshot` → `click(uid)`
`page.fill(sel, val)`	`fill(uid, value)`
`page.waitForSelector()`	`wait_for(text)`
`page.screenshot()`	`take_screenshot`
`page.evaluate()`	`evaluate_script`

故障排除

Chrome DevTools MCP 未连接

MCP 工具调用报错"not connected"：

检查 .claude/mcp.json 配置是否正确
重启 Claude Code 会话让 MCP 重新连接

页面加载空白

take_snapshot 返回空内容：

确认 dev server 已启动且端口正确
用 list_console_messages 检查是否有 JS 错误
尝试 navigate_page(type: "reload") 刷新

uid 找不到

click/fill 报错 uid 无效：

uid 在每次页面更新后会变，必须重新 take_snapshot
确认目标元素在视口内（可能需要滚动）

chrome-devtools-e2e