최근 Chrome 팀이 "코딩 에이전트가 크롬 브라우저 세션을 직접 디버깅하게 하자"는 방향으로 Chrome DevTools MCP를 소개했습니다.1 핵심은 간단합니다. 그동안 우리는 콘솔 로그를 복사해 챗에 붙여 넣느라 바빴는데, 이제는 에이전트가 DevTools급 정보(콘솔·네트워크·성능)를 스스로 읽고, 클릭까지 하며 재현→진단→검증 루프를 닫을 수 있습니다.
Chrome DevTools MCP 서버가 하는 일(에이전트에게 '눈과 손' 주기)
Chrome DevTools MCP server는 MCP(Model Context Protocol) 형태로 제공되어, Claude Code·Gemini CLI·Cursor·Copilot 같은 에이전트가 "살아있는 크롬"을 도구처럼 다루게 해줍니다.2 단순 자동화가 아니라, 디버깅 관점에서 강력한 게 포인트입니다.
예를 들어 에이전트는 탭을 열고 이동한 뒤, 스냅샷으로 화면의 상호작용 요소를 구조적으로 파악하고, 특정 버튼을 클릭해 재현합니다. 그 다음 콘솔 메시지를 모아 에러 스택을 확인하고, 네트워크 요청 목록에서 실패(401/500/422 등)한 API를 집어 "요청 페이로드가 이런데 서버가 이렇게 응답했다"까지 정리해줍니다. 즉, 사람처럼 '브라우저에서 일어난 일'을 근거로 말하게 됩니다.
게다가 성능도 다룹니다. trace를 녹화하고 인사이트를 뽑아 LCP/CLS 같은 병목 힌트를 얻을 수 있어 "그럴 듯한 조언"이 아니라 "측정 기반 수정"으로 넘어가기가 쉽습니다.2
설치는 5분, 효과는 매일(가장 단단한 기본 설정)
요구 사항은 Node.js(최소 20.19+)와 최신 크롬이 기본입니다.3 설치는 보통 "클라이언트 설정에 MCP 서버 하나 추가"로 끝납니다. 예를 들어 MCP 클라이언트 설정에 아래처럼 등록하면, 필요할 때 npx로 최신 버전을 실행합니다.2
{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }
재미있는 점은 "서버를 켠다고 크롬이 바로 뜨지 않는다"는 겁니다. 실제로 navigate, trace 같은 '브라우저가 필요한 도구'를 호출하는 순간 크롬이 자동으로 준비됩니다.3 불필요하게 브라우저가 떠 있는 시간이 줄어드니, 로컬 개발 흐름을 덜 방해합니다.
처음 연결 확인은 간단하게 "특정 URL 성능을 체크해줘" 같은 프롬프트가 좋습니다. 도구가 정상이라면 크롬을 열고 trace를 수집해 결과를 돌려줍니다.2
로그인 필요한 사이트는? 자동 실행 vs 기존 크롬 세션 연결
실무에서 막히는 지점은 보통 인증입니다. 기본 모드(서버가 크롬을 새로 띄우는 방식)는 세션이 비어 있으니, 사내 어드민·스테이징처럼 로그인 필수 페이지에서 번거롭습니다. 이때 선택지가 두 가지입니다.
첫째는 "원격 디버깅 포트로 실행한 크롬에 붙기"입니다. 크롬을 --remote-debugging-port=9222로 실행해두고, MCP 서버를 --browserUrl http://127.0.0.1:9222로 연결하면 기존 로그인 상태를 그대로 활용할 수 있습니다.4 다만 이 방식은 보안상 '디버깅용 전용 프로필'(user-data-dir)을 따로 두는 게 안전합니다. 디버깅 포트는 로컬에서 브라우저를 사실상 전권 제어할 수 있기 때문입니다.4
둘째는 --autoConnect 같은 "이미 켜진 크롬 세션에 자연스럽게 연결"하는 흐름입니다. 크롬 버전이 충분히 최신이라면(문서 기준 144+), 사용자가 권한을 허용하는 방식으로 핸드오프가 쉬워집니다.3 즉, 내가 DevTools로 보다가 "여기부터는 에이전트가 조사해줘"라고 넘기는 장면이 가능해집니다.
시사점: '복붙 디버깅'에서 '검증 루프'로 바꾸는 팁
Chrome DevTools MCP의 가치는 도구 개수가 많아서가 아니라, 디버깅의 왕복을 줄여준다는 데 있습니다. 로그를 붙여넣는 대신, 에이전트에게 "재현→근거 수집→수정→재검증"을 한 번에 시키는 습관이 생깁니다.
가장 실용적인 시작 프롬프트는 이렇게 잡으면 실패가 적습니다. "로컬호스트를 열고, 콘솔 에러와 실패한 네트워크 요청을 요약한 뒤, 재현 단계와 수정안을 제시하고, 수정 후 다시 확인해줘." 이 한 줄이 에이전트를 '추측하는 조언자'가 아니라 '확인하는 디버거'로 만듭니다.
마지막으로 주의할 점도 명확합니다. 브라우저 내용이 MCP 클라이언트에 노출될 수 있으니, 민감한 계정/데이터가 들어 있는 프로필로 무심코 연결하지 않는 게 좋습니다.2 디버깅 전용 크롬 프로필을 만들어두면 편의성과 안전을 동시에 챙길 수 있습니다.
참고
1Let your Coding Agent debug the browser session with Chrome DevTools MCP
2Chrome DevTools MCP | MCP Servers
3Getting Started | ChromeDevTools/chrome-devtools-mcp | DeepWiki
4Automating Authenticated Websites with Chrome DevTools MCP and Claude Code
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.