Firefox DevTools MCP

Servidor del Protocolo de Contexto de Modelo (MCP) para automatizar Firefox mediante WebDriver BiDi (a través de Selenium WebDriver). Funciona con Claude Code, Claude Desktop, Cursor, Cline y otros clientes MCP.

Repositorio: https://github.com/mozilla/firefox-devtools-mcp

Nota: Este servidor MCP requiere una instalación local del navegador Firefox y no puede ejecutarse en servicios de alojamiento en la nube como glama.ai. Utilice npx firefox-devtools-mcp@latest para ejecutarlo localmente, o utilice Docker con el Dockerfile proporcionado.

Requisitos

• Node.js ≥ 20.19.0

• Firefox 100+ instalado (detectado automáticamente, o pase --firefox-path)

Instalación y uso con Claude Code (npx)

Recomendado: utilice npx para ejecutar siempre la última versión publicada desde npm.

Opción A — CLI de Claude Code

claude mcp add firefox-devtools npx firefox-devtools-mcp@latest

Pase las opciones como argumentos o variables de entorno. Ejemplos:

# Headless + viewport via args
claude mcp add firefox-devtools npx firefox-devtools-mcp@latest -- --headless --viewport 1280x720

# Or via environment variables
claude mcp add firefox-devtools npx firefox-devtools-mcp@latest \
  --env START_URL=https://example.com \
  --env FIREFOX_HEADLESS=true

Opción B — Editar el JSON de configuración de Claude Code

Añada a su archivo de configuración de Claude Code:

• macOS: ~/Library/Application Support/Claude/Code/mcp_settings.json

• Linux: ~/.config/claude/code/mcp_settings.json

• Windows: %APPDATA%\Claude\Code\mcp_settings.json

{
  "mcpServers": {
    "firefox-devtools": {
      "command": "npx",
      "args": ["-y", "firefox-devtools-mcp@latest", "--headless", "--viewport", "1280x720"],
      "env": {
        "START_URL": "about:home"
      }
    }
  }
}

Opción C — Script auxiliar (compilación de desarrollo local)

npm run setup
# Choose Claude Code; the script saves JSON to the right path

Pruébelo con MCP Inspector

npx @modelcontextprotocol/inspector npx firefox-devtools-mcp@latest --start-url https://example.com --headless

Luego llame a herramientas como:

• list_pages, select_page, navigate_page

• take_snapshot y luego click_by_uid / fill_by_uid

• list_network_requests (captura siempre activa), get_network_request

• screenshot_page, list_console_messages

Opciones de CLI

Puede pasar flags o variables de entorno (nombres a la derecha):

• --firefox-path — ruta absoluta al binario de Firefox

• --headless — ejecutar sin interfaz de usuario (FIREFOX_HEADLESS=true)

• --viewport 1280x720 — tamaño inicial de la ventana

• --profile-path — utilizar un perfil de Firefox específico

• --firefox-arg — argumentos adicionales de Firefox (repetible)

• --start-url — abrir esta URL al iniciar (START_URL)

• --accept-insecure-certs — ignorar errores TLS (ACCEPT_INSECURE_CERTS=true)

• --connect-existing — conectar a un Firefox ya en ejecución en lugar de iniciar uno nuevo (CONNECT_EXISTING=true)

• --marionette-port — puerto Marionette para el modo de conexión existente, por defecto 2828 (MARIONETTE_PORT)

• --pref name=value — establecer preferencias de Firefox al inicio mediante moz:firefoxOptions (repetible)

• --enable-script — habilitar la herramienta evaluate_script, que ejecuta JavaScript arbitrario en el contexto de la página (ENABLE_SCRIPT=true)

• --enable-privileged-context — habilitar herramientas de contexto privilegiado: listar/seleccionar contextos privilegiados, evaluar scripts privilegiados, obtener/establecer preferencias de Firefox y listar extensiones. Requiere MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1 (ENABLE_PRIVILEGED_CONTEXT=true)

Nota sobre --pref: Cuando Firefox se ejecuta en automatización, aplica RecommendedPreferences que modifican el comportamiento del navegador para las pruebas. La opción --pref permite anular estos valores predeterminados cuando sea necesario.

Conectar a un Firefox existente

Utilice --connect-existing para automatizar su sesión de navegación real, con cookies, inicios de sesión y pestañas abiertas intactos:

# Start Firefox with Marionette enabled
firefox --marionette

# Run the MCP server
npx firefox-devtools-mcp --connect-existing --marionette-port 2828

O establezca marionette.enabled en true en about:config (o user.js) para habilitar Marionette en cada inicio.

Las funciones dependientes de BiDi (eventos de consola, eventos de red) no están disponibles en el modo de conexión existente; todas las demás funciones funcionan normalmente.

