에러 복붙을 없애는 chrome-devtools-mcp 입문 가이드

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

역할: chrome-devtools-mcp 를 이 컴퓨터의 클로드 코드에 붙이고 동작까지 확인하는 담당

맥락: 지금은 화면에 뜬 빨간 글씨를 사람이 복사해 붙여넣어야 AI 가 상황을 압니다.
크롬 팀이 만든 이 서버를 붙이면 AI 가 실행 중인 페이지를 스스로 열어 볼 수 있습니다.

입력: <운영체제와 터미널, 예: macOS zsh>, <확인할 주소, 예: http://localhost:3000>,
<목표 한 줄, 예: 화면이 왜 비는지 AI 가 직접 보고 원인을 짚게 하고 싶다>

작업: 아래 네 단계를 순서대로 진행하세요.
1. 준비 확인: `node --version` 결과와 크롬 설치 여부를 확인해 보고하세요.
   저장소가 요구하는 Node 판이 아니면 붙이지 말고 먼저 알려주세요.
2. 붙이기: 사용량 통계 수집과 성능 자료 외부 전송을 끈 상태로 등록하세요.
   두 플래그의 정확한 이름은 저장소 README 에서 확인한 뒤 그 값을 쓰고, 이름을 지어내지 마세요.
3. 잡혔는지 확인: `claude mcp list` 로 이 서버가 어떻게 표시되는지 그대로 옮겨 주세요.
4. 걸리는지 확인: 제가 준 주소를 열고, 콘솔에 찍힌 메시지와 실패한 요청을 목록으로 보여주세요.
   코드는 아직 고치지 마세요. 무엇이 보이는지만 알려주세요.

제약: 로그인된 제 개인 크롬 창에 붙이지 마세요. 전용 프로필로만 여세요.
비밀키와 자격 증명 파일을 읽거나 출력하지 마세요.
확인하지 않은 도구 개수나 플래그 이름을 지어내지 마세요.

출력: 실행한 명령, 등록 결과 화면, 잡힌 도구 개수, 콘솔 메시지와 실패한 요청 목록,
그리고 남은 문제를 정리해 주세요.

검증: `claude mcp list` 에 `chrome-devtools` 가 `✔ Connected` 로 보여야 하고,
제가 준 주소에서 콘솔 메시지 목록이 실제로 돌아와야 합니다.
하나라도 실패하면 완료로 보고하지 말고 실패 지점과 다음 조치를 알려주세요.

이걸 붙이면 무엇이 달라지나

AI에게 "버튼을 눌러도 아무 일이 없습니다"라고 말해 본 적이 있을 것입니다. 돌아오는 답은 대개 되묻기입니다. 콘솔에 뭐라고 떴는지 알려주세요. 그래서 브라우저를 열고, 개발자 도구를 열고, 빨간 글씨를 긁어서 붙여넣습니다. 고치겠다고 답이 오면 새로고침하고, 또 긁어서 붙여넣습니다.

이건 실력 문제가 아닙니다. AI는 제 화면을 못 봅니다. 코드 파일은 읽지만, 그 코드가 실제로 돌아가서 만들어 낸 화면은 못 봅니다. 그래서 사람이 눈 노릇을 대신하게 됩니다.

chrome-devtools-mcp는 그 눈을 붙입니다. 크롬을 만든 팀이 직접 내놓았고, 붙이고 나면 AI가 지금 켜져 있는 페이지를 스스로 엽니다.

• 페이지를 열고 버튼을 눌러 봅니다
• 콘솔에 찍힌 메시지를 직접 읽습니다 — 콘솔은 브라우저가 에러를 찍어 두는 자리입니다
• 실패한 요청을 목록으로 뽑습니다 — 서버에 뭘 달라고 했다가 못 받은 기록입니다
• 화면 사진을 찍어 눈으로 확인합니다
• 페이지가 왜 느린지 기록을 떠서 짚습니다

고친 다음에 다시 열어 확인하는 것까지 혼자 합니다. 여기가 체감이 갈리는 지점입니다. 지금은 고쳤다는 말을 듣고 사람이 새로고침해서 확인해 줘야 하는데, 그 왕복이 없어집니다.

