Chrome dev tools mcp 사용해보기 🍪

VS Code + GitHub Copilot과 함께 써보는 최신 워크플로우

요즘 웹 개발은 코드만 짜는 걸로 끝나지 않는다.
런타임에서 실제로 무슨 일이 벌어지는지 — 네트워크 요청이 어떻게 오가는지, 렌더링 병목이 어디서 생기는지 — 이런 걸 함께 봐야 진짜 디버깅이라고 할 수 있다.

그런데 이제는 이런 과정을 AI와 함께 자동화할 수 있는 시대가 왔다 !! 🙊

Chrome DevTools MCP를 사용하면 되는데,
이 글에서는 MCP가 뭐고, VS Code + Copilot 환경에서 어떻게 쓸 수 있는지, 그리고 실제 예제까지 한번 해보기로 했다.

 

Chrome DevTools MCP가 뭐길래?

MCP (Model Context Protocol)은 AI 모델이 외부 도구나 데이터랑 직접 상호작용할 수 있게 해주는 프로토콜이다.

예를 들어 AI가 단순히 “코드만” 이해하는 게 아니라, 브라우저를 직접 띄우고 성능을 측정하거나, 콘솔 로그를 읽고 원인을 분석할 수 있게 만들어준다.

 

그걸 Chrome DevTools와 연결한 게 바로 Chrome DevTools MCP이다.
Google이 만든 이 프로젝트는 AI가 실제 크롬 브라우저를 제어하고, DevTools의 기능을 자동으로 활용할 수 있게 해준다.

🔍 예를 들어, AI가 페이지를 로드하고 성능 트레이스를 수집한 다음 “렌더링이 느린 프레임 3개를 찾아줘”라고 하면, 브라우저를 돌려보고 데이터를 기반으로 바로 피드백을 줄 수 있어요.

 

이건 단순한 “코드 생성”에서 한 단계 더 나아가, AI가 ‘실행 환경을 직접 보고 판단하는 도우미’로 진화한 사례라고 볼 수 있다.

 

 

프론트엔드 개발자에게 왜 중요한가?

프론트엔드에서 MCP가 주목받는 이유는 간단하다.
“디버깅과 검증 과정을 자동화해주는 AI 도구”이기 때문이다.

• 🪲 디버깅 자동화
  콘솔 에러나 네트워크 실패, 렌더링 지연 같은 문제를 MCP가 자동으로 감지해서 알려준다.
• ⚡ 성능 최적화
  LCP, CLS, 렌더링 병목 같은 지표를 DevTools 데이터를 통해 측정하고 Copilot이 개선 방향을 제안할 수 있다.
• 💬 VS Code + Copilot 통합
  Copilot이 코드를 짜는 동시에 MCP로 브라우저 상태를 모니터링할 수 있다.
  코드만 보고 추측하던 시절은 끝났습니다 🙌
• ✅ 테스트 자동화
  단위 테스트로 잡기 어려운 UI 흐름(예: 로그인, 폼 제출 등)도 AI가 실제 브라우저를 돌려서 테스트할 수 있다.

 

VS Code + Copilot 환경에서 간단히 써보기

세팅

• Node.js 최신 버전 (v20 이상 권장)
• Chrome 최신 버전
• VS Code에 Copilot 활성화
• 프로젝트 루트에 mcpServers 설정 추가

설치 예제

npx -y chrome-devtools-mcp@latest

또는 프로젝트 설정에 MCP 서버를 등록할 수도 있다.

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

 

VsCode + Copilot를 명령어로 설치하는 방법도 있다.

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

 

추가가 완료된 모습

설정이 끝나면 Copilot 대화창에서 이렇게 물어볼 수 있다. 👇

“http://localhost:3000 페이지 열고, Submit 버튼 눌러서 성능 트레이스 찍고, 느린 프레임 3개 보여줘.”

 

Copilot은 MCP를 통해 실제로 브라우저를 제어하고 결과를 분석해서 답을 준다.
이게 진짜로 돌아가는 걸 보면 꽤 신기하다 🎩

 

예제 코드 살짝 보기

예를 들어 로컬에서 테스트 페이지를 열고 폼 제출 후 에러를 잡아보려면 이렇게 쓸 수 있다.

await mcp.open_url({ url: 'http://localhost:3000' });
await mcp.click({ selector: 'button[type="submit"]' });
const errors = await mcp.list_console_messages({ types: ['error'] });
return { errors };

이러면 브라우저가 실제로 동작하면서 콘솔 에러를 수집하고, Copilot이 “폼 validation 실패”라든가 “API 응답 형식 변경됨” 같은 분석을 해준다.
AI가 실행 결과까지 보고 피드백해주는 개발 보조 도구로 더 폭넓게 사용할 수 있게 된 것이다.

 

실무 적용 팁과 주의사항

💡 팁

• 작게 시작하기 — 프로젝트 전체보다 특정 페이지나 컴포넌트 하나로 먼저 테스트
• 프롬프트 설계 — “페이지 열어줘 → 버튼 눌러줘 → 로그 요약해줘”처럼 단계적 프롬프트로 설계
• 로그 저장하기 — MCP가 수집한 콘솔/네트워크 로그는 디버깅 회고 때 유용
• Copilot 연계 — 반복 프롬프트를 코드 함수로 만들어두면 편합니다

⚠️ 주의사항

• 민감정보 노출 주의 — API 키, 비밀번호 같은 건 MCP 로그에 포함되지 않게 하자
• 로컬 환경에서 테스트 — 프로덕션에 바로 쓰지 말고 스테이징 환경부터 적용
• AI 판단 과신 금지 — MCP가 제시하는 결과는 참고용입니다. 직접 검증은 항상 필요하다
• 보안 설정 확인 — 사내 보안정책이나 확장 프로그램이 WebSocket/CDP를 막을 수도 있다

 

기억해둘 것들.....

• Chrome DevTools MCP는 AI가 실제 브라우저를 제어하고, 콘솔·DOM·성능 데이터를 직접 읽을 수 있는 도구
• VS Code + Copilot 환경에서는 “코드 작성 → 실행 → 피드백”이 전부 자동화될 수 있음
• 디버깅 속도, 리뷰 품질, 성능 개선 면에서 큰 도움을 주지만, 보안·환경 설정은 꼭 신중히 다뤄야 함

 

참고 자료

• Use MCP servers in VS Code
• Chrome Developers Blog – Chrome DevTools MCP
• Addy Osmani – Give your AI eyes: Introducing DevTools MCP
• GitHub – ChromeDevTools/chrome-devtools-mcp

Give your AI eyes: Introducing Chrome DevTools MCP

AI 에이전트를 위한 Chrome DevTools (MCP)  |  Blog  |  Chrome for Developers

GitHub - ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents