▲

Chrome DevTools MCP

 (developer.chrome.com)
2P by GN⁺ 16시간전 | ★ favorite | 댓글 1개
  • Chrome DevTools MCP 서버가 코딩 에이전트가 활성 브라우저 세션에 직접 연결할 수 있도록 개선됨
  • 이 기능을 통해 에이전트는 로그인된 세션을 재사용하거나 DevTools의 활성 디버깅 세션에 접근 가능
  • Chrome M144(베타)에서 --autoConnect 옵션을 사용하면 MCP 서버가 실행 중인 Chrome 인스턴스에 자동 연결
  • 연결 시마다 사용자 승인 대화창이 표시되며, 디버깅 중에는 “자동화된 테스트 소프트웨어에 의해 제어 중” 배너가 표시됨
  • 수동 디버깅과 AI 보조 디버깅을 자유롭게 전환할 수 있어 개발 효율성이 높아짐

Chrome DevTools MCP 서버 개선 개요

  • Chrome DevTools MCP 서버가 코딩 에이전트가 활성 브라우저 세션에 직접 연결할 수 있도록 업데이트됨
    • 사용자는 로그인된 세션을 재사용할 수 있어, 추가 로그인 없이 디버깅 가능
    • DevTools UI의 Network 패널이나 Elements 패널에서 선택한 항목을 에이전트가 조사하도록 요청 가능
  • 기존 연결 방식도 유지되며, MCP 서버 전용 프로필 사용, 원격 디버그 포트 연결, 임시 프로필 기반 다중 인스턴스 실행이 가능

작동 방식 (How it works)

  • Chrome M144(현재 베타)에 원격 디버깅 연결 요청 기능이 추가됨
    • MCP 서버가 --autoConnect 옵션으로 실행되면, 활성 Chrome 인스턴스에 자동 연결해 원격 디버깅 세션 요청
  • 보안 강화를 위해 Chrome은 매 요청 시 사용자 승인 대화창을 표시하고, 승인 후에만 연결 허용
  • 디버깅 세션이 활성화되면 브라우저 상단에 “Chrome is being controlled by automated test software” 배너가 표시됨

시작하기 (Get started)

  • 새 원격 디버깅 기능을 사용하려면 Chrome에서 원격 디버깅을 활성화하고 MCP 서버를 설정해야 함

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

Step 2: MCP 서버 자동 연결 설정

  • chrome-devtools-mcp 서버 실행 시 --autoConnect 인자를 추가
  • 예시 설정(gemini-cli): 
    {
   "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=beta"
      ]
    }
  }
}
    • Chrome M144가 안정 채널에 도달하기 전까지 --channel=beta 지정 필요

Step 3: 설정 테스트

  • gemini-cli에서 다음 명령 실행: 
    Check the performance of https://developers.chrome.com
  • Chrome이 사용자에게 원격 디버깅 세션 허용 여부를 묻는 대화창을 표시
  • Allow 클릭 시 MCP 서버가 사이트를 열고 성능 추적 수행

코딩 에이전트와의 통합 디버깅

  • 활성 Chrome 인스턴스 연결을 통해 자동화와 수동 제어를 병행 가능
    • 사용자가 DevTools에서 문제 요소를 찾은 뒤, 해당 요소를 코딩 에이전트에 전달해 수정 요청 가능
    • Network 패널에서도 동일하게 요청 선택 후 에이전트에 분석 지시 가능
  • Chrome DevTools MCP 서버를 통해 추가 패널 데이터 접근 기능을 점진적으로 확대할 예정임
