Chrome DevTools MCP

Depura aplicaciones web conectándose a las herramientas de desarrollador de Chrome a través del Protocolo de DevTools de Chrome.

Documentación

Chrome DevTools MCP

Un servidor de Model Context Protocol (MCP) que proporciona integración con el Protocolo de DevTools de Chrome a través de MCP. Esto te permite depurar aplicaciones web conectándote a las herramientas de desarrollo de Chrome.

¡Disponible como Extensión de Claude Desktop (.dxt) para una instalación fácil con un solo clic!

Qué Hace Esto

Este servidor MCP actúa como un puente entre Claude y las capacidades de depuración de Chrome. Una vez instalado en Claude Desktop, puedes:

  • Conectar Claude a cualquier aplicación web que se ejecute en Chrome
  • Depurar solicitudes de red, errores de consola y problemas de rendimiento
  • Inspeccionar objetos JavaScript y ejecutar código en el contexto del navegador
  • Monitorear tu aplicación en tiempo real mediante conversación natural con Claude

Nota: Este es un servidor MCP que se ejecuta dentro de Claude Desktop: no necesitas ejecutar ningún servidor o proceso separado.

Características

  • Monitoreo de Red: Captura y analiza solicitudes/respuestas HTTP con opciones de filtrado
  • Integración de Consola: Lee registros de consola del navegador, analiza errores y ejecuta JavaScript
  • Métricas de Rendimiento: Datos de tiempo, carga de recursos y utilización de memoria
  • Inspección de Página: Información del DOM, métricas de página y soporte multi-marco
  • Acceso a Almacenamiento: Lee cookies, localStorage y sessionStorage
  • Monitoreo en Tiempo Real: Seguimiento de salida de consola en vivo
  • Inspección de Objetos: Inspecciona objetos y variables JavaScript

Instalación

Opción 1: Extensión de Claude Desktop (Más Fácil)

Descarga la extensión precompilada:

  1. Descarga el archivo .dxt más reciente desde Releases
  2. Abre Claude Desktop
  3. Ve a Extensions (Extensiones) e instala el archivo .dxt descargado
  4. Configura la ruta de Chrome si es necesario en la configuración de la extensión

¡La extensión incluye todas las dependencias y está lista para usarse inmediatamente!

Opción 2: MCP CLI (Avanzado)

Instalación Rápida (la más común):

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

Nota: El comando mcp es parte del Python MCP SDK. Instálalo con pip install mcp si aún no está disponible.

Todas las Opciones de Instalación:

# Clone the repository
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

# The --with-editable flag uses pyproject.toml to install dependencies

# Basic installation with local dependencies
mcp install server.py --with-editable .

# Install with custom name
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

# Install with environment variables
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -v CHROME_DEBUG_PORT=9222

# Install with additional packages if needed
mcp install server.py -n "Chrome DevTools MCP" --with-editable . --with websockets --with aiohttp

# Install with environment file (copy .env.example to .env first)
cp .env.example .env
# Edit .env with your settings
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -f .env

Opción 3: Integración con Claude Code

Para usuarios de Claude Code CLI:

  1. Clona este repositorio
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
  1. Instala las dependencias con UV (crea un venv)
uv sync  # Creates .venv and installs dependencies
  1. Agrega el servidor MCP usando Claude CLI con rutas absolutas

IMPORTANTE: Claude Code necesita rutas absolutas tanto para el intérprete de Python como para el script del servidor para funcionar correctamente.

Configuración recomendada usando rutas absolutas:

# Get the absolute paths
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"

# Add the server with absolute paths
claude mcp add chrome-devtools "$PYTHON_PATH" "$SERVER_PATH" -e CHROME_DEBUG_PORT=9222

Alternativa: Usando el Python del sistema (si las dependencias están instaladas globalmente):

# Only if you've installed dependencies globally
claude mcp add chrome-devtools python "$(pwd)/server.py" -e CHROME_DEBUG_PORT=9222

Con ámbito personalizado:

# Add to user scope (available across all projects)
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -s user -e CHROME_DEBUG_PORT=9222

# Add to project scope (only for this project)
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -s project -e CHROME_DEBUG_PORT=9222
  1. Verifica la instalación
# List configured MCP servers
claude mcp list

# Get details about the server (check that paths are absolute)
claude mcp get chrome-devtools

# The output should show absolute paths like:
# Command: /Users/you/chrome-devtools-mcp/.venv/bin/python
# Args: ["/Users/you/chrome-devtools-mcp/server.py"]

Problemas Comunes de Rutas y Soluciones:

  • Problema: "python: command not found" o "server.py not found"
    • Solución: Usa rutas absolutas como se muestra arriba
  • Problema: "ModuleNotFoundError" cuando se inicia el servidor
    • Solución: Usa el intérprete de Python del venv que tiene las dependencias instaladas
  • Problema: El servidor no se inicia o aparece como desconectado
    • Solución: Prueba el comando manualmente: /path/to/.venv/bin/python /path/to/server.py

Opción 4: Configuración Manual de Claude Desktop

  1. Clona este repositorio
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
  1. Instala las dependencias

Con uv (recomendado):

uv sync

Con pip:

pip install -r requirements.txt
  1. Agrega a la configuración de Claude Desktop

Edita tu archivo de configuración de Claude Desktop:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}
  1. Reinicia Claude Desktop

Verifica la Instalación

Después de la instalación (con cualquier método), verifica que el servidor esté disponible:

  1. Abre Claude Desktop
  2. Busca las herramientas MCP en la conversación
  3. Prueba un comando simple: get_connection_status()

Clientes MCP Alternativos

Para otros clientes MCP, ejecuta el servidor directamente:

python server.py

Inicio Rápido

Una vez instalado en Claude Desktop, puedes comenzar a depurar cualquier aplicación web:

Depura Tu Aplicación Web

Configuración de un solo paso (recomendada):

start_chrome_and_connect("localhost:3000")

Reemplaza localhost:3000 con la URL de tu aplicación

Si Chrome no se encuentra automáticamente:

start_chrome_and_connect("localhost:3000", chrome_path="/path/to/chrome")

Usa el parámetro chrome_path para especificar una ubicación personalizada de Chrome

Este comando:

  • Iniciará Chrome con la depuración habilitada
  • Navegará a tu aplicación
  • Conectará el servidor MCP a Chrome

Configuración manual (si prefieres paso a paso):

start_chrome()
navigate_to_url("localhost:3000")
connect_to_browser()

Comienza a Depurar

Una vez conectado, usa estos comandos:

  • get_network_requests() - Ver tráfico HTTP
  • get_console_error_summary() - Analizar errores de JavaScript
  • inspect_console_object("window") - Inspeccionar cualquier objeto JavaScript

Herramientas MCP Disponibles

Gestión de Chrome

  • start_chrome(port?, url?, headless?, chrome_path?, auto_connect?) - Iniciar Chrome con depuración remota y auto-conexión opcional
  • start_chrome_and_connect(url, port?, headless?, chrome_path?) - Iniciar Chrome, conectarse y navegar en un solo paso
  • connect_to_browser(port?) - Conectarse a una instancia existente de Chrome
  • navigate_to_url(url) - Navegar a una URL específica
  • disconnect_from_browser() - Desconectarse del navegador
  • get_connection_status() - Verificar el estado de la conexión

Monitoreo de Red

  • get_network_requests(filter_domain?, filter_status?, limit?) - Obtener solicitudes de red con filtrado
  • get_network_response(request_id) - Obtener datos de respuesta detallados incluido el cuerpo

Herramientas de Consola

  • get_console_logs(level?, limit?) - Obtener registros de consola del navegador
  • get_console_error_summary() - Obtener un resumen organizado de errores y advertencias
  • execute_javascript(code) - Ejecutar JavaScript en el contexto del navegador
  • clear_console() - Limpiar la consola del navegador
  • inspect_console_object(expression) - Inspeccionar en profundidad cualquier objeto JavaScript
  • monitor_console_live(duration_seconds) - Monitorear la salida de consola en tiempo real

Análisis de Página

  • get_page_info() - Obtener métricas completas de página y datos de rendimiento
  • evaluate_in_all_frames(code) - Ejecutar JavaScript en todos los marcos/iframes
  • get_performance_metrics() - Obtener métricas de rendimiento detalladas y tiempos de recursos

