dev-browser (Claude Skill) — 설치 & 라이브 데모

왜 쓰나요

핵심 기능

기술로서의 CDP 브라우저 - 별도의 MCP 설정이 필요하지 않습니다.
시각적 접지를 위한 단계 간 스크린샷
LLM 소비에 맞게 조정된 DOM 스냅샷(크기 인식)
크롬과 함께 작동합니다. 로컬 또는 컨테이너형
MIT 라이센스

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "dev-browser-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "dev-browser-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/SawyerHood/dev-browser",
          "~/.claude/skills/dev-browser"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add dev-browser-skill -- git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: dev-browser

MCP를 설정하지 않고도 빠르게 웹 조사를 수행할 수 있습니다.

👤 MCP 구성에서 극작가를 원하지 않는 개발자 ⏱ ~15 min beginner

언제 쓸까: 영구 브라우저 서버에 커밋하지 않고 Claude Code 세션에서 무언가를 한 번 탐색하기를 원합니다.

사전 조건

스킬 장착 — 자식 클론 https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser
크롬 사용 가능 — npx 극작가 설치 크롬은 바이너리를 가져옵니다.

흐름

스핀업

Use dev-browser. Open https://vercel.com/docs/functions. List the sidebar sections.✓ 복사됨

→ Headings extracted with anchor URLs
드릴인

Navigate to "Runtime" — read the page and summarize the three runtime options in one paragraph each.✓ 복사됨

→ Three paragraphs with citations to URL fragments
포착

Screenshot the pricing section for my notes.✓ 복사됨

→ Screenshot saved locally

결과: 지속적인 인프라 없이 필요할 때 브라우저를 사용하여 연구를 수행했습니다.

함정

Chromium binary missing — Run npx playwright install chromium once

함께 쓰기: 파일 시스템

스테이징 환경에서 로그인 흐름의 온전성 확인

👤 QA에 관심이 있는 개발자의 사전 배포 ⏱ ~5 min beginner

언제 쓸까: 배포하기 전에 중요한 행복한 경로를 한 번 클릭하고 싶습니다.

흐름

Open

Use dev-browser. Open https://staging.myapp.com, take a screenshot.✓ 복사됨

→ Landing page screenshot
로그인

Click "Sign in", enter [email protected] / Test1234, submit.✓ 복사됨

→ Post-login dashboard captured
확인하다

Is the "Welcome, qa" string visible on the page?✓ 복사됨

→ Yes/no + screenshot

결과: 배포를 클릭하기 전 60초 동안 연기 테스트를 수행합니다.

함정

CAPTCHA on login — Add a test-only bypass in staging; dev-browser is not a captcha breaker

조합

다른 MCP와 조합해 10배 효율

dev-browser-skill + filesystem

Save screenshots alongside notes

모든 단계가 끝나면 /notes/web-research/에 스크린샷을 찍으세요.✓ 복사됨

dev-browser-skill + chrome-devtools

When you need devtools-level depth, escalate to chrome-devtools MCP

dev-browser가 나에게 페이지를 제공했습니다. 이제 chrome-devtools를 사용하여 네트워크 워터폴을 확인하세요.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
open_url	url	탐색
click	selector\|text	상호작용
type	selector, text	텍스트를 입력하세요
snapshot	none	현재 상태의 접지

비용 및 제한

운영 비용

API 쿼터: N/A
호출당 토큰: DOM 스냅샷은 크기 제한이 있습니다. 스크린샷 base64
금액: Free
팁: 필요하지 않을 때는 스냅샷을 건너뛰세요. 스크린샷만으로도 충분할 때가 많습니다.

보안

권한, 시크릿, 파급범위

자격 증명 저장: None

데이터 외부 송신: 탐색한 사이트로 바로 이동

에이전트 중심 세션의 사이트에 실제 자격 증명을 입력하지 말고 테스트 계정을 사용하십시오.

문제 해결

자주 발생하는 오류와 해결

오류: 크롬 경로에 실행 파일이 없습니다.

npx 극작가 설치 크롬 — 이 기술은 극작가의 바이너리를 가정합니다.

선택기를 찾을 수 없습니다.

먼저 스냅샷을 실행하세요. 추측되지 않은 실제 DOM에서 선택기를 선택하십시오.

페이지 블록 자동화

헤드리스가 감지된 사이트 — 스킬 구성에서 'headless=false'로 실행해 보세요.

대안

dev-browser 다른 것과 비교

대안	언제 쓰나	단점/장점
playwright MCP	지속적인 MCP 등록 브라우저를 원합니다.	더 많은 설정; 스킬이 가벼워졌네요
mcp-chrome	실제 로그인한 Chrome이 필요합니다.	헤드리스 테스트 브라우저가 아닙니다.

dev-browser