Chrome 개발자 도구 MCP 서버 사용법

디버깅은 항상 웹 개발의 핵심이었지만, AI 코딩 도우미의 등장으로 개발자들은 새로운 도전에 직면했습니다. 이러한 에이전트가 생성하는 코드를 실제로 보고 상호 작용할 수 있는 방법은 무엇일까요? **Chrome DevTools MCP 서버**를 소개합니다. 이는 AI 코딩 도우미를 Chrome의 **DevTools**와 연결하여 실시간 디버깅, 성능 통찰력 및 사용자 흐름 테스트를 수행하는 새로운 방법입니다.

이 가이드는 Chrome DevTools MCP 서버가 무엇인지, 어떻게 작동하는지, 왜 중요한지, 그리고 가장 중요하게는 **VS Code, Gemini CLI 및 Cursor에 설치하고 사용하는 방법**을 안내합니다. 이 가이드를 마치면 Chrome의 강력한 디버깅 환경을 AI 지원 개발 워크플로에 통합하는 방법을 알게 될 것입니다.

💡

아름다운 API 문서를 생성하는 훌륭한 API 테스트 도구를 원하십니까?

개발자 팀이 최대 생산성으로 함께 작업할 수 있는 통합된 올인원 플랫폼을 원하십니까?

Apidog는 귀하의 모든 요구 사항을 충족하며, 훨씬 더 저렴한 가격으로 Postman을 대체합니다!

버튼

Chrome DevTools MCP 서버란 무엇인가요?

**모델 컨텍스트 프로토콜(MCP)**은 대규모 언어 모델(LLM)이 외부 도구 및 데이터 소스에 연결할 수 있도록 하는 오픈 소스 표준입니다. **Chrome DevTools MCP 서버**는 Chrome DevTools의 디버깅 기능을 AI 에이전트에 직접 가져옵니다.

코드를 "맹목적으로" 생성하는 대신, 이제 AI 도우미는 다음을 수행할 수 있습니다:

Chrome을 실행하고 웹사이트를 엽니다.
실시간 성능 추적을 수집합니다.
DOM, CSS 및 JavaScript 런타임을 검사합니다.
레이아웃, 네트워크 및 콘솔 문제를 디버그합니다.
클릭, 양식 제출 및 탐색과 같은 사용자 행동을 시뮬레이션합니다.

이를 통해 AI 코딩 에이전트는 무엇이 작동할지 추측하는 대신, 실시간으로 코드 변경 사항을 검증, 테스트 및 최적화할 수 있으므로 훨씬 더 효과적입니다.

Chrome DevTools MCP 서버를 사용하는 이유는 무엇인가요?

다음은 Chrome DevTools MCP 서버를 워크플로에 통합하는 주요 사용 사례입니다:

1. 실시간으로 코드 변경 사항 확인
AI 도우미로 수정 사항을 생성하고 브라우저에서 즉시 작동하는지 확인합니다.

예시 프롬프트: "브라우저에서 변경 사항이 예상대로 작동하는지 확인하세요."

2. 네트워크 및 콘솔 오류 진단
CORS 문제, API 실패 또는 예기치 않은 런타임 경고를 식별합니다.

예시 프롬프트: "localhost:8080의 일부 이미지가 로드되지 않습니다. 무슨 일이죠?"

3. 사용자 행동 시뮬레이션
양식 제출 또는 탐색과 같은 사용자 흐름을 자동화하여 버그를 재현합니다.

예시 프롬프트: "이메일 주소를 입력한 후 양식 제출이 실패하는 이유는 무엇인가요?"

4. 실시간 스타일링 및 레이아웃 문제 디버그
DOM 및 CSS에서 오버플로 버그, 정렬 불량 또는 렌더링 문제를 검사합니다.

예시 프롬프트: "localhost:8080 페이지가 이상해 보입니다. 무슨 일이 일어나고 있는지 확인하세요."

5. 성능 감사 자동화
AI 도우미를 통해 Lighthouse 스타일 검사를 직접 트리거합니다.

예시 프롬프트: "localhost:8080이 느리게 로드됩니다. 더 빠르게 로드되도록 만드세요."

Chrome DevTools MCP 서버 설치 방법

**VS Code, Gemini CLI** 및 **Cursor**를 사용하든 설치는 간단합니다.

1. VS Code에 설치

**VS Code**를 엽니다.
**Ctrl + Shift + P** (Windows 또는 Linux) 또는 **Cmd + Shift + P** (Mac)를 누릅니다.
이제 **"MCP"**를 검색하고 **"MCP 서버 추가"**를 클릭합니다.
**"MCP 서버 찾아보기"**를 선택합니다.

확장 프로그램 아래 사이드바에서 **"MCP 서버 찾아보기"**를 다시 클릭합니다. 사용 가능한 MCP 서버 목록이 있는 웹 페이지로 리디렉션됩니다.
해당 웹 페이지에서 키워드 **"chrome"**을 사용하여 **"Chrome DevTools MCP 서버"**를 검색합니다.

**설치**를 클릭한 다음 **"VS Code에 설치"**를 선택합니다.

설치되면 VS Code AI 도우미는 실시간 디버깅을 위해 Chrome에 연결할 수 있습니다.

2. Cursor에 설치

**Cursor Editor**를 엽니다.
**설정 > 도구 및 MCP**로 이동합니다.

