Chrome DevTools MCP: AI 에이전트로 브라우저 세션 디버깅하기

AI 코딩 에이전트에게 “이 페이지에서 CORS 에러가 나는데 고쳐줘”라고 말하면 어떻게 될까요? 에이전트는 코드를 읽고, 추측하고, 아마도 맞는 답을 줄 겁니다. 하지만 실제 브라우저를 열어서 네트워크 탭을 확인하는 건 여전히 개발자의 몫이었습니다.

Chrome DevTools MCP는 이 간극을 메웁니다. AI 에이전트가 활성 브라우저 세션에 직접 연결하여 콘솔 로그를 읽고, 네트워크 요청을 분석하고, 스크린샷을 찍고, 성능 프로파일링까지 수행합니다. 추측이 아니라 실제 런타임 데이터를 기반으로 디버깅하는 것입니다.

Chrome DevTools MCP란

Chrome DevTools MCP는 MCP(Model Context Protocol) 서버로, AI 코딩 에이전트가 Chrome DevTools Protocol을 통해 브라우저를 제어하고 검사할 수 있게 해줍니다. Claude Code, Cursor, Gemini CLI, Cline 등 주요 에이전트를 모두 지원합니다.

핵심은 두 가지입니다.

세션 재사용: 이미 로그인된 브라우저 세션에 그대로 연결합니다. 새로 인증할 필요가 없습니다.
활성 디버깅: DevTools의 Network, Elements, Console 패널이 제공하는 것과 동일한 데이터에 AI가 직접 접근합니다.

참고 Chrome DevTools MCP는 오픈소스 프로젝트로, GitHub에서 소스를 확인할 수 있습니다.

작동 원리

AI 에이전트가 브라우저와 통신하는 전체 흐름은 다음과 같습니다.

sequenceDiagram
    participant A as AI 에이전트<br/>(Claude Code 등)
    participant M as Chrome DevTools<br/>MCP 서버
    participant C as Chrome 브라우저

    A->>M: MCP 도구 호출<br/>(예: list_network_requests)
    M->>C: Chrome DevTools Protocol<br/>(CDP 명령 전송)
    C-->>M: CDP 응답<br/>(네트워크 로그 데이터)
    M-->>A: 구조화된 결과 반환
    A->>A: 데이터 분석 & 솔루션 제시

MCP 서버가 중간 다리 역할을 합니다. AI 에이전트는 MCP 프로토콜로 도구를 호출하고, MCP 서버는 이를 Chrome DevTools Protocol(CDP) 명령으로 변환하여 브라우저에 전달합니다. 브라우저의 응답은 다시 구조화된 형태로 에이전트에게 돌아갑니다.

29개 도구

MCP 서버는 총 29개의 도구를 제공하며, 6개 카테고리로 나뉩니다.

카테고리	주요 도구	용도
입력 자동화	`click`, `fill`, `fill_form`, `type_text`	폼 작성, 버튼 클릭, 파일 업로드
네비게이션	`navigate_page`, `list_pages`, `select_page`	페이지 이동, 탭 전환
디버깅	`evaluate_script`, `list_console_messages`, `take_screenshot`	스크립트 실행, 콘솔 확인, 스크린샷
네트워크	`list_network_requests`, `get_network_request`	요청/응답 분석, CORS 디버깅
성능	`performance_start_trace`, `performance_analyze_insight`	성능 프로파일링, 병목 분석
에뮬레이션	`emulate`, `resize_page`	디바이스 에뮬레이션, 뷰포트 변경

--slim 플래그를 사용하면 핵심 도구 3개만 노출할 수도 있습니다. 토큰 사용량이 걱정된다면 유용한 옵션입니다.

시작하기: 3단계 설정

Step 1: Chrome 원격 디버깅 활성화

Chrome 주소창에 chrome://inspect/#remote-debugging을 입력하고, 원격 디버깅 권한을 부여합니다.

주의 Chrome 136+부터 기본 프로필에서는 원격 디버깅이 차단됩니다. 보안 강화 조치로, 쿠키 탈취 공격을 방지하기 위함입니다. --user-data-dir 플래그로 별도 프로필을 사용하거나, Chrome Beta/Canary 채널을 활용하세요.

Step 2: MCP 서버 설정

사용하는 에이전트에 맞게 MCP 서버를 등록합니다.

Claude Code:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor (.cursor/mcp.json):

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

Gemini CLI:

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

autoConnect 옵션을 함께 사용하면 기존 Chrome 세션에 자동으로 연결됩니다. MCP 설정 파일에서 직접 지정할 수도 있습니다.

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

Step 3: 연결 테스트

에이전트에서 간단한 명령으로 연결을 확인합니다. “현재 열린 페이지의 스크린샷을 찍어줘” 같은 요청이면 충분합니다. MCP 서버가 Chrome에 remote debugging 세션을 요청하고, Chrome 권한 대화상자에서 승인하면 연결이 완료됩니다.

autoConnect: 세션 재사용의 핵심