Almacenamiento y Datos

  • get_storage_usage_and_quota(origin) - Obtener información de uso de almacenamiento y cuotas
  • clear_storage_for_origin(origin, storage_types?) - Limpiar almacenamiento por tipo y origen
  • get_all_cookies() - Obtener todas las cookies del navegador
  • clear_all_cookies() - Limpiar todas las cookies del navegador
  • set_cookie(name, value, domain, path?, expires?, http_only?, secure?, same_site?) - Establecer una cookie
  • get_cookies(domain?) - Obtener cookies del navegador con filtrado opcional por dominio
  • get_storage_key_for_frame(frame_id) - Obtener la clave de almacenamiento para un marco específico
  • track_cache_storage(origin, enable?) - Habilitar/deshabilitar el seguimiento de almacenamiento en caché
  • track_indexeddb(origin, enable?) - Habilitar/deshabilitar el seguimiento de IndexedDB
  • override_storage_quota(origin, quota_size_mb?) - Sobrescribir la cuota de almacenamiento

Casos de Uso

Depuración de Llamadas API en Tu Aplicación Web

Cuando tu aplicación web realiza llamadas API que fallan o devuelven datos inesperados:

Configuración fácil: Usa el comando de un solo paso para iniciar Chrome y navegar a tu aplicación:

Flujo de trabajo de ejemplo:

You: "I need to debug my React app at localhost:3000"
Claude: I'll start Chrome with debugging enabled and navigate to your app.

start_chrome_and_connect("localhost:3000")

Perfect! Chrome is now running with debugging enabled and connected to your app. Let me check for any failed network requests:

get_network_requests(filter_status=500)

I can see there are 3 failed requests to your API. Let me get the details of the first one:

get_network_response("request-123")

Configuración manual (si prefieres):

  1. Inicia Chrome: Usa start_chrome()
  2. Navega a tu aplicación: Usa navigate_to_url("localhost:3000")
  3. Conecta: Usa connect_to_browser()
  4. Monitorea el tráfico de red: Usa get_network_requests() para ver todas las llamadas API

Verificación de Errores de Consola JavaScript

Cuando tu aplicación web tiene errores de JavaScript o comportamiento inesperado:

  1. Navega a tu aplicación en la instancia de Chrome conectada
  2. Verifica errores de consola: Usa get_console_error_summary() para ver todos los errores
  3. Monitorea errores en vivo: Usa monitor_console_live(10) para observar nuevos errores mientras interactúas
  4. Inspecciona variables: Usa inspect_console_object("myVariable") para examinar el estado de la aplicación

Flujo de trabajo de ejemplo:

You: "My React component isn't updating properly"
Claude: Let me check the JavaScript console for any errors.

get_console_error_summary()

I can see there are 2 JavaScript errors. Let me also monitor the console while you interact with the component:

monitor_console_live(15)

Now try clicking the component that isn't working. I'll watch for any new errors or warnings.

Depuración de Rendimiento

Cuando tu aplicación web carga lentamente o usa demasiada memoria:

  1. Carga tu aplicación en el navegador conectado
  2. Verifica las métricas de página: Usa get_page_info() para ver tiempos de carga y conteos de recursos
  3. Analiza el rendimiento: Usa get_performance_metrics() para ver datos de tiempo detallados
  4. Monitorea el uso de memoria: Verifica la información de memoria en las métricas de rendimiento

Flujo de trabajo de ejemplo:

You: "My application takes too long to load"
Claude: Let me analyse the performance of your application.

get_page_info()

I can see your page has 47 scripts and took 3.2 seconds to load. Let me get more detailed performance data:

get_performance_metrics()

The main bottleneck is the initial JavaScript bundle which is 2.1MB. The DOM processing also takes 800ms.

Depuración de Problemas de Autenticación

Cuando el inicio de sesión o la gestión de sesiones no funcionan:

  1. Navega a tu página de inicio de sesión
  2. Verifica las cookies: Usa get_cookies() para ver las cookies de autenticación
  3. Monitorea la red durante el inicio de sesión: Usa monitor_console_live() y get_network_requests() durante el proceso de inicio de sesión
  4. Examina los datos almacenados: Usa la ejecución de JavaScript para verificar localStorage/sessionStorage

