목록 · 개발·코드

Chrome DevTools MCP

구글 크롬 팀이 만든 공식 서버입니다. 크롬을 실제로 열어 화면을 누르고, 콘솔 오류와 네트워크 요청을 읽고, 성능을 측정합니다. 만든 화면을 '봤다'고 말할 수 있게 해 주는 도구입니다.

바이브코딩·만들기 용도. 같은 목적의 다른 도구를 한 장에 모아 두었습니다.

도도리 AI연구소 · 최종 수정 2026년 9월 30일 · CC BY-NC 4.0

크롬 개발자도구 MCP 설치하는 법

설정 파일에 세 줄을 넣으면 끝납니다. 터미널을 몰라도 됩니다.

1. 설정 파일을 엽니다.
   Windows%APPDATA%\Claude\claude_desktop_config.json복사

   macOS~/Library/Application Support/Claude/claude_desktop_config.json복사
   파일이 없으면 새로 만드십시오. 메모장이나 텍스트 편집기면 충분합니다.
2. 아래 내용을 붙여 넣고 저장합니다.

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

   전체 복사
   이미 mcpServers가 있다면 그 안쪽에 항목만 추가하십시오. 중괄호를 두 번 쓰면 오류가 납니다.
3. Claude 앱을 완전히 껐다가 다시 켭니다. 창만 닫으면 반영되지 않습니다. Windows는 작업 표시줄 아이콘에서 종료, macOS는 Cmd+Q로 완전히 끄십시오. 이 단계를 빠뜨려서 안 된다고 하는 경우가 가장 많습니다.

먼저 알아 둘 것

준비물

Node.js LTS, 크롬 정식 버전 (엣지·웨일은 공식 지원 아님)

보안

열린 브라우저 내용을 모델에 넘김. 은행·사내 시스템 창을 띄운 채 쓰지 말 것

권장

별도 프로필이나 새 창에서 사용

이런 일을 시킵니다

만든 화면을 실제로 확인

크롬을 열어 버튼을 누르고 입력해 보게 합니다. '됐을 겁니다' 대신 '눌러 봤더니 이렇게 됩니다' 를 받습니다.

콘솔 오류와 네트워크 읽기

화면은 멀쩡한데 동작이 안 될 때 콘솔 오류와 실패한 요청을 직접 확인합니다.

성능 재보기

페이지 로딩 구간을 측정해 무엇이 느린지 짚습니다.

붙었는지 확인하기

설정을 마쳤으면 대화창에 이렇게 물어보십시오. 도구가 실제로 붙었으면 답이 돌아옵니다.

크롬 개발자도구 MCP 안 될 때 확인할 것

먼저 있어야 할 것이 둘입니다

Node.js LTS 와 크롬 정식 버전입니다. 엣지나 웨일 같은 다른 크로미움 계열은 공식 지원이 아니라 예상 밖으로 동작할 수 있습니다.

로그인된 창에서 쓰지 마십시오

브라우저에 열려 있는 내용이 그대로 모델에 전달됩니다. 은행이나 사내 시스템을 띄워 둔 채로 쓰지 말고 별도 프로필이나 새 창을 쓰십시오.

언제 쓰고, 언제 안 쓰나

웹 화면을 직접 만드는 사람에게 값이 큽니다. 문서 작업이나 데이터 처리에는 쓸 일이 없습니다.

비슷한 것 중에 왜 이걸

브라우저를 실제로 여는 것이 이 사이트에 넷 있습니다. webapp-testing 은 배포 전 점검, agent-browser 는 반복 작업 대행, playwright 는 Claude Code 플러그인 형태입니다. 이건 크롬 팀이 만든 공식 서버라 성능 측정과 네트워크 요청 읽기까지 닿습니다. 만든 화면이 느린 이유를 찾는 일이라면 넷 중 이것이 가장 깊이 들어갑니다. 17개 중 설치가 필요한 셋 중 하나입니다.

자주 묻는 것

크롬 개발자도구 MCP(Chrome DevTools) 는 어떻게 설치합니까?

주소가 아니라 명령으로 도는 서버입니다. 클로드 코드에서는 claude mcp add --scope user chrome-devtools -- npx chrome-devtools-mcp@latest 로 넣습니다. 직접 실행해 확인했습니다.

크롬 개발자도구 MCP(Chrome DevTools) 연결이 안 될 때는 무엇을 봅니까?

설치는 한 줄인데 두 가지가 먼저 있어야 합니다. Node.js LTS 버전과 크롬 정식 버전입니다. 엣지나 웨일 같은 다른 크로미움 계열은 공식 지원이 아니라 예상 밖으로 동작할 수 있습니다. 그리고 이 서버는 브라우저에 열려 있는 내용을 모델에게 그대로 넘깁니다. 로그인된 은행 창이나 사내 시스템을 띄워 둔 채로 쓰지 마십시오. 별도 프로필이나 새 창에서 쓰는 편이 안전합니다. 깃허브 별 48,855개로 MCP 서버 중 가장 많습니다. Node.js LTS 와 크롬 정식 버전입니다. 엣지나 웨일 같은 다른 크로미움 계열은 공식 지원이 아니라 예상 밖으로 동작할 수 있습니다.

크롬 개발자도구 MCP(Chrome DevTools) 로 무엇을 할 수 있습니까?

이 장에 적어 둔 것은 만든 화면을 실제로 확인, 콘솔 오류와 네트워크 읽기, 성능 재보기 입니다. 각 항목의 자세한 설명은 위쪽 쓰임새 칸에 있습니다.

개발·코드 도구를 고를 때

코드 생성·리팩터링·리뷰를 돕는 도구입니다. 사내 코드가 외부 서버로 전송되는 구조인지, 무료 요금제의 컨텍스트 길이 제한이 어디까지인지 확인하세요.

공식 사이트에서 계정 만들기

제휴 관계가 없는 일반 링크입니다.

별점과 댓글

이 MCP 서버을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.

함께 보면 좋은 도구

어느 단계에 무엇을 붙일지 모르겠다면 콘텐츠 제작 단계별 MCP 120종을 보십시오. 기획부터 성과 확인까지 여덟 단계로 갈라 두었습니다.