/ 디렉터리 / 플레이그라운드 / dev-browser
← 모든 서버 ↗ GitHub
● 커뮤니티 SawyerHood ⚡ 바로 사용

dev-browser

제작: SawyerHood · SawyerHood/dev-browser

에이전트가 구동할 수 있는 devtools 지원 브라우저를 실행하는 Claude Skill(탐색, 클릭, 검사, 스크린샷)

dev-browser는 기술 프롬프트를 통해 Claude 에이전트에게 개발 지향 헤드리스 브라우저를 제공합니다. 안정적인 선택기, 모든 작업에 대한 스크린샷, 청크할 준비가 된 DOM 스냅샷 등 에이전트 친화적인 어포던스로 CDP 기반 브라우저를 래핑합니다. 브라우저가 필요하지만 극작가 전체를 설정하고 싶지 않은 경우에 이상적입니다.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

준비됨

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: dev-browser

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

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

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

흐름
  1. 스핀업
    Use dev-browser. Open https://vercel.com/docs/functions. List the sidebar sections.✓ 복사됨
    → Headings extracted with anchor URLs
  2. 드릴인
    Navigate to "Runtime" — read the page and summarize the three runtime options in one paragraph each.✓ 복사됨
    → Three paragraphs with citations to URL fragments
  3. 포착
    Screenshot the pricing section for my notes.✓ 복사됨
    → Screenshot saved locally

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

함정
  • Chromium binary missing — Run npx playwright install chromium once
함께 쓰기: 파일 시스템

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

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

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

흐름
  1. Open
    Use dev-browser. Open https://staging.myapp.com, take a screenshot.✓ 복사됨
    → Landing page screenshot
  2. 로그인
    Click "Sign in", enter [email protected] / Test1234, submit.✓ 복사됨
    → Post-login dashboard captured
  3. 확인하다
    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 탐색 0
click selector|text 상호작용 0
type selector, text 텍스트를 입력하세요 0
snapshot none 현재 상태의 접지 0

비용 및 제한

운영 비용

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

보안

권한, 시크릿, 파급범위

자격 증명 저장: None
데이터 외부 송신: 탐색한 사이트로 바로 이동

문제 해결

자주 발생하는 오류와 해결

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

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

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

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

페이지 블록 자동화

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

대안

dev-browser 다른 것과 비교

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

더 보기

리소스

📖 GitHub에서 공식 README 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기