디버그 · Chrome 공식
화면 봐 달라니까, 짐작으로 답했어요
코드를 고친 다음 “화면 한번 봐줘”라고 했어요. “잘 나올 거예요”라는 답이 왔어요. 근데 열어 보니 콘솔은 빨갛고, 헤더가 본문을 덮고 있어요.
브라우저 없이 물으면
방금 고친 페이지, 화면 봐줘.
코드상으론 문제없어 보여요. 헤더도 잘 나올 거예요.
크롬을 직접 보면
로컬 페이지 열어서, 콘솔 에러랑 레이아웃 깨진 곳만 짚어줘.
콘솔에 CORS 에러 2개, 이미지 404 하나. 헤더가 sticky라 본문 위 48px가 가려져 있어요. 네트워크에선 폰트 요청이 막혔어요.
에이전트는 코드는 읽지만, 브라우저는 못 봐요. 그래서 “봐줘”라고 하면 코드로 짐작해요. 콘솔 에러, 막힌 요청, 겹친 레이아웃은 실제로 열어야 보여요. 그걸 사람이 열어서 캡처하고 설명하는 것도 매번 일이에요.
이 도구를 붙이면, 에이전트가 크롬을 직접 열고 콘솔부터 읽어 줘요.
플러그인이 공식 권장
스킬까지 쓰려면 플러그인 설치가 공식 권장이에요. MCP만 붙이는 한 줄도 문서에 있어요.
- 1
이 말을 그대로 AI에 붙여넣으세요
Chrome DevTools MCP를 설치해줘. 공식은 Claude Code에서 /plugin marketplace add ChromeDevTools/chrome-devtools-mcp 다음에 /plugin install chrome-devtools-mcp@chrome-devtools-plugins 야. MCP만 필요하면 claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest. 기본은 전용 프로필이고, 지금 열린 내 크롬은 --autoConnect야.MCP만 붙일 때.
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest - 2
설치가 끝났다면, 이렇게 물어보세요
로컬 개발 서버 페이지를 크롬에서 열고, 콘솔 에러와 레이아웃이 가려진 곳만 짧게 보고해줘.
별 50,944는 2026-09-05 GitHub API 값이에요.
세 줄 요약
이럴 때
방금 만든 페이지가 로컬에서 깨졌을 때. 성능, 접근성, 콘솔을 에이전트가 직접 보게 하고 싶을 때.
들어 있는 것
MCP만 깔거나, 플러그인으로 스킬까지. 공식 CLI는 npx chrome-devtools-mcp@latest. Claude Code는 플러그인이 권장이에요.
안 되는 것
기본은 전용 프로필이지, 로그인된 내 탭이 아니에요. MCP만 깔면 플러그인 스킬이 빠져요. 브라우저 내용이 에이전트에 열리니, 개인 계정이 열린 창은 붙이지 마세요. 사용 통계는 기본이 수집이에요.
써본 사람들 반응
공식 글과 설치 가이드의 경고를 같이 옮겨요.
도움 됐다는 쪽
“Chrome DevTools MCP allows AI coding assistants to see and interact with a live Chrome browser.” addyosmani.com
— Addy Osmani
“lets your coding agent (such as Antigravity, Claude, Cursor or Copilot) control and inspect a live Chrome browser.” github.com
— ChromeDevTools/chrome-devtools-mcp
아쉽다는 쪽
“Don’t use claude mcp add. The full plugin gives you the MCP server plus 6 skills. The troubleshooting skill alone would’ve saved me an hour.” samwize.com
— samwize
“Cannot connect to the Chrome-devtools mcp server using the claude code.” github.com
— GitHub Issue #182