Quick Start

공식 저장소: chrome-devtools-mcp 공식 GitHub · Apache-2.0 무료

터미널에 아래 한 줄이면 끝납니다. 뒤에 붙은 두 개는 켜기 전에 꺼 두는 스위치입니다. 무엇을 끄는 것인지는 STEP 2에서 설명합니다.

claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

붙었는지 눈으로 확인합니다.

claude mcp list

등록이 끝나면 클로드 코드를 껐다가 다시 켜세요. 열려 있던 대화창은 새 도구를 모른 채로 계속 돕니다. "붙였는데 아무 일도 안 일어난다"의 절반이 여기입니다.

진짜 걸리는지 확인

붙었는지가 아니라 실제로 브라우저를 여는지를 봐야 합니다. 새 대화창에서 아래를 붙여넣으세요.

Check the performance of https://developers.chrome.com

이 문장은 저장소 README가 "제대로 붙었는지 보는 첫 프롬프트"로 지정한 것을 그대로 옮긴 것입니다.

STEP 1 · 3분무엇을 붙이는 건지 먼저 알기

이 단계에서는 명령을 치기 전에 이게 무엇인지부터 잡습니다. 크롬 확장 프로그램으로 착각하면 설치 자리를 틀리기 때문입니다.

이건 브라우저에 까는 물건이 아닙니다. AI 도구 쪽에 붙이는 것이고, 붙이고 나면 AI가 크롬을 리모컨처럼 조종합니다. 사람이 크롬에서 뭘 누를 필요는 없습니다.

숫자부터 봅니다. 아래는 2026년 8월 30일에 깃허브에서 직접 읽은 값입니다.

만든 곳이 이 도구의 값어치입니다. 브라우저를 조종하는 도구는 이미 여럿 있지만, 크롬이 안쪽에서 무슨 일을 하는지 가장 잘 아는 쪽이 만든 것은 이것입니다.

준비물은 두 개뿐입니다. 크롬 최신 안정판, 그리고 Node입니다.

node --version

STEP 2 · 4분켜기 전에 꺼야 할 두 가지

이 단계에서는 기본으로 켜져 있는 두 개를 끕니다. 나중에 알면 이미 나간 뒤이기 때문입니다.

저장소 README가 직접 적어 둔 내용입니다. 제가 해석한 것이 아니라 문서에 그렇게 쓰여 있습니다.

첫째, 사용량 통계 수집이 기본으로 켜져 있습니다. 구글이 도구가 얼마나 잘 도는지 보려고 모읍니다. README는 "Data collection is enabled by default" 라고 굵게 적어 뒀고, 끄는 스위치로 --no-usage-statistics 를 안내합니다. 크롬 브라우저 쪽에서 통계 전송을 이미 꺼 뒀더라도 이건 별개라서 따로 꺼야 합니다. 이것도 README에 그대로 적혀 있습니다.

둘째, 성능을 재면 주소가 구글로 나갑니다. 페이지가 느린 이유를 볼 때, 다른 사람들 컴퓨터에서는 이 페이지가 얼마나 빨랐는지를 같이 보여주려고 주소를 구글 쪽에 보냅니다. 남한테 아직 안 보여준 개발 중인 주소라면 신경 쓰이는 대목입니다. 끄는 스위치는 --no-performance-crux 입니다.

그래서 Quick Start의 한 줄에 두 개가 붙어 있던 것입니다.

claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

이미 스위치 없이 붙였다면 지웠다가 다시 붙이는 쪽이 빠릅니다.

claude mcp remove chrome-devtools --scope user
claude mcp list

STEP 3 · 3분로그인된 내 크롬에는 붙이지 않기

이 단계에서는 이 도구의 가장 큰 위험 하나를 피해 갑니다. 편하려다 계정을 통째로 넘기는 일이 여기서 생기기 때문입니다.

