# Chrome DevTools MCP

> Clean Markdown view of GeekNews topic #27543. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=27543](https://news.hada.io/topic?id=27543)
- GeekNews Markdown: [https://news.hada.io/topic/27543.md](https://news.hada.io/topic/27543.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-03-16T09:55:54+09:00
- Updated: 2026-03-16T09:55:54+09:00
- Original source: [developer.chrome.com](https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session)
- Points: 3
- Comments: 1

## Topic Body

- **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에서 원격 디버깅 설정
- `chrome://inspect/#remote-debugging`으로 이동해 원격 디버깅 활성화  
- 대화창을 통해 디버깅 연결 허용 여부를 선택  

#### 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 서버를 통해 **추가 패널 데이터 접근 기능을 점진적으로 확대**할 예정임

## Comments



### Comment 53081

- Author: neo
- Created: 2026-03-16T09:55:54+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=47390817) 
- 나는 **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](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md) 문서를 보면 v0.20.0 버전에 포함되어 있음  
  MCP의 **토큰 비용 문제**를 의식한 사람들에게는 반가운 소식임  
  (참고로 나는 DevTools 팀에서 일했었고, 지금도 일하고 있음)
  - 이제 **Tool Search** 덕분에 MCP는 CC에서 비용이 들지 않음

- 나는 최근 몇 달간 **TideWave**를 사용 중임  
  [tidewave.ai](https://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](https://github.com/pasky/chrome-cdp-skill)을 매일 쓰고 있는데 정말 멋짐  
  예를 들어 **codex**로 로컬 음악 라이브러리를 관리하면서 YT Music 탭을 열고 앨범을 검색해 URL을 **yt-dlp**로 넘길 수 있었음  
  단, 현재는 Chrome 전용이라 다른 브라우저를 쓰려면 바이너리 경로를 수정해야 함
  - 멋진 데모이긴 하지만, **프롬프트 인젝션** 한 번이면 모든 데이터 접근이 가능해지는 점이 무섭다고 생각함
  - 이건 DevTools MCP용 스킬이 아니라 **독립 프로젝트**임  
    브라우저 자동화 + 에이전트 분야는 이미 경쟁이 치열함  
    DevTools MCP와 새 CLI는 Chrome DevTools & Puppeteer 팀이 유지하므로 더 안정적일 것 같음  
    그래도 **오픈소스 경쟁**이 혁신을 만든다는 점이 좋음
  - 이런 임시방편 스킬을 실제로 쓰는 사람이 있는지 의문임  
    차라리 [playwriter.dev](https://playwriter.dev) 같은 안정적인 도구를 쓰는 게 낫다고 생각함

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

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

- [playwriter](https://github.com/remorses/playwriter)를 써봤는데, 기존 세션에 연결하는 방식이 놀라울 정도로 잘 작동했음

- 나도 비슷한 걸 **Playwright**로 구현했음  
  예전엔 토큰 소모가 심해서 비용이 컸지만, 결과를 디스크에 저장하고 에이전트가 쿼리하도록 **래퍼**를 만들어 해결함  
  [uisnap.dev](https://uisnap.dev/)에서 확인 가능함  
  이번 프로젝트가 **토큰 소모 문제**를 해결했는지 궁금함
  - 대부분 해결된 듯함. 참고로 [playwright-cli](https://github.com/microsoft/playwright-cli)를 보면 됨
  - 나는 **Claude Haiku**로 페이지 스냅샷을 요약하는 **래퍼 MCP 서버**를 만들어 사용 중임  
    [playwright-slim-mcp](https://github.com/jsdf/playwright-slim-mcp)에서 확인 가능함

- [firefox-devtools-mcp](https://github.com/padenot/firefox-devtools-mcp)를 써봤는데, 기본 Chrome MCP보다 훨씬 빠르고 효율적이었음