- Actualizar hook de monitoreo para repo seguidorDeLotes - Actualizar README con nombre y descripción del proyecto - Agregar scripts de Chrome MCP y documentación
2.9 KiB
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á:
./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:
./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
--isolatedpara 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:
{
"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:
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_pagemcp__chrome-devtools__take_snapshotmcp__chrome-devtools__take_screenshotmcp__chrome-devtools__clickmcp__chrome-devtools__fill- Y todas las demás herramientas de Chrome DevTools
Detener el navegador
Para cerrar la instancia de Chrome de este proyecto:
pkill -f 'remote-debugging-port=9235'
Troubleshooting
El navegador no se inicia
- Verificá que
google-chromeesté en el PATH - En WSL, podés necesitar usar la ruta completa:
/mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe
Claude Code no se conecta
- Verificá que el navegador esté corriendo:
lsof -i :9235 - Verificá que la configuración MCP tenga el puerto correcto (9235)
- 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.