josedario87
654b5ae3f7
- Actualizar hook de monitoreo para repo seguidorDeLotes - Actualizar README con nombre y descripción del proyecto - Agregar scripts de Chrome MCP y documentación
111 lines
2.9 KiB
Markdown
111 lines
2.9 KiB
Markdown
# 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.
|