# Debug with Chrome DevTools (via MCP)

## Description
Automatically capture browser console errors, network failures, and page screenshots using the chrome-devtools-mcp MCP server.

## Trigger
- User says "debug this page" or "check console" or "why is this page broken"
- User attaches a screenshot of a browser error and asks for analysis
- After running a test, if the test fails, run this skill automatically

## Steps

1. **Ensure MCP server is running**
   - The project has a `.cursor/mcp.json` file that starts the MCP server with:
     ```json
     {
       "mcpServers": {
         "chrome-devtools": {
           "command": "npx",
           "args": ["@anthropic-ai/chrome-devtools-mcp", "--port", "9222"]
         }
       }
     }
     ```
   - If not running, ask the user to start it manually: `npx @anthropic-ai/chrome-devtools-mcp --port 9222`

2. **Connect to a browser tab**
   - First check available debug targets: `DevTools.listTabs()`
   - Select the current active tab or the one matching the user's description
   - If no tab matches, ask the user to open the page first

3. **Collect diagnostics**
   - Run `DevTools.enableConsole()` to subscribe to logs
   - Wait 2 seconds for buffered logs, then `DevTools.getConsoleMessages()`
   - Run `DevTools.captureScreenshot()` and describe what you see
   - If any network request failed (status >= 400), run `DevTools.getNetworkRequests()` and read the response body

4. **Synthesize findings**
   - Output a structured report with:
     - Console errors (count, severity, message)
     - A brief description of the screenshot (layout, visible elements, any errors)
     - Failed network requests (URL, status, response preview)
     - Recommended next steps (e.g., “Fix the missing API key in config”)

## Example

When the user says "The signup page shows an error", I will:
1. Connect to the browser tab where the signup page is open
2. Capture console messages → see `TypeError: Cannot read properties of null`
3. Capture screenshot → see the red error banner below the form
4. Capture network requests → see a 401 on `/api/user/register`
5. Report: "The API call is returning 401 because the auth token is missing from the request header. Check your auth middleware configuration."

## Requirements
- Node.js 18+
- Chrome with remote debugging enabled (`--remote-debugging-port=9222`)
- Network access to localhost:9222

# 打开 Chrome 时需要开启远程调试
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# 在项目根目录启动 MCP 服务（Cursor 会自动读取 mcp.json）
npx @anthropic-ai/chrome-devtools-mcp --port 9222

@Skills debug-chrome 请帮我诊断当前打开的登录页面为什么登录后闪白

诊断报告
━━━━━━━━━━━━━━━━━━━━━━
1. 控制台：无 JS 错误，但有一条 Warning: React hydration mismatch
2. 截图：页面显示空白，只有顶部导航栏（见附件 screenshot.png）
3. 网络请求：/api/user/profile 返回 500（响应体："Cannot read property 'id' of undefined"）
4. 原因：后端在用户登录后没有正确返回 user.id，导致前端试图渲染用户信息时报错，引发 React 卸载组件，页面变空白
5. 修复建议：检查 /api/auth/login 的返回字段是否包含 user.id，或在前端加 ?. 可选链

// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    launchOptions: {
      args: ['--remote-debugging-port=9222'],
    },
  },
});

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@anthropic-ai/chrome-devtools-mcp", "--port", "9222"]
    }
  }
}