AI 에이전트를 위한 Chrome DevTools (MCP)

오늘, 새로운 Chrome DevTools Model Context Protocol (MCP) 서버의 공개 프리뷰를 출시하며, Chrome DevTools의 강력한 기능을 AI 코딩 어시스턴트에게 제공합니다.

코딩 에이전트는 근본적인 문제에 직면해 있습니다. 바로 자신이 생성한 코드가 브라우저에서 실제로 실행될 때 어떤 동작을 하는지 볼 수 없다는 것입니다. 이는 마치 안대를 쓰고 프로그래밍하는 것과 같습니다.

Chrome DevTools MCP 서버가 이 문제를 해결합니다. AI 코딩 어시스턴트는 Chrome 내에서 웹 페이지를 직접 디버깅할 수 있게 되며, DevTools의 디버깅 기능과 성능 인사이트로부터 혜택을 받습니다. 이는 문제 식별 및 수정 시 정확도를 향상시킵니다.

작동 방식을 직접 확인해 보세요:

Model Context Protocol (MCP)란 무엇인가요?

Model Context Protocol (MCP)은 대규모 언어 모델(LLMs)을 외부 도구 및 데이터 소스에 연결하기 위한 오픈소스 표준입니다. Chrome DevTools MCP 서버는 AI 에이전트에 디버깅 기능을 추가합니다.

예를 들어, Chrome DevTools MCP 서버는 performance_start_trace라는 도구를 제공합니다. 웹사이트의 성능을 조사하라는 임무가 주어지면, LLM은 이 도구를 사용하여 Chrome을 시작하고 웹사이트를 열고 Chrome DevTools를 이용해 성능 트레이스를 기록할 수 있습니다. 그런 다음 LLM은 성능 트레이스를 분석하여 잠재적인 개선 사항을 제안할 수 있습니다. MCP 프로토콜을 사용함으로써, Chrome DevTools MCP 서버는 코딩 에이전트가 웹사이트를 구축하는 능력을 향상시키는 새로운 디버깅 기능을 제공할 수 있습니다.

MCP가 어떻게 작동하는지 더 알고 싶다면, MCP 문서를 확인해 보세요.

무엇에 사용할 수 있나요?

다음은 Gemini CLI와 같은 원하는 AI 어시스턴트에서 시도해 볼 수 있는 몇 가지 예시 프롬프트입니다.

실시간으로 코드 변경 사항 검증하기

AI 에이전트를 사용하여 수정 사항을 생성한 다음, Chrome DevTools MCP를 이용해 해당 솔루션이 의도대로 작동하는지 자동으로 검증할 수 있습니다.

시도해 볼 프롬프트:

Verify in the browser that your change works as expected.

네트워크 및 콘솔 오류 진단하기

네트워크 및 콘솔 오류 진단하기

에이전트가 네트워크 요청을 분석하여 CORS(Cross-Origin Resource Sharing) 문제를 발견하거나, 콘솔 로그를 검사하여 특정 기능이 예상대로 작동하지 않는 이유를 이해하도록 할 수 있습니다.

테스트 프롬프트:

A few images on localhost:8080 are not loading. What's happening?

사용자 행동 시뮬레이션하기

탐색하고, 양식을 작성하며, 버튼을 클릭하여 버그를 재현하고 복잡한 사용자 흐름(user flows)을 테스트할 수 있으며, 이 모든 과정에서 런타임 환경(runtime environment)을 검사합니다.

테스트 프롬프트:

Why does submitting the form fail after entering an email address?

실시간 스타일 및 레이아웃 문제 디버깅하기

AI 에이전트에게 라이브 페이지에 연결하여 DOM(Document Object Model)과 CSS를 검사하고, 브라우저의 실제 데이터(live data)를 기반으로 요소가 넘치는(overflowing elements) 것과 같은 복잡한 레이아웃 문제를 해결하기 위한 구체적인 제안을 받도록 요청할 수 있습니다.

테스트 프롬프트:

The page on localhost:8080 looks strange and off. Check what's happening there.

성능 감사 자동화하기

AI 에이전트에게 성능 추적(performance trace)을 실행하고, 그 결과를 분석하며, 높은 LCP(Largest Contentful Paint) 수치와 같은 특정 성능 문제를 조사하도록 지시할 수 있습니다.

테스트 프롬프트:

Localhost:8080 is loading slowly. Make it load faster.

사용 가능한 모든 도구 목록은 저희의 도구 참조 문서(tool reference documentation)를 확인해 주세요.

시작하기

이 기능을 사용하려면, 다음 설정 항목을 MCP 클라이언트에 추가하세요:

{
"mcpServers": {
"chrome-devtools": {
...

작동 여부를 확인하려면 코딩 에이전트에서 다음 프롬프트를 실행하세요:

Please check the LCP of web.dev.

더 자세한 내용은 GitHub의 Chrome DevTools MCP 문서를 확인해 주세요.

참여하기

저희는 오늘 출시하는 공개 미리 보기 버전(public preview version)부터 점진적으로 Chrome DevTools MCP를 구축하고 있습니다. 어떤 기능을 다음에 추가해야 할지에 대해 여러분과 커뮤니티로부터 적극적인 피드백을 받고 있습니다. AI 코딩 어시스턴트를 사용하는 개발자이든, 차세대 AI 개발 도구를 구축하는 공급업체(vendor)이든, 여러분의 통찰력은 매우 중요합니다. 만약 누락되었거나 작동하지 않는 부분이 있다면 GitHub에 이슈를 제기해 주시기 바랍니다.