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 인스턴스에 자동 연결해 원격 디버깅 세션 요청 - MCP 서버가 - 보안 강화를 위해 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 지정 필요 - Chrome M144가 안정 채널에 도달하기 전까지 Step 3: 설정 테스트 - gemini-cli에서 다음 명령 실행: Check the performance of https://developers.chrome.com - Chrome이 사용자에게 원격 디버깅 세션 허용 여부를 묻는 대화창을 표시 - Allow 클릭 시 MCP 서버가 사이트를 열고 성능 추적 수행 코딩 에이전트와의 통합 디버깅 - 활성 Chrome 인스턴스 연결을 통해 자동화와 수동 제어를 병행 가능 - 사용자가 DevTools에서 문제 요소를 찾은 뒤, 해당 요소를 코딩 에이전트에 전달해 수정 요청 가능 - Network 패널에서도 동일하게 요청 선택 후 에이전트에 분석 지시 가능 - Chrome DevTools MCP 서버를 통해 추가 패널 데이터 접근 기능을 점진적으로 확대할 예정임