Advertencia: No deje Marionette habilitado durante la navegación normal. Establece navigator.webdriver = true y cambia otras señales de huella digital del navegador, lo que puede activar la detección de bots en sitios protegidos por Cloudflare, Akamai, etc. Solo habilite Marionette cuando necesite la automatización de MCP, luego reinicie Firefox normalmente después.

Resumen de herramientas

• Páginas: listar/nueva/navegar/seleccionar/cerrar

• Instantánea/UID: tomar/resolver/borrar

• Entrada: clic/pasar el ratón/rellenar/arrastrar/subir/rellenar formulario

• Red: listar/obtener (ID primero, filtros, captura siempre activa)

• Consola: listar/borrar

• Captura de pantalla: página/por uid (con saveTo opcional para entornos CLI)

• Script: evaluate_script

• Contexto privilegiado: listar/seleccionar contextos privilegiados ("chrome"), evaluate_privileged_script (requiere MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1)

• WebExtension: install_extension, uninstall_extension, list_extensions (listar requiere MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1)

• Gestión de Firefox: get_firefox_info, get_firefox_output, restart_firefox, set_firefox_prefs, get_firefox_prefs

• Utilidades: aceptar/descartar diálogo, historial atrás/adelante, establecer viewport

Optimización de capturas de pantalla para Claude Code

Al usar capturas de pantalla en la CLI de Claude Code, los datos de imagen en base64 pueden consumir un contexto significativo. Utilice el parámetro saveTo para guardar las capturas de pantalla en el disco en su lugar:

screenshot_page({ saveTo: "/tmp/page.png" })
screenshot_by_uid({ uid: "abc123", saveTo: "/tmp/element.png" })

El archivo puede verse con la herramienta Read de Claude Code sin afectar al tamaño del contexto.

Desarrollo local

npm install
npm run build

# Run with Inspector against local build
npx @modelcontextprotocol/inspector node dist/index.js --headless --viewport 1280x720

# Or run in dev with hot reload
npm run inspector:dev

Pruebas

npm run test:run          # all tests once (unit + integration)
npm test                  # watch mode

Consulte docs/testing.md para obtener detalles completos sobre la ejecución de suites de pruebas específicas, la cobertura de escenarios e2e y los problemas conocidos.

Solución de problemas

• Firefox no encontrado: pase --firefox-path "/Applications/Firefox.app/Contents/MacOS/firefox" (macOS) o la ruta correcta en su sistema operativo.

• La primera ejecución es lenta: Selenium configura la sesión BiDi; las ejecuciones posteriores son más rápidas.

• UIDs obsoletos después de la navegación: tome una instantánea nueva (take_snapshot) antes de usar las herramientas de UID.

• Windows 10: Error durante el descubrimiento del servidor MCP 'firefox-devtools': Error MCP -32000: Conexión cerrada

  • Solución 1 Llame usando cmd (Para más información https://github.com/modelcontextprotocol/servers/issues/1082#issuecomment-2791786310)

    "mcpServers": {
      "firefox-devtools": {
        "command": "cmd",
        "args": ["/c", "npx", "-y", "firefox-devtools-mcp@latest"]
      }
    }

    El cambio clave: En Windows, ejecutar un paquete de Node.js a través de npx a menudo requiere el prefijo cmd /c para ejecutarse correctamente desde otro proceso como el host de extensiones de VSCode. Por lo tanto, se reemplazó "command": "npx" con "command": "cmd", y el comando npx real se movió a la matriz "args", precedido por "/c". Esta corrección permite que Windows interprete el comando correctamente e inicie el servidor.

  • Solución 2 En lugar de otra capa de shell, puede escribir la ruta absoluta a npx:

    "mcpServers": {
      "firefox-devtools": {
        "command": "C:\\nvm4w\\nodejs\\npx.ps1",
        "args": ["-y", "firefox-devtools-mcp@latest"]
      }
    }

    Nota: La ruta anterior es un ejemplo. Debe ajustarla para que coincida con la ubicación real de npx en su máquina. Dependiendo de su configuración, la extensión del archivo podría ser .cmd, .bat o .exe en lugar de .ps1. Además, asegúrese de usar barras invertidas dobles (\\) como delimitadores de ruta, según lo requerido por el formato JSON.

Versionado

• API anterior a 1.0: las versiones comienzan en 0.x. Use @latest con npx para la versión más reciente.

CI y Lanzamiento

• Se incluyen GitHub Actions para CI, lanzamiento y publicación en npm. Consulte docs/ci-and-release.md para obtener detalles y los secretos requeridos.

Problemas y contribuciones

Los problemas se rastrean en Bugzilla bajo product: Developer Infrastructure, component: AI for Development.

• Informar de un nuevo problema

• Meta bug (rastrea todos los problemas de firefox-devtools-mcp)

Para preguntas y debates, únase a la sala de Matrix #firefox-devtools-mcp.

Autor

Mantenido por Mozilla.