Chrome DevTools MCP

Source: Hacker News

번역을 진행하려면 번역하고자 하는 전체 텍스트를 제공해 주시겠어요? 텍스트를 주시면 요청하신 대로 한국어로 번역해 드리겠습니다.

Source: …

개요

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

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

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

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

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

Source: …

작동 방식

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

Chrome DevTools MCP 서버를 --autoConnect 옵션과 함께 시작하면, 활성화된 Chrome 인스턴스에 연결하여 원격 디버깅 세션을 요청합니다. 오용을 방지하기 위해 Chrome은 원격 디버깅 세션이 요청될 때마다 사용자에게 권한을 부여하도록 묻는 대화 상자를 표시합니다. 디버깅 세션이 활성화된 동안 Chrome은 상단에 “Chrome is being controlled by automated test software”(Chrome이 자동화 테스트 소프트웨어에 의해 제어되고 있습니다) 배너를 표시합니다.

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

시작하기

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

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

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

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

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

chrome-devtools-mcp 서버를 시작할 때 --autoConnect 명령줄 인수를 사용합니다.

{
  "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이 원격 디버깅 세션을 시작하기 위한 사용자 권한을 요청하고 있습니다.

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

전체 안내는 GitHub에 있는 README를 참고하세요.

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

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

• DevTools를 열고 Elements 패널에서 요소를 선택한 뒤 코딩 에이전트에게 문제를 조사하도록 요청합니다.
• Network 패널에서 네트워크 요청을 선택하고 코딩 에이전트에게 분석을 요청합니다.

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