Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers
핵심 포인트
- 1Chrome DevTools는 AI 코딩 어시스턴트가 브라우저에서 코드 실행 결과를 직접 확인하고 디버깅할 수 있도록 돕는 Model Context Protocol(MCP) 서버의 Public preview를 출시했습니다.
- 2Model Context Protocol(MCP)은 LLM을 외부 툴 및 데이터 소스에 연결하는 오픈소스 표준이며, Chrome DevTools MCP 서버는 AI 에이전트에 디버깅 기능을 제공합니다.
- 3이를 통해 AI 에이전트는 코드 변경 사항 검증, 네트워크 및 콘솔 에러 진단, 사용자 행동 시뮬레이션, 라이브 스타일링 디버그, 성능 감사 자동화 등 다양한 고급 작업을 수행할 수 있습니다.
Chrome DevTools Model Context Protocol (MCP) 서버는 AI 코딩 에이전트에게 Chrome DevTools의 강력한 기능을 제공하기 위한 공개 프리뷰로, 2025년 9월 23일에 발표되었다. 기존의 AI 코딩 에이전트는 생성한 코드가 브라우저에서 실제로 어떻게 작동하는지 확인할 수 없어 "눈가리개를 하고 프로그래밍"하는 것과 같다는 근본적인 문제를 안고 있었다. 이로 인해 에이전트가 버그를 디버깅하고 수정하는 데 어려움이 있었다.
Chrome DevTools MCP 서버는 이 문제를 해결한다. 이 서버를 통해 AI 코딩 에이전트는 Chrome 내에서 웹 페이지를 직접 디버깅할 수 있으며, DevTools의 디버깅 기능과 성능 인사이트를 활용할 수 있게 된다. 이는 에이전트가 문제를 식별하고 수정하는 정확도를 크게 향상시킨다.
Model Context Protocol (MCP)은 대규모 언어 모델(LLM)을 외부 도구 및 데이터 소스에 연결하기 위한 오픈 소스 표준이다. Chrome DevTools MCP 서버는 이 프로토콜을 사용하여 AI 에이전트에 디버깅 기능을 추가한다. 예를 들어, Chrome DevTools MCP 서버는 performance_start_trace라는 도구를 제공한다. 이 도구를 사용하면 LLM이 특정 웹사이트의 성능을 조사하도록 지시받았을 때, Chrome을 시작하고, 웹사이트를 열고, Chrome DevTools를 사용하여 성능 트레이스를 기록할 수 있다. 이후 LLM은 기록된 성능 트레이스를 분석하여 잠재적인 개선 사항을 제안할 수 있다. MCP 프로토콜을 통해 Chrome DevTools MCP 서버는 코딩 에이전트에게 새로운 디버깅 역량을 부여하여 웹사이트 구축 능력을 향상시킨다.
활용 사례는 다음과 같다:
- 실시간 코드 변경 검증: AI 에이전트가 생성한 수정 사항이 브라우저에서 의도한 대로 작동하는지 Chrome DevTools MCP를 통해 자동으로 확인할 수 있다. (예시 프롬프트: "Verify in the browser that your change works as expected.")
- 네트워크 및 콘솔 오류 진단: 에이전트가 네트워크 요청을 분석하여 CORS 문제 등을 찾아내거나, 콘솔 로그를 검사하여 기능 미작동의 원인을 파악할 수 있다. (예시 프롬프트: "A few images on localhost:8080 are not loading. What's happening?")
- 사용자 행동 시뮬레이션: 에이전트가 웹 페이지를 탐색하고, 양식을 채우며, 버튼을 클릭하여 버그를 재현하고 복잡한 사용자 흐름을 테스트하는 동시에 런타임 환경을 검사할 수 있다. (예시 프롬프트: "Why does submitting the form fail after entering an email address?")
- 실시간 스타일링 및 레이아웃 문제 디버깅: AI 에이전트에게 라이브 페이지에 연결하여 DOM 및 CSS를 검사하고, 오버플로우 요소와 같은 복잡한 레이아웃 문제에 대한 구체적인 수정 제안을 브라우저의 실시간 데이터를 기반으로 요청할 수 있다. (예시 프롬프트: "The page on localhost:8080 looks strange and off. Check what's happening there.")
- 성능 감사 자동화: AI 에이전트에게 성능 트레이스를 실행하고, 결과를 분석하며, 높은 LCP(Largest Contentful Paint) 숫자와 같은 특정 성능 문제를 조사하도록 지시할 수 있다. (예시 프롬프트: "Localhost:8080 is loading slowly. Make it load faster.")
이 기능을 사용하려면 MCP 클라이언트에 다음 구성 항목을 추가해야 한다:
{
"mcpServers" : {
"chrome-devtools" : {
"command" : "npx" ,
"args" : [ "chrome-devtools-mcp@latest" ]
}
}
}설치 후 코딩 에이전트에게 "Please check the LCP of web.dev."와 같은 프롬프트를 실행하여 작동 여부를 확인할 수 있다. Google은 Chrome DevTools MCP를 점진적으로 구축하고 있으며, AI 코딩 어시스턴트 사용자 및 AI 개발 도구 공급업체의 피드백을 통해 추가할 기능을 적극적으로 모색하고 있다.