자동 연결 기능을 사용하여 AI 에이전트를 활성 브라우저 인스턴스에 직접 연결하세요. 이렇게 하면 에이전트가 현재 탭, 브라우저 확장 프로그램, 라이브 애플리케이션 상태를 상속하여 샌드박스 제한을 우회할 수 있습니다.
워크플로 컨텍스트를 상속하면 에이전트가 세션 데이터를 손실하지 않고 코드 작성에서 라이브 브라우저 상태 디버깅으로 이동할 수 있습니다. 이는 이미 특정 애플리케이션 상태 (예: 복잡한 결제 절차 또는 수동으로 재현된 오류)에 도달했으며 상담사가 이러한 단계를 수동으로 다시 실행하지 않고 기술 조사를 인계받기를 원하는 경우에 유용합니다.
자동 연결을 사용 설정하기 전에 다음 사항을 고려하세요.
- 보안 및 개인 정보 보호: 자동 연결이 활성화되면 에이전트가 열린 탭, 세션 스토리지, 로컬 스토리지, 쿠키, JavaScript API를 통해 표시되는 기타 데이터를 비롯한 브라우저 프로필의 모든 데이터에 액세스할 수 있습니다.
- 데이터 개인 정보 보호 보장: 에이전트용 Chrome DevTools 서버는 로컬 프로세스이며 브라우저 데이터, 세션 토큰 또는 원격 분석을 Google에 전송하지 않습니다.
- 신뢰 및 프롬프트: 신뢰할 수 있는 에이전트와만 이 모드를 사용하고 프롬프트에 포함하는 정보에 주의하세요.
기본 요건
자동 연결 기능을 사용하기 전에 다음 사항을 확인하세요.
- Chrome 144 이상: 자동 연결에는 현재 버전의 Chrome에 있는 최신 디버깅 프로토콜이 필요합니다.
- 올바른 Chrome 채널: 에이전트가 기본적으로 Chrome 안정화 버전 채널에 연결됩니다. 카나리아 또는 베타를 사용하려면 구성에서 채널을 지정하세요.
- 원격 디버깅 사용 설정: 브라우저와 에이전트 간의 브리지를 수동으로 사용 설정합니다.
- 올바른 구성:
--autoConnect플래그를 포함하도록 MCP 구성을 업데이트해야 합니다.
자동 연결 설정
MCP 서버에서 자동 연결 기능을 구성하려면 다음 단계를 따르세요.
- 실행 중인 Chrome 브라우저에서
chrome://inspect/#remote-debugging로 이동하여 원격 디버깅을 사용 설정합니다. --autoConnect플래그를 포함하도록 MCP 구성을 업데이트합니다.{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }에이전트가 열려 있는 Chrome 앱과 상호작용하도록 프롬프트합니다. Chrome에서 세션을 허용할 권한을 요청하면 허용을 클릭합니다.
이제 에이전트가 MCP 서버를 사용하여 실행 중인 Chrome 애플리케이션과 상호작용합니다.
자동 연결 사용 사례
자동 연결을 사용하면 샌드박스 처리된 Chrome 세션에서 사용할 수 없는 도구나 상태를 사용할 수 있습니다. 예를 들어 에이전트에게 로그인하도록 요청하는 대신(로그인에 실패하는 경우가 많음) 직접 페이지로 이동하여 로그인할 수 있습니다. 그런 다음 상담사에게 인계해 달라고 요청합니다.
다음 섹션에는 자동 연결 기능의 사용 사례가 몇 가지 포함되어 있습니다.
인증된 대시보드 디버그
내부 도구와 비공개 대시보드는 복잡한 싱글 사인온(SSO) 또는 가상 사설망 (VPN) 레이어 뒤에 있는 경우가 많습니다. 샌드박스 처리된 브라우저에는 일반적으로 에이전트가 우회할 수 없는 로그인이 필요합니다. 자동 연결을 사용하면 에이전트가 활성 세션을 상속합니다.
프롬프트 예:
I have my company's staging dashboard open in the next tab. Can you look at the
User Analytics chart, find the SVG element for the Friday data point, and tell
me why the tooltip isn't appearing on hover?
에이전트 실행 예: 에이전트가 기존 Chrome 프로세스를 식별하고 활성 탭을 찾아 접근성 트리를 검사하여 요소를 찾습니다. JavaScript API를 사용하여 특정 충돌을 평가할 수도 있습니다.
현재 탭 실시간 수정
오류를 수동으로 재현하지 마세요. 재현 단계를 샌드박스 처리된 에이전트의 새 프롬프트로 변환하는 대신 이미 버그가 발생한 활성 페이지에서 에이전트에게 버그를 수정해 달라고 요청할 수 있습니다.
프롬프트 예:
Look at the current page. The Submit button overlaps with the footer on this
screen size. Generate a fix for the layout and verify it by injecting the CSS
directly into this tab.
에이전트 실행 예: 활성 창에 연결되어 있으므로 에이전트가 레이아웃을 분석하고 수정사항을 즉시 적용합니다. 화면에서 버튼이 이동하는 것을 확인할 수 있으며, 이는 소스 코드를 업데이트하기 전에 수정사항이 작동하는지 확인해 줍니다.