# Configuración de Chrome DevTools MCP para este proyecto

Este proyecto está configurado para usar su propia instancia de Chrome con debugging remoto, permitiendo que múltiples proyectos tengan navegadores independientes.

## Puerto asignado a este proyecto

**Puerto: 9235**

Este puerto se calcula automáticamente basado en el nombre del proyecto para evitar conflictos.

## Paso 1: Iniciar el navegador del proyecto

Antes de abrir Claude Code en este proyecto, ejecutá:

```bash
./start-browser.sh
```

Esto iniciará una instancia de Chrome dedicada para este proyecto en el puerto 9235.

## Paso 2: Configurar MCP en Claude Code

### Opción A: Configuración Automática (Recomendado)

Ejecutá el script de configuración automática:

```bash
./setup-chrome-mcp.sh
```

Este script:
- Detecta el directorio de configuración correcto
- Actualiza o crea el archivo `mcp.json`
- Configura el puerto único para este proyecto (9235)
- Agrega el flag `--isolated` para permitir múltiples navegadores

### Opción B: Configuración Manual

Editá tu archivo de configuración de Claude Code:

**Linux/WSL:** `~/.config/claudecode/mcp.json`

Agregá o modificá la sección `mcpServers`:

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://localhost:9235",
        "--isolated"
      ]
    }
  }
}
```

**IMPORTANTE:** El flag `--isolated` es necesario para que cada proyecto tenga su propio navegador.

### Opción C: Script de inicio automático

Creá un alias en tu `~/.bashrc` para este proyecto:

```bash
alias plantilla-chrome='cd /home/draganel/repos/plantillaNuxtAuthentikProxy && ./setup-chrome-mcp.sh && ./start-browser.sh && sleep 2 && claude-code .'
```

Luego solo ejecutás `plantilla-chrome` para iniciar todo automáticamente.

## Paso 3: Reiniciar Claude Code

Después de configurar el MCP, reiniciá Claude Code para que tome la nueva configuración.

## Verificación

Una vez configurado, Claude Code debería poder usar estas herramientas:

- `mcp__chrome-devtools__navigate_page`
- `mcp__chrome-devtools__take_snapshot`
- `mcp__chrome-devtools__take_screenshot`
- `mcp__chrome-devtools__click`
- `mcp__chrome-devtools__fill`
- Y todas las demás herramientas de Chrome DevTools

## Detener el navegador

Para cerrar la instancia de Chrome de este proyecto:

```bash
pkill -f 'remote-debugging-port=9235'
```

## Troubleshooting

### El navegador no se inicia

1. Verificá que `google-chrome` esté en el PATH
2. En WSL, podés necesitar usar la ruta completa: `/mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe`

### Claude Code no se conecta

1. Verificá que el navegador esté corriendo: `lsof -i :9235`
2. Verificá que la configuración MCP tenga el puerto correcto (9235)
3. Reiniciá Claude Code después de cambiar la configuración

### Puerto en uso

Si el puerto 9235 ya está en uso, el script lo detectará y matará el proceso anterior.