dev-browser
무엇인가
dev-browser는 코딩 에이전트에게 실제 Chrome을 다룰 실행 수단을 부여하는 스킬 팩이다. 규율하는 영역은 웹 페이지 탐색, 요소 검사, 입력, 결과 검증의 절차이며, 에이전트가 한 번 연 브라우저 상태를 잃지 않고 여러 단계를 이어서 수행하도록 만든다.
어떻게 동작하나
동작은 워밍 데몬과 CLI를 중심으로 한다. 각 명령은 데몬 안의 새 node:vm 컨텍스트에서 실행되고, browser.getPage(nameOrId)로 이름 있는 탭을 얻거나 대상 ID로 기존 탭에 붙는다. page.snapshot({interactive:true})이 접근성 트리와 e12 형태의 ref를 돌려주면 page.click("ref/e12")·page.ref("e12")가 그 ref를 그대로 셀렉터로 받는다. 최상위 await가 허용되고 마지막 표현식이 명령 결과가 된다. Claude Code에는 플러그인 마켓플레이스 설치 또는 MCP 서버 등록으로 붙는다.
무엇과 다른가
매 호출마다 Puppeteer 스크립트를 새로 작성하는 방식과의 차이는 상태 지속성이다. 브라우저가 호출 사이에도 열려 있고 이름 있는 탭이 상태를 나른다. 0.2의 Playwright/QuickJS 구현을 Puppeteer/Bun 구현으로 교체했고, snapshotForAI()·getByRef() 같은 헬퍼는 snapshot()·ref/eN으로 대체됐다. MCP 도구만 노출하는 서버와 달리 CLI와 MCP가 같은 워밍 데몬을 공유한다.
어떻게 쓰나
설치는 npm 전역 설치 후 필요할 때 Chrome을 붙인다. `npm install -g dev-browser` 다음 `dev-browser install`을 실행하고, `dev-browser --headless -e '...'`로 첫 스크립트를 돌린다. Claude Code에서 권한 프롬프트를 없애려면 `.claude/settings.json` 또는 `~/.claude/settings.json`의 permissions.allow에 "Bash(dev-browser *)"를 넣는다. MCP로 쓰려면 `claude mcp add dev-browser -- dev-browser mcp --headless`를 실행한다.
전제와 한계
전제와 한계가 분명하다. macOS와 glibc Linux만 지원하고 Windows와 musl Linux는 지원하지 않는다. 릴리스 바이너리에 Bun과 Puppeteer가 포함되어 설치 후 Node는 필요 없지만, snap 패키지 Chromium은 기본 `~/.dev-browser/v1` 디렉터리를 읽지 못하므로 `dev-browser install`이나 DEV_BROWSER_CHROME 지정이 필요하다. node:vm은 스크립트 전역을 분리할 뿐 보안 샌드박스가 아니며, 같은 이름의 페이지를 쓰는 두 스크립트는 서로 끼어들 수 있다.