저장소 첫머리 경고문이 이렇게 적혀 있습니다. 이 서버는 브라우저 안에 있는 내용을 AI 쪽에 그대로 열어 준다는 것, 그리고 남에게 보이면 곤란한 개인 정보를 그 브라우저에 두지 말라는 것입니다.

다행히 기본값은 안전한 쪽입니다. 그냥 붙이면 이 도구는 전용 크롬 창을 따로 띄웁니다. 제가 평소 쓰는, 메일과 은행이 로그인돼 있는 그 창이 아닙니다.

위험은 일부러 내 크롬에 붙일 때 생깁니다. 검색해 보면 "이미 로그인해 둔 창에 그대로 붙이는 법"이 나오는데, 그 방법은 크롬에 바깥에서 조종할 수 있는 문을 하나 여는 것입니다. README도 이 대목에만 경고 상자를 따로 달아 뒀습니다 — 그 문이 열려 있는 동안에는 이 컴퓨터의 어떤 프로그램이든 그 브라우저를 조종할 수 있습니다.

입문 단계에서는 그 방법을 쓰지 않는 쪽을 권합니다. 로그인이 꼭 필요한 화면을 확인해야 한다면, 전용 창에서 그 서비스에 새로 로그인하는 쪽이 낫습니다.

작업이 끝날 때마다 흔적을 지우고 싶다면 스위치가 하나 더 있습니다.

claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux --isolated

STEP 4 · 4분"안 되는데요" 대신 이렇게 시킨다

이 단계에서는 실제로 쓰는 말투를 익힙니다. 도구를 붙여 놓고도 예전처럼 물어보면 아무것도 안 달라지기 때문입니다.

예전에는 이렇게 말했습니다.

나       로그인 버튼 눌러도 아무 일이 없습니다

AI       콘솔에 어떤 에러가 뜨는지 알려주시겠어요?

나       (브라우저 열고 → 개발자 도구 열고 → 긁어서 붙여넣기)

붙인 뒤에는 가서 보라고 시킵니다.

http://localhost:3000 을 열고 로그인 버튼을 눌러 보세요.
콘솔에 찍힌 메시지와 실패한 요청을 목록으로 보여주세요.
아직 코드는 고치지 마세요.

원인이 잡히면 그다음에 고치라고 시킵니다. 고친 뒤 다시 열어 확인하는 것까지 한 문장에 넣는 것이 요령입니다.

방금 찾은 원인을 고치고, 다시 페이지를 열어 그 에러가 사라졌는지 직접 확인해 주세요.
확인한 화면 사진도 같이 보여주세요.

말투는 하나만 기억하면 됩니다. "봤어?"가 아니라 "가서 보고 와" 입니다.

STEP 5 · 4분대화가 무거워질 때 도구 수를 줄인다

이 단계에서는 이 도구가 공짜가 아니라는 점을 짚습니다. 도구를 붙이면 그 목록이 매 대화마다 얹히기 때문입니다.

README에 적힌 도구는 57개입니다. AI는 일을 시작하기 전에 그 목록을 훑어야 어떤 도구가 있는지 압니다. 대화창이 한 번에 담을 수 있는 분량은 정해져 있으니, 목록이 길면 그만큼 대화가 일찍 무거워집니다.

가벼운 모드가 따로 있습니다. --slim 을 붙이면 도구가 3개로 줄어듭니다.

claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest --slim --no-usage-statistics --no-performance-crux

다만 이 글이 다루는 일에는 가벼운 모드가 안 맞습니다. 공식 문서에 적힌 3개는 페이지 열기·스크립트 실행·화면 사진뿐이고, 콘솔 메시지와 실패한 요청을 뽑는 도구가 그 안에 없습니다. 에러를 대신 읽게 하려고 붙이는 것이라면 기본 상태로 두는 쪽이 맞습니다.

토큰을 아끼고 싶다면 순서를 이렇게 잡으세요. 기본으로 먼저 써 보고, 대화가 자주 무거워질 때 그때 줄입니다. 처음부터 줄여 놓으면 왜 안 되는지 모른 채 헤매게 됩니다.