▲
GN⁺ 16시간전  [-]
Hacker News 의견들

  • 나는 Playwright를 이용해 모든 요청과 응답을 가로채고, Claude Code가 YouTube 같은 웹사이트를 탐색하며 클릭과 입력을 수행하는 동안 관련된 트래픽을 기록함
    이렇게 수집된 데이터를 기반으로 강타입 API를 자동 생성해 어떤 웹사이트든 내부 API를 통해 상호작용할 수 있게 함
    물론 서비스 약관 위반일 가능성은 있지만, 광고나 이미지, 마크업을 전부 로드하지 않아도 된다는 점이 장점임
    관심 있는 사람이 있다면 이번 주에 공개할 계획임

    • HN이 이 아이디어를 좋아하는 게 흥미로움
      사실 이건 Anthropic이나 OpenAI 같은 LLM 제작사들이 이미 해온 방식임
      그들이 광고를 우회하거나 저작물을 다운로드할 때는 ‘신의 선물’이라 하고, Zuck이 같은 일을 하면 ‘악마의 저주’라 하는 게 아이러니함
    • 나도 비슷하게 사용 중임
      주로 DOM 트리의 특정 지점에서 페이지 레이아웃과 스타일을 재현하거나, 반응형 동작을 자동으로 캡처하는 용도로 씀
      Playwright로 화면 너비를 조정하며 스타일 변화를 추적하고, 스크린샷과 스타일 계층 데이터를 함께 저장함
      수동 검사 도구도 있지만 너무 느리고 비효율적임
      개인적으로는 MCP보다는 커스텀 CLI를 직접 만드는 게 훨씬 효율적이라 생각함
      AI가 직접 접근하고 ‘스킬’을 통해 활용하는 게 진짜 강력함
    • 왜 굳이 Playwright를 써야 하는지 의문임
      Claude가 agent-browser만 있으면 결정론적 코드를 바로 생성할 수 있을 것 같음
    • 꼭 공개해줬으면 함. 혹시 이걸 agent skill로 만든 건지 궁금함
    • 이 방식이면 yt-dlp처럼 계속 업데이트할 필요 없이 YouTube 영상을 직접 다운로드할 수 있는지도 궁금함

  • DevTools MCP 프로젝트가 최근 독립형 CLI를 출시했음
    chrome-devtools-cli 문서를 보면 v0.20.0 버전에 포함되어 있음
    MCP의 토큰 비용 문제를 의식한 사람들에게는 반가운 소식임
    (참고로 나는 DevTools 팀에서 일했었고, 지금도 일하고 있음)

    • 이제 Tool Search 덕분에 MCP는 CC에서 비용이 들지 않음

  • 나는 최근 몇 달간 TideWave를 사용 중임
    tidewave.ai는 원래 Elixir/LiveView 기반이었지만 지금은 JS 프레임워크와 RoR도 지원함
    이 도구는 단순히 브라우저가 아니라 앱의 런타임 접근까지 가능함
    즉, 에이전트가 데이터베이스와 엔드포인트에 직접 접근할 수 있어 매우 강력함

  • Google은 agentic CLI 코딩에서 한참 뒤처져 있음
    Gemini CLI는 너무 형편없어서 내부에서도 안 쓰는 게 분명함
    MCP는 이미 죽은 기술이라 생각함. CLI 도구가 더 빠르고 유연하며, 이미 학습된 환경도 많음
    진지한 개발자라면 Playwright와 headless Chromium을 쓰는 게 정석임
    MCP는 초보자에게만 매력적임

    • 나는 대규모 엔터프라이즈 환경에서 일하고 있는데, 인증·RBAC·속도 제한·운영 관리 같은 요소 때문에 MCP가 여전히 유용함
      CLI만으로는 보안과 운영 복잡도가 너무 커짐
      다만 Gemini CLI가 형편없다는 점에는 동의함
    • MCP는 죽었다는 주장에 동의함
      Anthropic이 개선을 시도했지만 컨텍스트 부풀림 문제는 여전함
      MCP 서버는 사용하지 않아도 컨텍스트를 차지함
      이제는 agent skill로 전환해야 함
    • 참고로 Gemini CLI는 실제로 Google 내부에서 많이 사용됨
      코드 검색, 문서 접근, 버그 조회, RAG 데이터베이스 연결 등에 MCP 서비스를 씀
      (내가 Google 내부 사람들에게 직접 들은 내용임)
    • MCP가 죽었다면, Chrome을 열고 버튼을 클릭하고 콘솔 출력을 읽는 일을 어떤 CLI로 해야 하는지 궁금함
      MCP가 컨텍스트를 차지한다면, CLI 스킬은 무료인지도 의문임

  • 이미 이 기능을 구현한 에이전트 스킬이 있음
    chrome-cdp-skill을 매일 쓰고 있는데 정말 멋짐
    예를 들어 codex로 로컬 음악 라이브러리를 관리하면서 YT Music 탭을 열고 앨범을 검색해 URL을 yt-dlp로 넘길 수 있었음
    단, 현재는 Chrome 전용이라 다른 브라우저를 쓰려면 바이너리 경로를 수정해야 함

    • 멋진 데모이긴 하지만, 프롬프트 인젝션 한 번이면 모든 데이터 접근이 가능해지는 점이 무섭다고 생각함
    • 이건 DevTools MCP용 스킬이 아니라 독립 프로젝트임
      브라우저 자동화 + 에이전트 분야는 이미 경쟁이 치열함
      DevTools MCP와 새 CLI는 Chrome DevTools & Puppeteer 팀이 유지하므로 더 안정적일 것 같음
      그래도 오픈소스 경쟁이 혁신을 만든다는 점이 좋음
    • 이런 임시방편 스킬을 실제로 쓰는 사람이 있는지 의문임
      차라리 playwriter.dev 같은 안정적인 도구를 쓰는 게 낫다고 생각함

  • 나는 WebSocket 프록시 + Chrome 확장을 만들어 에이전트가 DOM을 제어할 수 있게 함
    browserbox를 통해 세션 쿠키를 허용한 상태에서 접근하도록 구성함
    현재는 에이전트 도구 사용 성공률을 높이는 연구용 미들웨어로 활용 중임

  • 이 MCP를 꽤 오래 써왔는데, codex on opencode와 함께 사용할 때 가장 안정적이었음
    특히 SVG 편집 REPL로 활용했을 때 멋진 커스텀 아이콘을 자동 생성해줘 놀라웠음
    Electron 앱에서도 리버스 엔지니어링이나 확장 작업에 잘 맞음

  • playwriter를 써봤는데, 기존 세션에 연결하는 방식이 놀라울 정도로 잘 작동했음

  • 나도 비슷한 걸 Playwright로 구현했음
    예전엔 토큰 소모가 심해서 비용이 컸지만, 결과를 디스크에 저장하고 에이전트가 쿼리하도록 래퍼를 만들어 해결함
    uisnap.dev에서 확인 가능함
    이번 프로젝트가 토큰 소모 문제를 해결했는지 궁금함

    • 대부분 해결된 듯함. 참고로 playwright-cli를 보면 됨
    • 나는 Claude Haiku로 페이지 스냅샷을 요약하는 래퍼 MCP 서버를 만들어 사용 중임
      playwright-slim-mcp에서 확인 가능함

  • firefox-devtools-mcp를 써봤는데, 기본 Chrome MCP보다 훨씬 빠르고 효율적이었음

답변달기