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)

Related MCP server: gecko-mcp

Instalación y uso con Claude Code (npx)

Recomendado: use 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

Agréguelo 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 indicadores 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 — usar 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 — conectarse a un Firefox ya en ejecución en lugar de iniciar uno nuevo (CONNECT_EXISTING=true)

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

• --pref name=value — establecer la preferencia 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.

Conectarse a un Firefox existente

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

# 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 que dependen 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.

Descripción general de las herramientas

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

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

• Entrada: hacer 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. Use 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 se puede ver con la herramienta Read de Claude Code sin afectar el 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 conjuntos de pruebas específicos, 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 Envuelva con cmd /c (detalles):

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

  • Solución 2 Use la ruta absoluta a npx (ajuste la extensión — .cmd, .bat, .exe o .ps1 — para que coincida con su configuración):

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

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.