아래로 스크롤하여 **새 MCP 서버**를 클릭합니다.
MCP 구성 JSON 파일이 열리며, 여기에 다음 MCP 구성을 붙여넣어야 합니다.

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

저장하고 Cursor를 다시 시작합니다.

이제 Cursor는 Chrome DevTools MCP 서버를 인식하고 디버깅을 위해 AI 코딩 도우미에 연결합니다.

3. Gemini에 설치 (권장)

**Gemini**를 사용하는 경우 **Chrome DevTools MCP 서버**에 연결할 수도 있습니다. 사실, Chrome은 Gemini에서 이 기능을 활성화하여 디버깅 및 검사 기능을 최대한 활용할 것을 특별히 권장합니다.

먼저, 사용자 루트 디렉터리의 .gemini 폴더에서 **settings.json** 파일을 찾습니다. 여기에 MCP 구성을 추가할 것입니다. 다음 두 가지 방법으로 이 작업을 수행할 수 있습니다.

1. 폴더를 수동으로 탐색:

사용자 프로필 아래에서 .gemini 폴더를 검색한 다음 코드 편집기(예: VS Code)로 **settings.json** 파일을 엽니다.

2. 터미널 사용:

루트 디렉터리로 이동하여 다음 명령을 사용하여 .gemini 폴더를 엽니다.

cd ~
cd .gemini

.gemini 폴더 안에서 다음 명령을 사용하여 VS Code로 **settings.json** 파일을 엽니다.

code settings.json

3. Chrome DevTools MCP 서버를 Gemini CLI에 추가

파일에 다음 구성을 붙여넣어 Chrome DevTools MCP 서버를 추가합니다.

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

파일을 저장하고 닫습니다.

구성 파일은 다음과 같아야 합니다:

이제 **Gemini**를 열고 다음 명령을 실행하여 서버가 설치되었는지 확인합니다.

/mcp

이제 사용 가능한 서버 목록에 **Chrome DevTools MCP 서버**가 표시되어야 합니다. 여기에서 Gemini는 Chrome DevTools에 직접 연결하여 AI 지원으로 라이브 애플리케이션을 더 쉽게 디버깅할 수 있습니다.

Chrome DevTools MCP 서버 사용 방법

일단 설치되면 AI 도우미의 프롬프트를 통해 직접 상호 작용할 수 있습니다. 예를 들어:

1. 성능 분석
"web.dev의 LCP(Largest Contentful Paint)를 확인해 주세요."

2. CSS 문제 디버깅
"localhost:8080을 검사하고 헤더의 오버플로 요소를 수정하세요."

3. 콘솔 및 네트워크 로그
"localhost:3000에서 로그인 양식을 제출할 때 발생하는 콘솔 오류를 분석하세요."

4. 사용자 흐름 시뮬레이션
"회원가입 페이지로 이동하여 양식을 작성하고 제출이 실패하는 이유를 알려주세요."

이제 AI 도우미는 코드를 작성할 뿐만 아니라 Chrome에서 직접 인간 개발자처럼 코드를 테스트하고 디버그합니다.

고급 기능

1. 자동 추적
performance_start_trace 도구를 사용하면 AI 에이전트가 추적을 기록하고 성능 병목 현상을 자동으로 분석할 수 있습니다.

2. DOM 및 CSS 검사
AI 도우미는 실시간 DOM 구조를 검사하고 대상 CSS 또는 HTML 수정 사항을 제공할 수 있습니다.

3. 확장 가능한 워크플로
MCP로 구동되므로 동일한 설정이 MCP를 지원하는 다양한 편집기 및 에이전트에서 작동하여 일관성을 보장합니다.

참여 및 미래 전망

Chrome DevTools MCP 서버는 아직 **공개 미리보기** 상태입니다. 이는 빠르게 발전하고 있으며 Google은 개발자 피드백을 적극적으로 찾고 있음을 의미합니다. 향후 개선 사항은 다음과 같습니다:

**Lighthouse** 및 **Core Web Vitals**와의 더 깊은 통합.
더 풍부한 사용자 입력 시뮬레이션(다단계 흐름).
AI가 감지한 문제에 대한 강력한 시각화.
다중 탭 및 다중 장치 디버깅 지원 확장.

Chrome 개발자 블로그에서 업데이트를 팔로우하고 GitHub에 문제 또는 제안을 기여할 수 있습니다.

결론

**Chrome DevTools MCP 서버**는 단순한 개발자 도구가 아니라 전통적인 디버깅 워크플로와 AI 지원 코딩의 새로운 세계를 연결하는 다리입니다. 코딩 에이전트에게 실시간으로 보고, 테스트하고, 디버그할 수 있는 기능을 제공함으로써 코드 생성기에서 완전한 **디버깅 파트너**로 변모시킵니다.

VS Code를 사용하는 전문 개발자든, Cursor에서 실험하는 학생이든, 자동화를 탐색하는 AI 애호가든, Chrome DevTools MCP 서버를 설치하고 사용하면 생산성과 코드 품질을 크게 향상시킬 수 있습니다.

이제 Chrome DevTools가 AI 에이전트와 직접 통신할 수 있으므로 남은 유일한 질문은 다음과 같습니다. 다음으로 무엇을 구축하고, 테스트하고, 수정하시겠습니까?

버튼