browser-devtoolslisted
Install: claude install-skill ridsync/devoks-team-harness
## 전제 조건
### 환경 셋업 (신규 머신 기준)
**1단계 — 플러그인 설치** (스킬 파일 로딩)
```sh
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
```
**2단계 — `~/.claude.json`에 MCP 서버 추가** (실제 9269 연결)
```json
{
"mcpServers": {
"chrome-devtools-attach": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest", "--browserUrl", "http://127.0.0.1:9269"],
"type": "stdio"
}
}
}
```
> 플러그인만 설치하면 스킬은 로드되지만 `mcp__chrome-devtools-attach__*` 도구가 없어 동작하지 않는다.
> `~/.claude.json` 수동 추가가 반드시 필요하다.
### 런타임 전제
- Chrome이 `--remote-debugging-port=9269`로 실행 중이어야 한다.
```bash
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9269 --user-data-dir=~/.claude/chrome-dev-mcp/ http://localhost:5500
```
**사용할 MCP 도구 prefix**: `mcp__chrome-devtools-attach__` (플러그인 기본값인 `mcp__plugin_chrome-devtools-mcp_chrome-devtools__`와 다름 — 절대 혼용하지 말 것)
---
## Step 1: 연결 확인 및 페이지 선택
브라우저 작업 전 항상 이 순서로 시작한다.
### 1-1. 열린 페이지 목록 조회
```
mcp__chrome-devtools-attach__list_pages
```
정상 응답 예시:
```
[
{ "pageId": 1, "title": "React App", "url": "http://localhost:5500/...", "type": "page" },
{ "pageId": 2, "title": "DevTools - ...", "type": "page" },
...
]
```
**연결 실패 시**: Chrome이 9269 포트로 실행 중인지 확인한다.
```bash
curl -s http://127.0.0.1:9269/json | python3 -m json.tool
```
응답이 없으면 Chrome을 재시작해야 한다. Claude Code 재시작도 필요할 수 있다.
### 1-2. 올바른 페이지 선택
`list_pages` 결과에서 타깃 페이지를 고른다:
- `type: "page"` + URL이 `localhost`를 포함하는 것
- `type: "browser_ui"`, `type: "worker"` 페이지는 제외