// 使用 Chrome DevTools MCP 验证页面效果和进行 E2E 测试。适合开发完成后手动触发，验证 UI 渲染、表单交互、API 调用、控制台错误等。
| name | chrome-devtools-e2e |
| description | 使用 Chrome DevTools MCP 验证页面效果和进行 E2E 测试。适合开发完成后手动触发，验证 UI 渲染、表单交互、API 调用、控制台错误等。 |
| compatibility | Requires chrome-devtools MCP server configured in .claude/mcp.json |
| metadata | {"author":"pongpong","version":"1.0.0"} |
开发完成后，使用 Chrome DevTools MCP 验证页面效果。替代 Playwright 进行交互式浏览器验证。
当用户：
确保 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"]) 确认无报错list_network_requests(resourceTypes: ["fetch"]) 确认请求状态正确页面改完后，确认渲染正常、无报错。
new_page(url: "http://localhost:3001/ratel/目标路径")
resize_page(width: 1280, height: 720)
take_snapshot → 确认页面元素存在
take_screenshot → 截图存档
list_console_messages(types: ["error"]) → 确认无报错
验证表单填写、提交、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 → 截图记录
验证视觉效果 + 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) → 恢复桌面端
emulate(colorScheme: "dark")
take_screenshot → 暗色模式截图
emulate(colorScheme: "light")
take_screenshot → 亮色模式截图
| 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 |
MCP 工具调用报错"not connected"：
.claude/mcp.json 配置是否正确take_snapshot 返回空内容：
list_console_messages 检查是否有 JS 错误navigate_page(type: "reload") 刷新click/fill 报错 uid 无效：
take_snapshot