DevCDP

Servidor MCP de Dayananda-D

Inspecciona y depura páginas web con Chrome DevTools: consola, red, DOM, source maps, breakpoints y variables en vivo.

Se ejecuta en local (Se ejecuta en tu equipo: su página tiene el comando de instalación)Se ejecuta con npx

Instalar DevCDP

Se ejecuta en tu equipo. Tu cliente lo inicia con este comando:

npx -y devcdp

Requiere Node.js en tu equipo. Los pasos de configuración de abajo muestran dónde va el comando en cada cliente.

  • DEVCDP_CHROME_PATH opcional Path to the Chrome executable, when it is not on the default install path.
  • DEVCDP_LOG_LEVEL opcional Server log verbosity on stderr: debug, info, warn or error.

Compartir este servidor

El enlace abre esta página, con el comando de instalación y los pasos de configuración.

mcp.tc/i/devcdp

Descripción

DevCDP da a un asistente de IA acceso a Chrome DevTools. Según la descripción de su registro, cubre la consola, la actividad de red, el DOM, los source maps, los breakpoints y las variables en vivo, de modo que el asistente puede depurar una página en ejecución con datos reales del navegador.

Se ejecuta en local mediante stdio y se inicia con npx desde el paquete npm devcdp. No requiere clave de API. Chrome debe estar instalado. Si no está en la ruta predeterminada, define DEVCDP_CHROME_PATH. DEVCDP_LOG_LEVEL controla el nivel de detalle de los logs en stderr.

Qué puedes hacer

  • Leer la salida de la consola del navegador
  • Inspeccionar la actividad de red
  • Inspeccionar el DOM
  • Trabajar con source maps
  • Usar breakpoints y leer variables en vivo

Herramientas

Los servidores locales muestran sus herramientas cuando están en marcha, y este no publica su lista por adelantado. Tu cliente las muestra después de añadirlo.

Prompts de ejemplo

  • Revisa la consola del navegador en busca de errores en esta página.

  • Muéstrame las solicitudes de red fallidas de la página que tengo abierta.

  • Pon un breakpoint en mi manejador del checkout y muestra las variables en vivo.

  • Inspecciona el DOM del formulario de inicio de sesión y dime por qué el botón está oculto.

Configuración

Todos los clientes inician DevCDP en tu equipo con el mismo comando. Elige el tuyo; la página recuerda tu elección.

Claude Code

  1. Ejecútalo en un terminal, en la carpeta de tu proyecto:
claude mcp add --transport stdio devcdp -- npx -y devcdp
  1. Inicia Claude Code y escribe /mcp. devcdp debería aparecer como conectado.

Añade --scope user para que esté disponible en todos los proyectos.

Claude Desktop

  1. Abre Settings → Developer → Edit Config. Se abre claude_desktop_config.json. Añade:
claude_desktop_config.json
{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}
  1. Guarda el archivo y reinicia Claude Desktop.

Necesita Node.js en tu equipo. El archivo está en ~/Library/Application Support/Claude/ en macOS y en %APPDATA%\Claude\ en Windows.

Cursor

O añádelo a mano en ~/.cursor/mcp.json (todos los proyectos) o en .cursor/mcp.json (este proyecto):

mcp.json
{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}

Necesita Node.js en tu equipo.

VS Code

O desde un terminal:

code --add-mcp '{"name":"devcdp","type":"stdio","command":"npx","args":["-y","devcdp"]}'

O haz commit del archivo en el repositorio como .vscode/mcp.json:

.vscode/mcp.json
{
  "servers": {
    "devcdp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}

Necesita Node.js en tu equipo.

Devin Desktop

  1. Añádelo a ~/.config/devin/mcp_config.json (macOS y Linux) o a %APPDATA%\devin\mcp_config.json (Windows):
mcp_config.json
{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}
  1. Actualiza la lista de servidores MCP en Cascade.

Devin Desktop es el nuevo nombre de Windsurf.

Codex

codex mcp add devcdp -- npx -y devcdp

O edita directamente ~/.codex/config.toml:

config.toml
[mcp_servers.devcdp]
command = "npx"
args = ["-y", "devcdp"]

Necesita Node.js en tu equipo.

Gemini CLI

gemini mcp add devcdp npx -- -y devcdp

Así lo añades al proyecto actual. Añade -s user para usarlo en todas partes.

Cualquier cliente

La mayoría de los clientes que inician servidores locales aceptan esta forma:

{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}

Zed pone los servidores bajo context_servers en sus ajustes, con los mismos campos command, args y env.

Necesita Node.js en tu equipo.

Insertar

Muestra DevCDP en un README o en tu web. Cada inserción enlaza a esta página, usa el comando de instalación del servidor y no instala cookies. Cómo funcionan las inserciones

La tarjeta, el iframe y el JSON están en inglés. Añade ?lang=it, fr, de o es a su dirección para otro idioma.

Insignia para README

Vista previa de la insignia, claraVista previa de la insignia, oscura
Markdown
[![DevCDP on mcp.tc](https://mcp.tc/i/devcdp/badge.svg)](https://mcp.tc/i/devcdp)
HTML
<a href="https://mcp.tc/i/devcdp"><img src="https://mcp.tc/i/devcdp/badge.svg" alt="DevCDP on mcp.tc" height="20"></a>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

HTML
<script src="https://mcp.tc/w/devcdp.js" async></script>

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala cookies.

iframe

HTML
<iframe src="https://mcp.tc/embed/devcdp" title="DevCDP on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, comando de instalación, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

https://mcp.tc/i/devcdp.json

Qué significa cada campo

Prompt para la IA

Pégalo en un asistente de programación con IA, como Claude Code o Cursor, y añadirá la tarjeta de DevCDP a tu web.

Markdown
Añade a mi web la tarjeta de mcp.tc de DevCDP, un servidor MCP. Es un solo script estático: sin paso de build, sin paquetes que instalar, sin cookies.

Pon esta etiqueta donde deba aparecer la tarjeta. La tarjeta se muestra justo antes de ella:

```html
<script src="https://mcp.tc/w/devcdp.js" async></script>
```

Para mostrarla en otro sitio, pon allí este marcador y carga el mismo script una sola vez, por ejemplo antes de `</body>`. Deja el enlace dentro: lo ven los visitantes sin JavaScript.

```html
<div data-mcptc="devcdp"><a href="https://mcp.tc/i/devcdp">DevCDP on mcp.tc</a></div>
```

Opciones:
- `data-theme="light"` o `"dark"` en la etiqueta o el marcador fija los colores. Sin él, la tarjeta sigue el modo claro u oscuro del visitante.
- `data-size="compact"` da una tarjeta más pequeña, sin el eslogan.
- La variable CSS `--mcptc-max-width` en el marcador o en un elemento padre fija el ancho (por defecto `520px`).
- `?lang=` en la URL del script fija el idioma de la tarjeta: `en`, `it`, `fr`, `de` o `es`.

Si el sitio tiene una Content Security Policy, permite `script-src https://mcp.tc` e `img-src data:` (el icono va incrustado).

Para un README u otra documentación en Markdown, usa la insignia:

```markdown
[![DevCDP on mcp.tc](https://mcp.tc/i/devcdp/badge.svg)](https://mcp.tc/i/devcdp)
```

Referencia: https://mcp.tc/es/embed

Historial de cambios

Este servidor se ejecuta en tu ordenador, así que seguimos su paquete de npm: cada versión nueva aparece aquí, junto con las ediciones de su responsable.

Sigue DevCDP y te enviaremos un correo cuando algo cambie.

  1. , Comprobación automática

    Inicio del seguimiento: versión 5.0.1.

Preguntas frecuentes

¿Puedo pegar mcp.tc/i/devcdp en mi cliente MCP?

No. DevCDP se ejecuta en tu propio equipo, iniciado por tu cliente, así que no tiene una dirección web a la que conectarse. El enlace rápido es la página para compartir; el comando de instalación es npx -y devcdp.

¿DevCDP necesita una clave de API?

No. No declara claves ni variables de entorno. Se ejecuta con los permisos de tu cuenta de usuario, así que comprueba a qué pueden acceder sus herramientas.

¿DevCDP es un servidor remoto o local?

Local. Tu cliente lo inicia como un proceso en tu equipo con npx -y devcdp, que necesita Node.js.

¿Qué puede hacer DevCDP?

Puedes leer la salida de la consola del navegador, inspeccionar la actividad de red y inspeccionar el DOM.

¿Qué clientes pueden usarlo?

Cualquier cliente que inicie servidores locales: Claude Code, Claude Desktop, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed y otros. claude.ai y ChatGPT solo se conectan a servidores remotos.

¿mcp.tc sigue los cambios de DevCDP?

En parte. Se ejecuta en tu ordenador, así que seguimos su paquete de npm: su pestaña Historial muestra cada versión nueva y las ediciones de su responsable. Sigue la ficha para recibir un correo cuando cambie.

¿Quién escribió esta página?

El robot de mcp.tc leyó los metadatos públicos de DevCDP (las páginas de su paquete y de su repositorio), y un modelo de IA redactó el texto a partir de ellos. Una persona revisa todo lo que las comprobaciones no pueden confirmar. Aun así, el texto puede contener errores, así que si encuentras uno, usa Reportar esta ficha en esta página. Esta traducción la hizo un modelo de IA a partir del texto en inglés.

mcp.tc no tiene relación con Dayananda-D. Esta página se creó a partir de los metadatos públicos de DevCDP, comprobados por última vez el 5 oct 2026, y un modelo de IA escribió la descripción, así que puede contener errores. Los nombres y marcas pertenecen a sus titulares. ¿Algo no cuadra? Reportar esta ficha. La traducción la hizo un modelo de IA a partir del texto en inglés.