Flujo de trabajo de ejemplo:

You: "Users can't stay logged in"
Claude: Let me check the authentication setup.

get_cookies()

I can see the auth cookie is present. Let me check what happens during login by monitoring the network:

get_network_requests(filter_domain="your-api.com")

I notice the login request returns a 200 but no Set-Cookie header. Let me also check localStorage:

execute_javascript("Object.keys(localStorage)")

Inspección de Elementos DOM

  • get_document(depth?, pierce?) - Recuperar la estructura del documento DOM
  • query_selector(node_id, selector) - Buscar un solo elemento por selector CSS
  • query_selector_all(node_id, selector) - Buscar múltiples elementos por selector CSS
  • get_element_attributes(node_id) - Obtener todos los atributos de un elemento
  • get_element_outer_html(node_id) - Obtener el HTML externo de un elemento
  • get_element_box_model(node_id) - Obtener información de diseño
  • describe_element(node_id, depth?) - Obtener descripción detallada del elemento
  • get_element_at_position(x, y) - Obtener el elemento en una posición de pantalla
  • search_elements(query) - Buscar elementos DOM por texto/atributos
  • focus_element(node_id) - Enfocar un elemento DOM

Análisis de Estilos CSS

  • get_computed_styles(node_id) - Obtener estilos CSS calculados
  • get_inline_styles(node_id) - Obtener estilos en línea
  • get_matched_styles(node_id) - Obtener todas las reglas CSS que coinciden con un elemento
  • get_stylesheet_text(stylesheet_id) - Obtener contenido de hoja de estilos
  • get_background_colors(node_id) - Obtener colores de fondo y fuentes
  • get_platform_fonts(node_id) - Obtener información de fuentes de la plataforma
  • get_media_queries() - Obtener todas las consultas de medios (media queries)
  • collect_css_class_names(stylesheet_id) - Recopilar nombres de clases CSS
  • start_css_coverage_tracking() - Iniciar seguimiento de cobertura CSS
  • stop_css_coverage_tracking() - Detener y obtener resultados de cobertura CSS

Comandos Comunes

TareaComando
Iniciar Chrome y conectar a la aplicaciónstart_chrome_and_connect("localhost:3000")
Iniciar Chrome (configuración manual)start_chrome()
Navegar a una páginanavigate_to_url("localhost:3000")
Conectarse al navegadorconnect_to_browser()
Ver todas las solicitudes de redget_network_requests()
Encontrar llamadas API fallidasget_network_requests(filter_status=404)
Verificar errores de JavaScriptget_console_error_summary()
Observar la consola en tiempo realmonitor_console_live(10)
Verificar el rendimiento de carga de páginaget_page_info()
Examinar una variableinspect_console_object("window.myApp")
Ver cookiesget_cookies()
Ejecutar JavaScriptexecute_javascript("document.title")

Configuración

Variables de Entorno

  • CHROME_DEBUG_PORT - Puerto de depuración remota de Chrome (predeterminado: 9222)

Compatibilidad MCP

  • Versión del Protocolo MCP: 2024-11-05
  • Versión Mínima de Python: 3.10+
  • Clientes MCP Compatibles: Claude Desktop, cualquier cliente compatible con MCP
  • Gestor de Paquetes: uv (recomendado) o pip

Flujo de Trabajo de Uso

Requisitos Previos (Tu Entorno de Desarrollo)

  • Ten tu aplicación web en ejecución (p. ej., npm run dev, python -m http.server, etc.)
  • Anota la URL donde tu aplicación es accesible

Sesión de Depuración

  1. Conéctate a tu aplicación mediante Claude Desktop:

    start_chrome_and_connect("localhost:3000")
    

    Reemplaza con la URL de tu aplicación

  2. Depura tu aplicación usando las herramientas MCP:

    • Monitorea solicitudes de red
    • Verifica errores de consola
    • Inspecciona objetos JavaScript
    • Analiza el rendimiento
  3. Haz cambios en tu código en tu editor

  4. Actualiza o interactúa con tu aplicación

  5. Continúa depurando con datos en tiempo real

