SION.LAB
자료실
자료실
개발도구MCP 서버official

Chrome DevTools MCP

코딩 에이전트가 실제 Chrome 브라우저를 제어하고 검사하도록 연결하는 Chrome 공식 MCP 서버

자료 등록 2026년 7월 13일

한눈에 보기

공식 검증 2026년 8월 29일

프로토콜
MCP · 로컬 stdio
인증
공식 문서에서 권한 범위 확인
비용
서버는 무료 공개, 연결 서비스 비용은 별도 확인
제공 상태
공개 제공
공식 빠른 시작GitHub · https://github.com/ChromeDevTools/chrome-devtools-mcp

Use cases

이럴 때 이렇게 연결합니다

먼저 어떤 어려움을 해결하는지 읽고, 그림에서 입력과 전달값, 사람 확인 지점을 따라가 보세요. 결과 패널은 해당 흐름이 끝났을 때 남는 값을 보여 줍니다. 아래 내용은 공식 기능을 바탕으로 만든 예시 설계이며, SION.LAB의 실제 운영 사례를 뜻하지 않습니다.

추천 구성 · Situation 01

DOM·네트워크·콘솔을 따로 보느라 화면에서 발생한 오류의 원인을 코드와 연결하기 어려운 업무

어떤 어려움인가
실제 브라우저에서 UI 오류를 진단하는 개발팀이 자주 마주치는 문제입니다. 구체적으로는 'DOM·네트워크·콘솔을 따로 보느라 화면에서 발생한 오류의 원인을 코드와 연결하기 어려운 업무' 상황입니다.
이렇게 해결합니다
Chrome DevTools MCP 단계에서는 허용한 도구와 권한 범위 안에서 필요한 작업만 호출합니다. 입력 범위는 '재현 URL, 사용자 동작, 관찰할 네트워크·콘솔 범위'입니다. 필요한 필드만 골라 '재현 단계와 DOM·요청·오류 근거가 묶인 진단 메모' 형태로 정리합니다.
왜 연결하는가
처음에는 Chrome DevTools MCP 하나만 사용합니다. 입력·처리·검토 경계를 확인한 뒤에만 다른 시스템과 연결하면 실패 원인을 찾기 쉽습니다.
마지막 확인
검토 대상은 '재현 단계와 DOM·요청·오류 근거가 묶인 진단 메모'입니다. 원문 근거, 제외 조건, 누락 항목이 구분되는지 확인합니다. 결과를 바로 반영하지 않고 담당자가 확인한 뒤 다음 단계로 넘깁니다.
Sequence입력부터 검토 결과까지
  1. 01 · 입력작은 입력 범위재현 URL, 사용자 동작, 관찰할 네트워크·콘솔 범위
    업무 조건
  2. 02 · 현재 자료Chrome DevTools MCPMCP 도구 호출: 입력 범위는 '재현 URL, 사용자 동작, 관찰할 네트워크·콘솔 범위'입니다. 필요한 필드만 골라 '재현 단계와 DOM·요청·오류 근거가 묶인 진단 메모' 형태로 정리합니다.
    처리 결과
  3. 03 · 사람 확인담당자 검토검토 대상은 '재현 단계와 DOM·요청·오류 근거가 묶인 진단 메모'입니다. 원문 근거, 제외 조건, 누락 항목이 구분되는지 확인합니다.
    확인 완료
  4. 04 · 결과검토용 결과재현 단계와 DOM·요청·오류 근거가 묶인 진단 메모

Result

이 흐름으로 남는 값

연결

연결

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

Chrome DevTools MCP는 코딩 에이전트가 실행 중인 Chrome 브라우저를 제어하고 검사하게 해주는 MCP 서버입니다. 에이전트가 Chrome DevTools의 기능을 그대로 사용해 자동화와 심층 디버깅, 성능 분석을 수행합니다.

주요 기능

  • 성능 인사이트: DevTools로 트레이스를 기록하고 실행 가능한 성능 개선점을 추출합니다
  • 브라우저 디버깅: 네트워크 요청을 분석하고 스크린샷을 촬영하며 콘솔 메시지를 확인합니다
  • 자동화: Puppeteer 기반으로 동작 결과를 자동으로 대기합니다

제공 도구는 입력 자동화 10종, 내비게이션 6종, 에뮬레이션 2종, 성능 3종, 네트워크 2종, 디버깅 8종, 메모리 12종, 확장 프로그램 5종, 서드파티 2종, WebMCP 2종으로 구분됩니다. 준비물은 Node.js LTS와 npm, 그리고 현재 안정 버전 이상의 Chrome입니다. Claude Code에서는 `claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`로 등록하며, 기본 작업만 필요하면 `--slim --headless` 인자로 경량 모드를 사용합니다. 사용 통계가 기본 수집되므로 원하지 않으면 `--no-usage-statistics` 인자를 붙입니다. 문서에는 이 도구가 브라우저 인스턴스의 내용을 MCP 클라이언트에 노출한다는 주의 사항이 명시돼 있습니다.

웹 애플리케이션의 실제 렌더링 결과와 성능을 에이전트로 검증하려는 프론트엔드 개발자에게 맞습니다.

댓글 0

아직 댓글이 없습니다. 첫 댓글을 남겨보세요.

문의하기