AI Sparkup

최신 AI 쉽게 깊게 따라잡기⚡

AI 코딩 에이전트가 내 브라우저 세션을 직접 디버그한다, Chrome DevTools MCP 신기능

버그를 발견했습니다. DevTools를 열고 Network 패널에서 실패한 요청을 찾아냈습니다. 이제 AI 에이전트에게 이걸 조사시키고 싶은데, 에이전트는 새 창을 열고 로그인부터 다시 해야 합니다. 그 사이 맥락은 끊깁니다. Chrome DevTools 팀이 이 흐름을 바꿨습니다.

사진 출처: Chrome for Developers

Chrome DevTools 팀이 Chrome DevTools MCP 서버에 활성 브라우저 세션 연결 기능을 추가했습니다. 코딩 에이전트가 개발자가 현재 사용 중인 브라우저 세션에 직접 접속해 디버깅할 수 있게 된 것으로, Chrome M144(현재 베타) 이상에서 지원됩니다.

출처: Let your Coding Agent debug your browser session with Chrome DevTools MCP – Chrome for Developers

기존 MCP와 무엇이 달라졌나

기존 Chrome DevTools MCP 서버도 AI 에이전트가 브라우저를 제어할 수는 있었습니다. 다만 에이전트 전용 별도 프로필로 Chrome을 새로 실행하거나, 원격 디버그 포트를 미리 열어둔 Chrome 인스턴스에 수동으로 연결해야 했습니다. 쉽게 말해 에이전트는 항상 ‘빈 상태의 새 브라우저’에서 시작해야 했고, 개발자가 이미 로그인하고 작업 중인 환경을 그대로 넘겨주는 방법이 없었습니다.

이번 업데이트는 이 제약을 없앴습니다. --autoConnect 옵션을 설정하면 MCP 서버가 현재 실행 중인 Chrome 인스턴스에 연결을 요청합니다. Chrome은 사용자에게 허용 여부를 묻는 다이얼로그를 표시하고, 허용하면 디버깅 세션이 시작됩니다. 세션이 활성화된 동안에는 “자동화 소프트웨어가 Chrome을 제어 중입니다”라는 배너가 상단에 표시되어 상태를 확인할 수 있습니다.

어떻게 작동하는가

연결 흐름은 세 단계입니다. ① Chrome M144에서 chrome://inspect/#remote-debugging에 접속해 원격 디버깅을 활성화합니다. ② MCP 서버 설정에 --autoConnect 인수를 추가합니다. ③ 에이전트에게 작업을 요청하면 Chrome이 연결 허용 다이얼로그를 표시하고, 개발자가 승인하면 연결이 완성됩니다.

보안 측면에서, 원격 디버깅은 기본적으로 비활성화 상태이며 개발자가 명시적으로 켜야 합니다. 또한 MCP 서버가 연결을 요청할 때마다 매번 사용자 승인을 거치도록 설계되어 있어, 악성 MCP 서버가 무단으로 접근하는 상황을 방지합니다.

수동 디버깅에서 AI로, 자연스러운 전환

이 기능의 핵심 가치는 맥락의 연속성입니다. 개발자가 Elements 패널에서 특정 요소를 선택해둔 상태에서 “이 요소의 스타일 문제를 조사해줘”라고 에이전트에게 요청할 수 있고, Network 패널에서 실패한 요청을 선택한 뒤 “왜 이 요청이 실패하는지 분석해줘”라고 넘길 수도 있습니다. 에이전트는 개발자가 이미 발견하고 포커스한 바로 그 지점에서 작업을 이어받습니다.

Chrome DevTools 팀은 이것이 첫걸음이라고 밝히며, 앞으로 더 많은 DevTools 패널 데이터를 MCP를 통해 에이전트에 노출할 계획임을 언급했습니다. 구체적인 설정 방법과 지원 에이전트 목록은 원문과 GitHub README에서 확인할 수 있습니다.


AI Sparkup 구독하기

최신 게시물 요약과 더 심층적인 정보를 이메일로 받아 보세요! (무료)

Comments

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다