코딩 에이전트가 Chrome DevTools MCP로 브라우저 세션을 디버그하도록 하세요

Source: Hacker News

개요

우리는 많은 사용자들이 요청해 온 Chrome DevTools MCP 서버에 대한 향상 기능을 출시했습니다: 코딩 에이전트가 활성 브라우저 세션에 직접 연결할 수 있는 기능입니다.

이 향상 기능을 통해 코딩 에이전트는 다음을 할 수 있습니다:

• 기존 브라우저 세션 재사용: 로그인 뒤에 숨겨진 문제를 코딩 에이전트가 해결하도록 하고 싶다고 가정해 보세요. 이제 코딩 에이전트가 추가 로그인 없이 현재 브라우징 세션에 직접 접근할 수 있습니다.
• 활성 디버깅 세션 접근: 코딩 에이전트가 DevTools UI에서 활성 디버깅 세션에 접근할 수 있습니다. 예를 들어, Chrome DevTools 네트워크 패널에서 실패한 네트워크 요청을 발견하고 해당 요청을 선택한 뒤 코딩 에이전트에게 조사하도록 요청할 수 있습니다. 요소 패널에서 선택된 요소에 대해서도 동일하게 작동합니다. 수동 디버깅과 AI‑지원 디버깅 사이를 원활하게 전환할 수 있게 된 이 새로운 기능에 대해 기대하고 있습니다.

실제 작동 모습을 확인해 보세요:

자동 연결 기능은 Chrome DevTools MCP가 Chrome 인스턴스에 연결하는 기존 방법에 추가된 기능입니다. 다음과 같은 기존 방법도 여전히 사용할 수 있습니다:

• Chrome DevTools MCP 서버 전용 사용자 프로필로 Chrome을 실행하기 (현재 기본값).
• 원격 디버그 포트를 사용해 실행 중인 Chrome 인스턴스에 연결하기.
• 각 인스턴스를 임시 프로필에서 실행하여 여러 Chrome 인스턴스를 격리된 상태로 실행하기.

How it works

우리는 Chrome M144(현재 베타)에서 새로운 기능을 추가했습니다. 이 기능을 통해 Chrome DevTools MCP 서버가 원격 디버깅 연결을 요청할 수 있습니다. 이 새로운 흐름은 Chrome의 기존 원격 디버깅 기능 위에 구축됩니다. 기본적으로 Chrome에서는 원격 디버깅 연결이 비활성화되어 있습니다. 개발자는 chrome://inspect#remote-debugging으로 이동하여 기능을 명시적으로 활성화해야 합니다.

Chrome DevTools MCP 서버가 --autoConnect 옵션으로 구성된 경우, MCP 서버는 실행 중인 Chrome 인스턴스에 연결하고 원격 디버깅 세션을 요청합니다. 악의적인 사용자를 방지하기 위해, Chrome DevTools MCP 서버가 원격 디버깅 세션을 요청할 때마다 Chrome은 사용자에게 대화 상자를 표시하고 허가를 요청합니다. 디버깅 세션이 활성화된 동안 Chrome은 상단에 “Chrome is being controlled by automated test software” 배너를 표시합니다.

Chrome에서 새로운 원격 디버깅 흐름 및 UI.

시작하기

새로운 원격 디버깅 기능을 사용하려면 먼저 Chrome에서 원격 디버깅을 활성화한 다음 Chrome DevTools MCP 서버를 자동 연결 기능을 사용하도록 구성합니다.

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

Chrome (≥ 144)에서 다음을 수행합니다:

1. chrome://inspect/#remote-debugging 페이지로 이동하여 원격 디버깅을 활성화합니다.
2. 대화 상자 UI에서 들어오는 디버깅 연결을 허용하거나 차단합니다.

원격 디버깅은 클라이언트가 원격 디버깅 연결을 요청하기 전에 활성화되어야 합니다.

단계 2: Chrome DevTools MCP 서버를 실행 중인 Chrome 인스턴스에 자동으로 연결하도록 구성

MCP 서버를 시작할 때 --autoConnect 명령줄 인수를 사용합니다. 아래는 gemini‑cli에 대한 예시 구성입니다:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=beta"
      ]
    }
  }
}

단계 3: 설정 테스트

gemini‑cli를 열고 다음 프롬프트를 실행합니다:

Check the performance of https://developers.chrome.com

Chrome DevTools MCP 서버가 실행 중인 Chrome 인스턴스에 연결을 시도하고, 사용자 권한을 요청하는 대화 상자를 표시합니다:

원격 디버깅 세션을 시작하기 위해 Chrome이 사용자 권한을 요청합니다.

Allow를 클릭합니다. 서버가 https://developers.chrome.com을 열고 성능 트레이스를 수집합니다.

전체 지침은 GitHub에 있는 README를 참고하세요.

코딩 에이전트에게 디버깅 세션을 맡기세요

실시간 Chrome 인스턴스에 연결할 수 있다는 것은 자동화와 수동 제어 사이에서 선택할 필요가 없다는 뜻입니다. DevTools를 직접 사용하거나 디버깅 작업을 코딩 에이전트에게 넘길 수 있습니다.

• Elements panel: 요소를 선택한 다음 코딩 에이전트에게 문제를 조사하도록 요청하세요.
• Network panel: 네트워크 요청을 선택한 다음 코딩 에이전트에게 조사하도록 요청하세요.

이것은 첫 번째 단계에 불과합니다. Chrome DevTools MCP 서버를 통해 코딩 에이전트에 더 많은 패널 데이터를 점진적으로 공개할 계획입니다. 기대해 주세요!