# Chrome Devtools E2e

> 使用 Chrome DevTools MCP 验证页面效果和进行 E2E 测试。适合开发完成后手动触发，验证 UI 渲染、表单交互、API 调用、控制台错误等。

- Skill: `staruhub/chrome-devtools-e2e` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add staruhub/chrome-devtools-e2e`
- Raw SKILL.md: https://api.skillmd.com/api/skills/staruhub/chrome-devtools-e2e/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: staruhub (https://skillmd.com/u/staruhub)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/staruhub/chrome-devtools-e2e

---


# Chrome DevTools 页面验证

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

## When to Use

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

## 前置条件

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

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

## 核心规则

1. **交互前必须 `take_snapshot`** — uid 是动态的，每次页面变化后必须重新获取
2. **操作后用 `wait_for` 等待状态变化** — 再做下一步操作或截图
3. **结束前必须检查错误** — `list_console_messages(types: ["error"])` 确认无报错
4. **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`
- 确认目标元素在视口内（可能需要滚动）