STEP 6 · 3분플러그인으로 깔면 뭐가 더 오나

이 단계에서는 설치 방법이 두 가지인 이유를 정리합니다. 검색하면 서로 다른 명령이 나와서 헷갈리기 때문입니다.

지금까지 쓴 터미널 한 줄은 도구만 가져옵니다. 다른 방법으로 깔면 도구에 더해 사용 설명서까지 같이 옵니다. AI가 이 도구들을 어떤 순서로 써야 하는지 적어 둔 안내문입니다.

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

그런데 이 방법은 막히는 경우가 저장소에 적혀 있습니다. 회사 망 안이거나 바깥 연결이 막힌 환경이면 Failed to clone repository 라는 글씨와 함께 실패합니다. 저장소의 문제 해결 문서가 이 증상을 항목으로 따로 만들어 두었고, 해결책으로 터미널 한 줄 설치를 안내합니다.

그래서 이 글은 터미널 한 줄을 기본으로 잡았습니다. 먼저 막히지 않는 쪽으로 붙여 쓰고, 안내문까지 원하면 그때 플러그인 쪽을 시도하세요. 다만 두 방법을 겹쳐 깔지 마세요. 이미 붙여 둔 것이 있으면 먼저 지우라고 저장소가 못 박아 두었습니다.

STEP 7 · 3분이걸 써야 하는 조건

이 단계에서는 안 깔아도 되는 사람을 걸러 냅니다. 모두에게 필요한 도구가 아니기 때문입니다.

깔면 값을 하는 경우입니다.

• 화면이 있는 것을 만듭니다 — 웹사이트, 관리 화면, 뭐든 브라우저에서 보이는 것
• 에러 글씨를 복사해 붙여넣는 일이 하루에 몇 번씩 있습니다
• 고쳤다는 말을 듣고 새로고침해서 확인해 주는 일이 반복됩니다
• 남이 만든 화면이 왜 느린지 알고 싶습니다

안 깔아도 되는 경우입니다.

• 브라우저에서 보는 것을 안 만듭니다
• 글이나 자료 정리에만 AI를 씁니다
• 이미 대화가 자주 무거워져서 도구를 줄이는 중입니다

붙이는 데 5분, 지우는 데 한 줄입니다. 맞는지 모르겠으면 한 주 써 보고 판단하세요.

claude mcp remove chrome-devtools --scope user

자주 막히는 곳

FAQ

크롬 확장 프로그램인가요

아닙니다. 크롬 웹스토어에서 받는 물건이 아니라 AI 도구 쪽에 붙이는 것입니다. 크롬에서는 아무것도 안 해도 됩니다. 붙이고 나면 AI가 크롬을 대신 띄웁니다.

클로드 코드 말고 다른 도구에도 붙나요

붙습니다. 저장소가 커서·코덱스·Copilot·Gemini CLI 등 스무 곳이 넘는 도구의 설정 방법을 항목별로 적어 두었습니다. 다만 명령 모양이 도구마다 다릅니다. 위의 명령은 클로드 코드 전용이니, 다른 도구를 쓴다면 chrome-devtools-mcp 공식 GitHub 의 해당 항목을 보세요.

사용량 통계를 껐는지 어떻게 확인하나요

claude mcp list 를 치면 등록된 명령 줄이 그대로 보입니다. 거기에 --no-usage-statistics 가 보이면 꺼진 것입니다. 안 보이면 STEP 2의 지우고 다시 붙이는 두 줄을 치세요.

제 크롬에 로그인해 둔 상태 그대로 쓰고 싶습니다

가능하지만 권하지 않습니다. 그 방법은 크롬에 바깥에서 조종할 수 있는 문을 여는 것이고, 그동안에는 이 컴퓨터의 다른 프로그램도 그 브라우저에 붙을 수 있습니다. README가 이 대목에 경고를 달아 둔 이유입니다. 로그인이 필요하면 전용 창에서 새로 로그인하세요.

별이 5만 개면 안전한가요

