Chrome DevTools MCP

• Chrome DevTools MCP 서버가 코딩 에이전트가 활성 브라우저 세션에 직접 연결할 수 있도록 개선됨
• 이 기능을 통해 에이전트는 로그인된 세션을 재사용하거나 DevTools의 활성 디버깅 세션에 접근 가능
• Chrome M144(베타)에서 --autoConnect 옵션을 사용하면 MCP 서버가 실행 중인 Chrome 인스턴스에 자동 연결
• 연결 시마다 사용자 승인 대화창이 표시되며, 디버깅 중에는 “자동화된 테스트 소프트웨어에 의해 제어 중” 배너가 표시됨
• 수동 디버깅과 AI 보조 디버깅을 자유롭게 전환할 수 있어 개발 효율성이 높아짐

Chrome DevTools MCP 서버 개선 개요

• Chrome DevTools MCP 서버가 코딩 에이전트가 활성 브라우저 세션에 직접 연결할 수 있도록 업데이트됨
  • 사용자는 로그인된 세션을 재사용할 수 있어, 추가 로그인 없이 디버깅 가능
  • DevTools UI의 Network 패널이나 Elements 패널에서 선택한 항목을 에이전트가 조사하도록 요청 가능
• 기존 연결 방식도 유지되며, MCP 서버 전용 프로필 사용, 원격 디버그 포트 연결, 임시 프로필 기반 다중 인스턴스 실행이 가능

작동 방식 (How it works)

• Chrome M144(현재 베타)에 원격 디버깅 연결 요청 기능이 추가됨
  • MCP 서버가 --autoConnect 옵션으로 실행되면, 활성 Chrome 인스턴스에 자동 연결해 원격 디버깅 세션 요청
• 보안 강화를 위해 Chrome은 매 요청 시 사용자 승인 대화창을 표시하고, 승인 후에만 연결 허용
• 디버깅 세션이 활성화되면 브라우저 상단에 “Chrome is being controlled by automated test software” 배너가 표시됨

시작하기 (Get started)

• 새 원격 디버깅 기능을 사용하려면 Chrome에서 원격 디버깅을 활성화하고 MCP 서버를 설정해야 함

Step 1: Chrome에서 원격 디버깅 설정

• chrome://inspect/#remote-debugging으로 이동해 원격 디버깅 활성화
• 대화창을 통해 디버깅 연결 허용 여부를 선택

Step 2: MCP 서버 자동 연결 설정

• chrome-devtools-mcp 서버 실행 시 --autoConnect 인자를 추가
• 예시 설정(gemini-cli): { "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--autoConnect", "--channel=beta" ] } } }
  • Chrome M144가 안정 채널에 도달하기 전까지 --channel=beta 지정 필요

Step 3: 설정 테스트

• gemini-cli에서 다음 명령 실행: Check the performance of https://developers.chrome.com
• Chrome이 사용자에게 원격 디버깅 세션 허용 여부를 묻는 대화창을 표시
• Allow 클릭 시 MCP 서버가 사이트를 열고 성능 추적 수행

코딩 에이전트와의 통합 디버깅

• 활성 Chrome 인스턴스 연결을 통해 자동화와 수동 제어를 병행 가능
  • 사용자가 DevTools에서 문제 요소를 찾은 뒤, 해당 요소를 코딩 에이전트에 전달해 수정 요청 가능
  • Network 패널에서도 동일하게 요청 선택 후 에이전트에 분석 지시 가능
• Chrome DevTools MCP 서버를 통해 추가 패널 데이터 접근 기능을 점진적으로 확대할 예정임