게시일: 2025년 9월 23일
오늘 새로운 Chrome DevTools 모델 컨텍스트 프로토콜 (MCP) 서버의 공개 미리보기가 출시되어 AI 코딩 어시스턴트에서 Chrome DevTools의 기능을 사용할 수 있습니다.
코딩 에이전트는 근본적인 문제에 직면합니다. 브라우저에서 실행될 때 생성된 코드가 실제로 무엇을 하는지 확인할 수 없습니다. 눈을 가리고 프로그래밍하는 것과 같습니다.
Chrome DevTools MCP 서버는 이 문제를 해결합니다. AI 코딩 어시스턴트는 Chrome에서 직접 웹페이지를 디버그하고 DevTools 디버깅 기능과 성능 통계를 활용할 수 있습니다. 이를 통해 문제를 식별하고 수정할 때 정확도가 향상됩니다.
작동 방식을 직접 확인해 보세요.
모델 컨텍스트 프로토콜 (MCP)이란 무엇인가요?
모델 컨텍스트 프로토콜(MCP)은 대규모 언어 모델 (LLM)을 외부 도구 및 데이터 소스에 연결하기 위한 오픈소스 표준입니다. Chrome DevTools MCP 서버는 AI 에이전트에 디버깅 기능을 추가합니다.
예를 들어 Chrome DevTools MCP 서버는 performance_start_trace라는 도구를 제공합니다. 웹사이트의 성능을 조사하라는 요청을 받으면 LLM은 이 도구를 사용하여 Chrome을 시작하고, 웹사이트를 열고, Chrome DevTools를 사용하여 성능 트레이스를 기록할 수 있습니다. 그러면 LLM이 성능 트레이스를 분석하여 잠재적인 개선사항을 제안할 수 있습니다. Chrome DevTools MCP 서버는 MCP 프로토콜을 사용하여 코딩 에이전트에 새로운 디버깅 기능을 제공하여 웹사이트를 더 잘 빌드할 수 있도록 지원합니다.
MCP의 작동 방식에 대해 자세히 알아보려면 MCP 문서를 확인하세요.
어떤 용도로 사용할 수 있나요?
다음은 Gemini CLI와 같은 원하는 AI 어시스턴트에서 사용해 볼 수 있는 프롬프트의 몇 가지 예입니다.
실시간으로 코드 변경사항 확인
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 수치와 같은 특정 성능 문제를 조사하도록 지시합니다.
사용해 볼 만한 프롬프트:
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.
자세한 내용은 GitHub의 Chrome DevTools MCP 문서를 참고하세요.
참여하기
Google은 오늘 출시되는 공개 미리보기 버전을 시작으로 Chrome DevTools MCP를 점진적으로 빌드하고 있습니다. Google은 다음에 추가해야 할 기능에 관해 사용자와 커뮤니티의 의견을 적극적으로 찾고 있습니다. AI 코딩 지원 도구를 사용하는 개발자든 차세대 AI 개발 도구를 빌드하는 공급업체든 관계없이 여러분의 의견은 매우 소중합니다. 누락된 항목이나 작동하지 않는 항목이 있으면 GitHub에 문제를 신고해 주세요.