chrome-devtools-e2e

Chrome DevTools Page Verification

After development is complete, use Chrome DevTools MCP to verify page effects. Replace Playwright for interactive browser verification.

When to Use

When the user:

Says "verify it", "see how it looks", "test the page"
Needs to confirm rendering effects after completing UI component development
Needs to confirm the fix result after fixing a bug
Needs to take screenshots to record page state
Needs to check whether form interactions and API calls are working properly

Prerequisites

Ensure Chrome DevTools MCP is configured in .claude/mcp.json:

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

Core Rules

Before interacting, you must take_snapshot — uid is dynamic and must be re-obtained after every page change
After operating, use wait_for to wait for state changes — then proceed to the next operation or screenshot
Before finishing, you must check for errors — list_console_messages(types: ["error"]) Confirm there are no errors
API Verification — list_network_requests(resourceTypes: ["fetch"]) Confirm the request status is correct

Verification Workflow

Scenario 1: Quick Verification (most commonly used)

After modifying the page, confirm it renders correctly and there are no errors.

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

Scenario 2: Form Interaction Verification

Verify form filling, submission, and API responses.

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  → 截图记录

Scenario 3: UI Change Verification (including responsive)

Verify visual effects + hover states + mobile adaptation.

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)  → 恢复桌面端

Scenario 4: Dark Mode Verification

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

Playwright Comparison

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`

Troubleshooting

Chrome DevTools MCP not connected

MCP tool call reports "not connected":

Check whether the .claude/mcp.json configuration is correct
Restart the Claude Code session to let MCP reconnect

Page loads blank

take_snapshot Returns empty content:

Confirm the dev server is started and the port is correct
Use list_console_messages to check whether there are JS errors
Try navigate_page(type: "reload") to refresh

uid not found

click/fill Reports invalid uid:

uid changes after every page update, so you must re- take_snapshot
Confirm the target element is within the viewport (may need to scroll)