DevCDP

Server MCP di Dayananda-D

Ispeziona ed esegui il debug di pagine web tramite Chrome DevTools: console, rete, DOM, source map, breakpoint e variabili live.

Gira in locale (Gira sul tuo computer: la sua pagina riporta il comando di installazione)Gira con npx

Installa DevCDP

Gira sul tuo computer. Il tuo client lo avvia con questo comando:

npx -y devcdp

Richiede Node.js sul tuo computer. I passaggi qui sotto mostrano dove va il comando in ogni client.

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

Condividi questo server

Apre questa pagina, con il comando di installazione e i passaggi di configurazione.

mcp.tc/i/devcdp

Descrizione

DevCDP offre a un assistente AI l’accesso a Chrome DevTools. Secondo la descrizione nel registry, copre la console, l’attività di rete, il DOM, le source map, i breakpoint e le variabili live, così l’assistente può fare il debug di una pagina in esecuzione con dati reali del browser.

Funziona in locale tramite stdio e si avvia con npx dal pacchetto npm devcdp. Non serve alcuna chiave API. Chrome deve essere installato. Se non si trova nel percorso predefinito, imposta DEVCDP_CHROME_PATH. DEVCDP_LOG_LEVEL controlla il livello di dettaglio dei log su stderr.

Cosa puoi fare

  • Leggere l’output della console del browser
  • Ispezionare l’attività di rete
  • Ispezionare il DOM
  • Lavorare con le source map
  • Usare i breakpoint e leggere le variabili live

Tool

I server locali mostrano i loro tool solo quando sono in esecuzione, e questo non pubblica l’elenco in anticipo. Il tuo client li mostra dopo che lo hai aggiunto.

Prompt di esempio

  • Controlla la console del browser per errori in questa pagina.

  • Mostrami le richieste di rete fallite nella pagina che ho aperto.

  • Imposta un breakpoint nel mio handler di checkout e mostrami le variabili live.

  • Ispeziona il DOM del modulo di accesso e dimmi perché il pulsante è nascosto.

Configurazione

Ogni client avvia DevCDP sul tuo computer con lo stesso comando. Scegli il tuo; la pagina ricorda la tua scelta.

Claude Code

  1. Eseguilo in un terminale, nella cartella del tuo progetto:
claude mcp add --transport stdio devcdp -- npx -y devcdp
  1. Avvia Claude Code e digita /mcp. devcdp dovrebbe risultare collegato.

Aggiungi --scope user per renderlo disponibile in tutti i progetti.

Claude Desktop

  1. Apri Settings → Developer → Edit Config. Si apre claude_desktop_config.json. Aggiungi:
claude_desktop_config.json
{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}
  1. Salva il file e riavvia Claude Desktop.

Richiede Node.js sul tuo computer. Il file si trova in ~/Library/Application Support/Claude/ su macOS e in %APPDATA%\Claude\ su Windows.

Cursor

Oppure aggiungilo a mano in ~/.cursor/mcp.json (tutti i progetti) o in .cursor/mcp.json (questo progetto):

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

Richiede Node.js sul tuo computer.

VS Code

Oppure da un terminale:

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

Oppure fai commit nel repository in .vscode/mcp.json:

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

Richiede Node.js sul tuo computer.

Devin Desktop

  1. Aggiungilo a ~/.config/devin/mcp_config.json (macOS e Linux) o a %APPDATA%\devin\mcp_config.json (Windows):
mcp_config.json
{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}
  1. Aggiorna l’elenco dei server MCP in Cascade.

Devin Desktop è il nuovo nome di Windsurf.

Codex

codex mcp add devcdp -- npx -y devcdp

Oppure modifica direttamente ~/.codex/config.toml:

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

Richiede Node.js sul tuo computer.

Gemini CLI

gemini mcp add devcdp npx -- -y devcdp

Così lo aggiungi al progetto corrente. Aggiungi -s user per usarlo ovunque.

Qualsiasi client

La maggior parte dei client che avviano server locali accetta questa forma:

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

Zed mette i server sotto context_servers nelle sue impostazioni, con gli stessi campi command, args ed env.

Richiede Node.js sul tuo computer.

Embed

Mostra DevCDP in un README o sul tuo sito. Ogni embed rimanda a questa pagina, usa il comando di installazione del server e non imposta cookie. Come funzionano gli embed

Card, iframe e JSON sono in inglese. Aggiungi ?lang=it, fr, de o es al loro indirizzo per un’altra lingua.

Badge per il README

Anteprima del badge, chiaroAnteprima del badge, scuro
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>