autoConnect는 Chrome M144+에서 도입된 핵심 기능입니다. 기존에는 Chrome을 --remote-debugging-port 플래그로 별도 실행해야 했지만, autoConnect를 사용하면 이미 실행 중인 Chrome 인스턴스에 자동으로 연결됩니다.

flowchart LR
    subgraph 기존["기존 방식"]
        A1["Chrome 종료"] --> A2["--remote-debugging-port로<br/>재실행"]
        A2 --> A3["인증 세션 소실"]
        A3 --> A4["재로그인 필요"]
    end

    subgraph 신규["autoConnect (M144+)"]
        B1["Chrome 그대로 사용"] --> B2["MCP 서버가<br/>자동 연결 요청"]
        B2 --> B3["권한 대화상자 승인"]
        B3 --> B4["기존 세션 유지"]
    end

이것이 왜 중요한지 생각해보면, 실제 디버깅 시나리오의 대부분은 로그인된 상태에서 발생합니다. OAuth 토큰, 세션 쿠키, 로컬 스토리지 데이터가 모두 보존된 채로 AI 에이전트가 접근할 수 있다는 것은 “내가 보는 그 화면”을 에이전트도 함께 본다는 의미입니다.

Tip --channel 옵션으로 Chrome 채널을 지정할 수 있습니다. M144+ 기능을 사용하려면 --channel=beta 또는 --channel=canary를 추천합니다.

주요 설정 옵션

옵션	설명
`--autoConnect`	Chrome M144+ 자동 연결
`--headless`	UI 없이 헤드리스 모드로 실행
`--browserUrl` / `-u`	특정 Chrome 인스턴스 URL로 연결
`--channel`	Chrome 채널 선택 (stable, beta, canary, dev)
`--isolated`	임시 사용자 데이터 사용 후 자동 정리
`--slim`	최소 3개 도구만 노출 (토큰 절약)
`--no-performance-crux`	Google CrUX API 통합 비활성화 (기본값: 활성화)

보안 모델

AI 에이전트가 브라우저를 제어한다는 건 강력하지만, 보안 관점에서 신중해야 합니다. Chrome DevTools MCP는 다음과 같은 보안 장치를 갖추고 있습니다.

명시적 권한 승인

원격 디버깅은 사용자가 수동으로 활성화해야 합니다. 자동으로 켜지지 않습니다. 매 세션마다 Chrome이 권한 대화상자를 표시하고, 사용자가 명시적으로 승인해야 디버깅 세션이 시작됩니다.

시각적 인디케이터

원격 디버깅이 활성화되면 Chrome 상단에 “Chrome is being controlled by automated test software” 배너가 표시됩니다. 디버깅 세션이 언제 활성 상태인지 항상 확인할 수 있습니다.

프로필 격리 (Chrome 136+)

Chrome 136부터 기본 프로필에서의 원격 디버깅이 차단됩니다. 이는 악성 소프트웨어가 원격 디버깅 포트를 통해 쿠키를 탈취하는 공격을 방지하기 위한 조치입니다. --user-data-dir로 별도 프로필을 사용하거나, --isolated 플래그로 임시 프로필을 생성하세요.

주의 --usageStatistics 옵션이 기본으로 활성화되어 있어 Google Analytics로 사용 데이터가 전송됩니다. 비활성화하려면 --usageStatistics=false를 명시적으로 지정하세요.

활용 사례

실시간 코드 검증

AI가 생성한 코드를 브라우저에서 바로 확인합니다. take_screenshot으로 렌더링 결과를 캡처하고, list_console_messages로 에러 여부를 확인하는 흐름입니다.

런타임 디버깅

“API 호출이 실패하는데 원인을 모르겠다”는 상황에서 list_network_requests로 실제 요청/응답을 분석합니다. CORS 에러, 잘못된 헤더, 타임아웃 등을 AI가 실제 네트워크 데이터를 보고 진단합니다.

사용자 흐름 재현

click, fill, navigate_page 등 입력 자동화 도구로 로그인 → 폼 작성 → 제출 같은 사용자 흐름을 자동으로 재현합니다. 수동 테스트의 반복 작업을 줄여줍니다.

성능 프로파일링

performance_start_trace로 추적을 시작하고, 특정 작업을 수행한 뒤 performance_analyze_insight로 병목 지점을 분석합니다. Lighthouse 감사도 lighthouse_audit 도구로 실행할 수 있습니다.

마무리

Chrome DevTools MCP는 AI 에이전트의 디버깅 능력을 한 단계 끌어올립니다. 코드만 보고 추측하던 에이전트가 이제 실제 브라우저 세션에 접근하여 런타임 데이터를 기반으로 문제를 진단합니다.

특히 autoConnect로 기존 세션을 재사용할 수 있다는 점은 실용성 면에서 큰 차이를 만듭니다. 로그인 상태가 유지된 채로 AI가 디버깅에 참여하니, “내가 보는 화면”과 “AI가 분석하는 화면”이 동일해집니다.

아직 발전 중인 프로젝트이지만, MCP 생태계와 함께 빠르게 성장하고 있습니다. AI 에이전트를 활용한 프론트엔드 디버깅 워크플로우를 고민하고 있다면, 한번 시도해볼 가치가 있습니다.