▲

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

 (developer.chrome.com)
9P by GN⁺ 1일전 | ★ favorite | 댓글과 토론
  • Chrome DevTools MCP 서버의 공개 프리뷰 버전 출시로 AI 코딩 에이전트가 크롬 DevTools의 디버깅 및 성능 기능을 사용할 수 있게 됨
  • 기존에는 에이전트가 코드 실행 결과를 확인하지 못했지만, 이제는 네트워크, 콘솔, DOM, 성능 추적 등 실제 런타임 데이터를 활용 가능해짐
  • DevTools MCP 서버를 활용하면 실시간 코드 검증, 네트워크·콘솔 오류 분석, 사용자 동작 시뮬레이션, 스타일·레이아웃 디버깅, 자동 성능 감사등 다양한 자동화가 가능해짐
  • 개발자는 MCP 클라이언트 설정에 서버를 추가해 바로 사용할 수 있으며, 예시 프롬프트로 LCP 확인이나 폼 제출 오류 진단 등을 실행 가능
  • Google은 커뮤니티 피드백을 기반으로 MCP 기능을 확장할 계획

개요

  • Google은 새로운 Chrome DevTools 모델 컨텍스트 프로토콜(MCP) 서버의 공개 프리뷰 버전을 출시함
  • 이로 인해 AI 코딩 어시스턴트가 Chrome DevTools의 디버깅 및 성능 측정 기능을 브라우저에서 직접 사용할 수 있는 환경 제공이 가능해짐
  • 즉, 코딩 에이전트가 브라우저에서 실행되는 코드의 실제 동작을 확인할 수 없어 발생하는 어려움 해결에 기여 가능

모델 컨텍스트 프로토콜(MCP) 소개

  • 모델 컨텍스트 프로토콜(MCP) 은 대형 언어 모델(LLM)을 외부 도구 및 데이터 소스와 연결하기 위한 오픈소스 표준임
  • Chrome DevTools MCP 서버는 이 표준을 활용하여 AI 에이전트와 연동, 웹 디버깅 및 성능 트레이싱 등 다양한 도구 사용 지원이 가능해짐
  • 예를 들어, performance_start_trace 도구로 LLM이 브라우저를 실행하고, 성능 정보를 수집 및 분석하여 개선사항 제안 가능함
  • MCP 프로토콜을 통해 코딩 에이전트가 웹사이트 개발 및 문제 해결에 더 강력한 지원을 얻게 됨
  • MCP 자세한 작동 방식은 공식 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?

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

    • DOM, CSS 검사와 오버플로 등의 레이아웃 문제에 대한 상세 제안 자동 제공
    • 프롬프트 예시: 
      The page on localhost:8080 looks strange and off. Check what's happening there.

  • 성능 감사 자동화

    • 브라우저 성능 추적 자동화 및 분석
    • 프롬프트 예시: 
      Localhost:8080 is loading slowly. Make it load faster.

  • 사용 가능한 MCP 도구 목록은 공식 도구 참조 문서에서 확인 가능함

시작 방법

  • MCP 클라이언트에 다음과 같은 구성을 추가하여 Chrome DevTools 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를 점진적으로 발전시킬 예정임
  • 커뮤니티 의견 수렴을 통해 향후 추가 기능을 결정할 계획임
  • AI 코딩 지원 도구 이용자 및 차세대 AI 개발도구 공급자 모두의 의견과 참여를 적극적으로 환영함
  • 개선 요청이나 발견된 문제는 GitHub 이슈를 통해 제보 가능