# task-1984: Chrome DevTools MCP 서버 시스템 통합

## 목적
Chrome DevTools MCP (https://github.com/ChromeDevTools/chrome-devtools-mcp)를 우리 개발 시스템에 통합하여, 봇들이 실제 브라우저 기반 테스트/디버깅/성능 분석을 할 수 있게 한다.

## ★★★ 참조 ★★★
- GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp
- npm: chrome-devtools-mcp
- 기존 Playwright MCP: 이미 설치되어 있음 (webapp-testing 스킬과 연동)

## 설치 및 설정

### 1. MCP 서버 설치
- `npx -y chrome-devtools-mcp@latest` 실행 가능 확인
- 또는 글로벌 설치: `npm install -g chrome-devtools-mcp`
- Node.js v20.19+ 필수 확인

### 2. Claude Code MCP 설정
- cokacdir의 MCP 설정에 chrome-devtools 서버 추가
- 설정 파일: `~/.claude/settings.json` 또는 프로젝트별 `.mcp.json`
- headless 모드 사용 (서버 환경):
  ```json
  {
    "mcpServers": {
      "chrome-devtools": {
        "command": "npx",
        "args": ["-y", "chrome-devtools-mcp@latest", "--headless", "--no-usage-statistics", "--no-performance-crux"]
      }
    }
  }
  ```
- `--no-usage-statistics`: Google 통계 수집 비활성화
- `--no-performance-crux`: CrUX API 호출 비활성화
- `--headless`: 서버 환경 (디스플레이 없음)

### 3. 기존 Playwright MCP와의 공존
- 두 MCP 서버가 동시에 사용 가능한지 확인
- 충돌 시 하나만 선택하는 방안 검토
- 기존 webapp-testing 스킬에서 chrome-devtools-mcp로 전환 가능 여부

### 4. 봇 팀 프롬프트 통합
- DIRECT-WORKFLOW.md의 L1 스모크테스트 섹션에 chrome-devtools-mcp 도구 안내 추가
- 팀장이 사용할 수 있는 핵심 도구 가이드:
  - `take_screenshot` — 스크린샷 캡처
  - `navigate_page` + `take_snapshot` — 라우트 접근성 확인
  - `list_console_messages` — 콘솔 에러 확인
  - `lighthouse_audit` — 접근성/SEO/성능 감사
  - `list_network_requests` — API 호출 패턴 확인

### 5. 시스템3문서 업데이트
- cross-verification-workflow 3문서에 chrome-devtools-mcp 도구 추가 기록

## ★★★ 절대 규칙 ★★★
- 기존 Playwright MCP 설정을 삭제하지 말 것 — 공존 또는 대체 판단 후 결정
- --no-usage-statistics 필수 (Google 통계 전송 차단)
- 서버 환경이므로 --headless 필수

## 완료 시그니처
- [grep] `chrome-devtools` @ `~/.claude/settings.json`
- [grep] `chrome-devtools-mcp` @ `prompts/DIRECT-WORKFLOW.md`

## 검증 시나리오
1. chrome-devtools-mcp 서버 정상 시작 확인
2. take_screenshot 도구 호출 → 스크린샷 파일 생성
3. lighthouse_audit 도구 호출 → 감사 결과 반환
4. 기존 Playwright MCP와 충돌 없이 공존 확인
5. 봇이 L1 스모크테스트에서 chrome-devtools 도구 사용 가능

## 레벨
- normal

## 프로젝트
- dev-system