Conexión Manual (Alternativa)

Si prefieres control paso a paso:

  1. start_chrome() - Iniciar Chrome con depuración
  2. navigate_to_url("your-app-url") - Navegar a tu aplicación
  3. connect_to_browser() - Conectar el servidor MCP
  4. Usa las herramientas de depuración según sea necesario

Notas de Seguridad

  • Úsalo solo con entornos de desarrollo
  • Nunca te conectes a instancias de Chrome en producción
  • El servidor está diseñado solo para depuración en localhost
  • No se almacenan datos de forma permanente: todos los datos se basan en la sesión

Solución de Problemas

El Servidor Aparece como "Deshabilitado" en Claude Desktop

Si el servidor aparece en Claude pero muestra "deshabilitado", intenta estos pasos:

  1. Verifica los registros de Claude Desktop:

    • macOS: ~/Library/Logs/Claude/mcp*.log
    • Windows: %APPDATA%/Claude/logs/mcp*.log
  2. Correcciones comunes:

    # Reinstall with verbose output
    mcp remove "Chrome DevTools MCP"
    mcp install server.py -n "Chrome DevTools MCP" --with-editable . -v CHROME_DEBUG_PORT=9222
    
    # Check installation status
    mcp list
    
    # Test the server manually
    python3 server.py
    
  3. Verifica las dependencias:

    # Ensure all dependencies are available
    pip install mcp websockets aiohttp
    
    # Test imports
    python3 -c "from server import mcp; print('OK')"
    
  4. Reinicia Claude Desktop por completo (sal y vuelve a abrir)

Problemas de instalación

  • MCP CLI no encontrado: Instala MCP CLI desde el Python MCP SDK con pip install mcp
  • El servidor no aparece en Claude:
    • Para MCP CLI: Ejecuta mcp list para verificar que el servidor esté instalado
    • Para configuración manual: Revisa la ruta del archivo de configuración de Claude Desktop y la sintaxis JSON
  • Errores de importación:
    • Para MCP CLI: Usa --with-editable . para instalar dependencias locales
    • Para configuración manual: Ejecuta pip install -r requirements.txt
  • Errores de permisos: Usa rutas absolutas en la configuración
  • Variables de entorno no funcionan: Verifica el formato del archivo .env o la sintaxis del flag -v
  • Módulo no encontrado: Asegúrate de usar el flag --with-editable . para la instalación local de paquetes

Pasos de depuración

Paso 1: Verifica el estado de MCP CLI

# List all installed servers
mcp list

# Check specific server status
mcp status "Chrome DevTools MCP"

Paso 2: Prueba el servidor manualmente

# Test if server starts without errors
python3 server.py

# Test imports
python3 -c "from server import mcp; print(f'Server: {mcp.name}')"

Paso 3: Revisa la configuración

Para Claude Desktop:

# View current configuration (macOS)
cat "~/Library/Application Support/Claude/claude_desktop_config.json"

# View current configuration (Windows)
type "%APPDATA%/Claude/claude_desktop_config.json"

Para Claude Code:

# List configured MCP servers
claude mcp list

# Get details about a specific server
claude mcp get chrome-devtools

# IMPORTANT: Verify paths are absolute, not relative
# Good example output:
#   Command: /Users/you/chrome-devtools-mcp/.venv/bin/python
#   Args: ["/Users/you/chrome-devtools-mcp/server.py"]
# Bad example output:
#   Command: python
#   Args: ["server.py"]

# Test the exact command Claude Code will use
/path/to/.venv/bin/python /path/to/server.py

# Check if server is working
claude mcp serve --help

Paso 3.5: Soluciona problemas de rutas (específico de Claude Code)

# If paths are relative, remove and re-add with absolute paths
claude mcp remove chrome-devtools

# Re-add with absolute paths
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"
claude mcp add chrome-devtools "$PYTHON_PATH" "$SERVER_PATH" -e CHROME_DEBUG_PORT=9222

Paso 4: Reinstala si es necesario

Para MCP CLI:

# Clean reinstall
mcp remove "Chrome DevTools MCP"
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

# Restart Claude Desktop completely

