게시일: 2025년 12월 11일
많은 사용자가 요청한 Chrome DevTools MCP 서버의 개선사항이 제공되었습니다. 코딩 에이전트가 활성 브라우저 세션에 직접 연결할 수 있습니다.
이 개선사항을 통해 코딩 에이전트는 다음 작업을 할 수 있습니다.
- 기존 브라우저 세션 재사용: 코딩 에이전트가 로그인 뒤에 있는 문제를 해결한다고 가정해 보겠습니다. 이제 코딩 에이전트가 추가 로그인 없이 현재 탐색 세션에 직접 액세스할 수 있습니다.
- 활성 디버깅 세션 액세스: 코딩 에이전트가 이제 DevTools UI에서 활성 디버깅 세션에 액세스할 수 있습니다. 예를 들어 Chrome DevTools 네트워크 패널에서 실패한 네트워크 요청을 발견한 경우 요청을 선택하고 코딩 에이전트에게 조사를 요청합니다. 요소 패널에서 선택한 요소에도 동일하게 적용됩니다. 수동 디버깅과 AI 지원 디버깅 간의 원활한 전환이라는 새로운 기능에 기대가 큽니다.
실제 사례 보기
자동 연결 기능은 Chrome DevTools MCP가 Chrome 인스턴스에 연결하는 기존 방식에 추가된 기능입니다. 다음과 같은 작업은 계속할 수 있습니다.
- Chrome DevTools MCP 서버 전용 사용자 프로필 (현재 기본값)로 Chrome을 실행합니다.
- 원격 디버그 포트를 사용하여 실행 중인 Chrome 인스턴스에 연결합니다.
- 각 인스턴스가 임시 프로필에서 실행되는 격리된 여러 Chrome 인스턴스를 실행합니다.
작동 방식
Chrome M145 (현재 Canary)에 Chrome DevTools MCP 서버가 원격 디버깅 연결을 요청할 수 있는 새로운 기능이 추가되었습니다. 이 새로운 흐름은 Chrome의 기존 원격 디버깅 기능을 기반으로 합니다. 기본적으로 Chrome에서는 원격 디버깅 연결이 사용 중지되어 있습니다. 개발자는 먼저 chrome://inspect#remote-debugging로 이동하여 기능을 명시적으로 사용 설정해야 합니다.
Chrome DevTools MCP 서버가 --autoConnect 옵션으로 구성되면 MCP 서버가 활성 Chrome 인스턴스에 연결하여 원격 디버깅 세션을 요청합니다. 악의적인 행위자의 오용을 방지하기 위해 Chrome DevTools MCP 서버가 원격 디버깅 세션을 요청할 때마다 Chrome은 사용자에게 대화상자를 표시하고 원격 디버깅 세션을 허용할 권한을 요청합니다. 또한 디버깅 세션이 활성 상태인 동안 Chrome은 상단에 'Chrome이 자동화된 테스트 소프트웨어에 의해 제어되고 있습니다' 배너를 표시합니다.
시작하기
새 원격 디버깅 기능을 사용하기 위해 먼저 Chrome에서 원격 디버깅을 사용 설정한 다음 Chrome DevTools MCP 서버가 새로운 자동 연결 기능을 사용하도록 구성해야 합니다.
1단계: Chrome에서 원격 디버깅 설정하기
Chrome에서 다음 단계를 따라 원격 디버깅을 설정합니다.
chrome://inspect/#remote-debugging로 이동하여 원격 디버깅을 사용 설정합니다.- 대화상자 UI에 따라 수신 디버깅 연결을 허용하거나 허용하지 않습니다.
2단계: 실행 중인 Chrome 인스턴스에 자동으로 연결되도록 Chrome DevTools MCP 서버 구성
chrome-devtools-mcp 서버를 실행 중인 Chrome 인스턴스에 연결하려면 MCP 서버 세트에 --autoConnect 명령줄 인수를 사용하세요.
다음 코드 스니펫은 gemini-cli의 구성 예시입니다.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--autoConnect",
"--channel=canary"
]
}
}
}
3단계: 설정 테스트
이제 gemini-cli를 열고 다음 프롬프트를 실행합니다.
Check the performance of https://developers.chrome.com
Chrome DevTools MCP 서버는 실행 중인 Chrome 인스턴스에 연결하려고 시도합니다. 사용자 권한을 요청하는 대화상자가 표시됩니다.
허용을 클릭하면 Chrome DevTools MCP 서버가 developers.chrome.com을 열고 성능 트레이스를 가져옵니다.
자세한 안내는 GitHub의 README를 참고하세요.
코딩 에이전트가 디버깅 세션을 인계하도록 허용
실시간 Chrome 인스턴스에 연결할 수 있으므로 자동화와 수동 제어 중에서 선택할 필요가 없습니다. 직접 DevTools를 사용하거나 코딩 에이전트에게 디버깅 작업을 넘길 수 있습니다. 웹사이트에서 문제를 발견한 경우 DevTools를 열어 문제를 일으키는 요소를 확인할 수 있습니다. 코딩 에이전트가 문제를 해결하도록 하려면 이제 Chrome DevTools MCP 서버를 사용하면 됩니다. 요소 패널에서 요소를 선택하고 코딩 에이전트에게 문제를 조사해 달라고 요청할 수 있습니다.
네트워크 패널에서도 마찬가지입니다. 네트워크 요청을 선택하고 코딩 에이전트에게 조사를 요청할 수 있습니다.
하지만 이는 첫 번째 단계일 뿐입니다. Google은 Chrome DevTools MCP 서버를 통해 코딩 에이전트에 점점 더 많은 패널 데이터를 노출할 계획입니다. 계속해서 많은 관심 부탁드립니다.