Chrome DevTools 页面验证
开发完成后，使用 Chrome DevTools MCP 验证页面效果，替代 Playwright 进行交互式浏览器验证。
用途
当用户说"验证一下"、"看看效果"、"测试一下页面"，或在完成 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
- 确认目标元素在视口内（可能需要滚动）
适用场景与限制
适用于开发完成后的手动页面验证与 E2E 测试，覆盖 UI 渲染、表单交互、API 调用、控制台错误检查、截图记录、响应式与暗色模式验证。使用依赖 Chrome DevTools MCP 的正确配置与运行中的 dev server。其他未在资料中说明的功能、收费、价格、平台或效果暂未提供。