아닙니다. 별은 관심도 신호일 뿐입니다. 다만 이건 아무나 만든 것이 아니라 크롬 개발자 도구 팀 저장소이고 라이선스가 Apache-2.0으로 공개돼 있습니다. 그래도 켜기 전에 통계 수집과 성능 자료 전송을 끄는 두 스위치는 직접 확인하세요.

엣지나 웨일에서도 되나요

저장소는 구글 크롬과 Chrome for Testing만 공식 지원한다고 적었습니다. 다른 크로미움 계열 브라우저는 될 수도 있지만 보장하지 않으며, 예상 못 한 동작이 있을 수 있다고 함께 적혀 있습니다.

지우고 싶으면 어떻게 하나요

claude mcp remove chrome-devtools --scope user
claude mcp list

알아 둘 한계

이 글은 저장소 문서를 읽고 썼습니다. 제가 직접 붙여서 돌려 본 글이 아닙니다. 스타 수와 판 번호는 2026년 8월 30일에 깃허브에서 직접 읽은 값입니다. ✔ Connected · Added stdio MCP server ... to user config · Removed MCP server ... from user config 세 문구는 이 컴퓨터의 클로드 코드에서 같은 날 직접 확인한 것입니다. 하지만 이 서버를 실제로 붙여 페이지를 열어 본 결과는 이 글에 없습니다. 크롬 창이 어떻게 뜨는지, 콘솔 목록이 어떤 모양으로 돌아오는지는 저장소 설명을 옮긴 것이지 제가 본 화면이 아닙니다. 명령과 스위치 이름은 전부 저장소 README에 적힌 것을 그대로 옮겼습니다.

도구가 몇 개 잡히는지는 문서 두 곳이 서로 다르게 읽힙니다. README의 도구 목록은 57개를 늘어놓는데, 같은 README의 설정 목록을 보면 그중 메모리·확장·서드파티·WebMCP·앱 설치 갈래 26개는 기본이 꺼짐이라고 적혀 있습니다. 실험 스위치를 켜야 나오는 것도 몇 개 더 있습니다. 그래서 방금 붙인 상태에서 실제로 몇 개가 잡히는지는 어느 한쪽만 봐서는 안 나옵니다. 정확한 숫자가 필요하면 붙인 뒤 AI에게 도구 목록을 세어 달라고 하는 쪽이 확실합니다.

가벼운 모드는 이 글의 목적과 안 맞습니다. --slim 의 3개는 공식 문서 기준으로 페이지 열기·스크립트 실행·화면 사진뿐입니다. 콘솔과 실패한 요청을 뽑는 도구가 빠져 있으니, 에러를 대신 읽히려는 목적이라면 줄이면 안 됩니다.

브라우저 안에 있는 것이 AI 쪽에 그대로 넘어갑니다. 저장소가 첫머리에 적어 둔 문장입니다. 남에게 보이면 곤란한 것이 열려 있는 브라우저에는 붙이지 마세요.

모든 브라우저를 봐주지 않습니다. 공식 지원은 구글 크롬과 Chrome for Testing까지입니다.

탭이 아주 많으면 권하지 않습니다. 이 서버는 모든 탭을 강제로 깨우기 때문에, 탭이 수백 개인 브라우저에서는 쓰지 말라고 저장소가 적어 두었습니다.

화면을 본다고 해서 다 고치는 것은 아닙니다. 에러를 읽어 오는 것과 원인을 맞게 짚는 것은 다른 일입니다. 사람이 붙여넣던 왕복이 줄어드는 것이지, 고치는 능력이 새로 생기는 것은 아닙니다.

공식 자료

• 저장소 — chrome-devtools-mcp 공식 GitHub · Apache-2.0 · 스타 50,109 (2026-08-30 직접 확인)
• 크롬 팀 발표글 — Chrome DevTools (MCP) for your AI agent 공식 블로그
• 도구 전체 목록 — tool-reference.md · 57개
• 가벼운 모드 도구 — slim-tool-reference.md · 3개
• 막혔을 때 — troubleshooting.md
• 붙이는 방법 일반 — 클로드 코드 공식 문서