Segue la modalità chiara o scura di chi legge. Aggiungi ?theme=light o ?theme=dark per fissarla, oppure ?style=compact per mostrare il simbolo senza la scritta.

Card per il sito

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

La card compare dove si trova il tag. Aggiungi data-theme="dark" o data-size="compact" al tag per cambiarla. Il file contiene tutto ciò che serve, quindi non fa altre richieste e non imposta cookie.

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>

Usalo nelle pagine che non consentono script. Aggiungi ?theme=light o ?theme=dark all’indirizzo per fissare i colori.

JSON

La scheda come dati per le tue pagine e i tuoi strumenti: nome, descrizione breve, comando di installazione, tool e i link «Add to». Qualsiasi sito può leggerla (CORS aperto).

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

Cosa significa ogni campo

Prompt per l’AI

Incollalo in un assistente di programmazione con l’AI, come Claude Code o Cursor, e aggiungerà la card di DevCDP al tuo sito.

Markdown
Aggiungi al mio sito la card di mcp.tc per DevCDP, un server MCP. È un solo script statico: niente build, nessun pacchetto da installare, nessun cookie.

Metti questo tag dove deve comparire la card. La card appare subito prima del tag:

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

Per mostrarla altrove, metti lì questo segnaposto e carica lo stesso script una volta sola, per esempio prima di `</body>`. Lascia il link al suo interno: lo vede chi non ha JavaScript.

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

Opzioni:
- `data-theme="light"` o `"dark"` sul tag o sul segnaposto fissa i colori. Senza l’attributo, la card segue la modalità chiara o scura di chi visita.
- `data-size="compact"` dà una card più piccola, senza la descrizione breve.
- La variabile CSS `--mcptc-max-width` sul segnaposto o su un elemento padre imposta la larghezza (predefinita `520px`).
- `?lang=` nell’URL dello script imposta la lingua della card: `en`, `it`, `fr`, `de` o `es`.

Se il sito ha una Content Security Policy, consenti `script-src https://mcp.tc` e `img-src data:` (l’icona è inline).

Per un README o altra documentazione in Markdown, usa invece il badge:

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

Riferimento: https://mcp.tc/it/embed

Cronologia delle modifiche

Questo server gira sul tuo computer, quindi seguiamo il suo pacchetto npm: qui compare ogni nuova versione, insieme alle modifiche di chi lo gestisce.

Segui DevCDP e ti mandiamo un’email quando qualcosa cambia.

  1. , Controllo automatico

    Inizio del tracciamento: versione 5.0.1.

Domande frequenti

Posso incollare mcp.tc/i/devcdp nel mio client MCP?

No. DevCDP gira sul tuo computer, avviato dal tuo client, quindi non ha un indirizzo web a cui collegarsi. Il link rapido è la pagina da condividere; il comando di installazione è npx -y devcdp.

DevCDP richiede una chiave API?

No. Non dichiara chiavi né variabili d’ambiente. Gira con i permessi del tuo account utente, quindi controlla cosa possono raggiungere i suoi tool.

DevCDP è un server remoto o locale?

Locale. Il tuo client lo avvia come processo sul tuo computer con npx -y devcdp, che richiede Node.js.

Cosa può fare DevCDP?

Puoi leggere l’output della console del browser, ispezionare l’attività di rete e ispezionare il DOM.

Quali client possono usarlo?

Qualsiasi client che avvia server locali: Claude Code, Claude Desktop, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed e altri. claude.ai e ChatGPT si collegano solo a server remoti.

mcp.tc tiene traccia delle modifiche di DevCDP?

In parte. Gira sul tuo computer, quindi seguiamo il suo pacchetto npm: la sua sezione Cronologia mostra ogni nuova versione e le modifiche di chi lo gestisce. Segui la scheda per ricevere un’email quando cambia.

Chi ha scritto questa pagina?

Il robot di mcp.tc ha letto i metadati pubblici di DevCDP (le pagine del suo pacchetto e del repository), e un modello di AI ne ha ricavato il testo. Una persona esamina tutto ciò che i controlli non riescono a confermare. Il testo può comunque contenere errori, quindi se ne trovi uno usa Segnala questa scheda su questa pagina. Questa traduzione è stata fatta da un modello di AI a partire dal testo inglese.

mcp.tc non è affiliato a Dayananda-D. Questa pagina è stata creata a partire dai metadati pubblici di DevCDP (ultimo controllo: 5 ott 2026), e la descrizione l’ha scritta un modello di AI, quindi può contenere errori. Nomi e marchi appartengono ai rispettivi titolari. Qualcosa non va? Segnala questa scheda. La traduzione è stata fatta da un modello di AI a partire dal testo inglese.