Para Claude Code:

# Remove and re-add the server
claude mcp remove chrome-devtools
claude mcp add chrome-devtools python server.py -e CHROME_DEBUG_PORT=9222

# Or update with different scope
claude mcp add chrome-devtools python server.py -s user -e CHROME_DEBUG_PORT=9222

Mensajes de error comunes

ErrorSolución
"Módulo no encontrado"Usa el flag --with-editable .
"No se encontró un objeto de servidor"El servidor debe exportar el objeto mcp (ya corregido)
"Error de importación"Revisa pip install mcp websockets aiohttp
"Permiso denegado"Usa rutas absolutas en la configuración
"Servidor deshabilitado"Revisa los registros de Claude Desktop, reinicia Claude
"python: comando no encontrado" (Claude Code)Usa la ruta absoluta al Python del venv: /path/to/.venv/bin/python
"server.py: No existe el archivo" (Claude Code)Usa la ruta absoluta al servidor: /path/to/server.py
"ModuleNotFoundError" (Claude Code)Usa el Python del venv que tenga las dependencias instaladas

Configuración manual alternativa

Para Claude Desktop: Si MCP CLI no funciona, agrega esto manualmente a la configuración de Claude Desktop:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python3",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

Para Claude Code: Si el comando claude mcp add no funciona, puedes usar el formato JSON con rutas absolutas:

# Get absolute paths first
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"

# Add server using JSON configuration with absolute paths
claude mcp add-json chrome-devtools "{
  \"command\": \"$PYTHON_PATH\",
  \"args\": [\"$SERVER_PATH\"],
  \"env\": {
    \"CHROME_DEBUG_PORT\": \"9222\"
  }
}"

# Or if you have it working in Claude Desktop, import from there
claude mcp add-from-claude-desktop

Ejemplo de configuración correcta de Claude Code (con rutas absolutas):

{
  "command": "/Users/you/chrome-devtools-mcp/.venv/bin/python",
  "args": ["/Users/you/chrome-devtools-mcp/server.py"],
  "env": {
    "CHROME_DEBUG_PORT": "9222"
  }
}

Problemas de conexión

  • Chrome no se inicia: El servidor MCP iniciará Chrome automáticamente cuando uses start_chrome()
  • No se puede conectar: Prueba get_connection_status() para revisar la conexión
  • Las herramientas no funcionan: Asegúrate de haber llamado a connect_to_browser() o usado start_chrome_and_connect()

Conceptos erróneos comunes

  • Esto no es un servidor web: El servidor MCP se ejecuta dentro de Claude Desktop, no como un servicio web separado
  • No se necesita instalación adicional: Una vez configurado en Claude Desktop, el servidor se inicia automáticamente
  • Tu aplicación se ejecuta por separado: Esta herramienta se conecta a tu aplicación web existente, no la ejecuta

Desarrollo y pruebas

Esta sección es para desarrolladores que quieren probar o modificar el servidor MCP en sí.

Configuración de desarrollo

Con uv (recomendado):

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
uv sync

Con pip:

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
pip install -e ".[dev]"

Herramientas de calidad de código

# Format code
uv run ruff format .

# Lint code  
uv run ruff check .

# Type checking
uv run mypy src/

Construcción de la extensión

Instala las herramientas de empaquetado de DXT:

npm install -g @anthropic-ai/dxt

Construye la extensión:

# Quick build
make package

# Or manually
npx @anthropic-ai/dxt pack

Usando Makefile para desarrollo:

make help           # Show all commands
make install        # Install dependencies
make dev            # Setup development environment + pre-commit
make check          # Run all checks (lint + type + test)
make pre-commit     # Run pre-commit hooks manually
make package        # Build .dxt extension
make release        # Full release build

Hooks de pre-commit

Este proyecto utiliza hooks de pre-commit para garantizar la calidad del código:

  • ruff: Linting y formato
  • mypy: Verificación de tipos
  • pytest: Validación de pruebas
  • Validación de MCP: Verificación del registro del servidor

Los hooks de pre-commit se ejecutan automáticamente en git commit y se pueden ejecutar manualmente con make pre-commit.

Licencia

Licencia MIT