DevCDP
Serveur MCP par Dayananda-D
Inspecter et déboguer des pages web via Chrome DevTools : console, réseau, DOM, source maps, points d’arrêt et variables en direct.
Installer DevCDP
Tourne sur votre machine. Votre client le lance avec cette commande :
Nécessite Node.js sur votre ordinateur. Les étapes ci-dessous montrent où placer la commande dans chaque client.
DEVCDP_CHROME_PATHfacultatif Path to the Chrome executable, when it is not on the default install path.DEVCDP_LOG_LEVELfacultatif Server log verbosity on stderr: debug, info, warn or error.
Partager ce serveur
Ouvre cette page, avec la commande d’installation et les étapes de configuration.
mcp.tc/i/devcdpPrésentation
DevCDP donne à un assistant IA l’accès à Chrome DevTools. D’après sa description dans le registre, il couvre la console, l’activité réseau, le DOM, les source maps, les points d’arrêt et les variables en direct, afin que l’assistant puisse déboguer une page en cours d’exécution avec de vraies données du navigateur.
Il s’exécute en local via stdio et se lance avec npx à partir du paquet npm devcdp. Aucune clé API n’est requise. Chrome doit être installé. S’il ne se trouve pas au chemin par défaut, définissez DEVCDP_CHROME_PATH. DEVCDP_LOG_LEVEL contrôle la verbosité des journaux sur stderr.
Ce que vous pouvez faire
- Lire la sortie de la console du navigateur
- Inspecter l’activité réseau
- Inspecter le DOM
- Travailler avec les source maps
- Utiliser des points d’arrêt et lire les variables en direct
Outils
Les serveurs locaux présentent leurs outils une fois lancés, et celui-ci ne publie pas sa liste à l’avance. Votre client les affiche après l’ajout.
Exemples de prompts
Vérifie les erreurs dans la console du navigateur sur cette page.
Montre-moi les requêtes réseau en échec sur la page que j’ai ouverte.
Place un point d’arrêt dans mon gestionnaire de paiement et montre les variables en direct.
Inspecte le DOM du formulaire de connexion et dis-moi pourquoi le bouton est masqué.
Configuration
Chaque client lance DevCDP sur votre machine avec la même commande. Choisissez le vôtre ; la page retient votre choix.
Claude Code
- Lancez ceci dans un terminal, dans le dossier de votre projet :
claude mcp add --transport stdio devcdp -- npx -y devcdp- Démarrez Claude Code et tapez
/mcp. devcdp devrait apparaître comme connecté.
Ajoutez --scope user pour le rendre disponible dans tous vos projets.
Claude Desktop
- Ouvrez Settings → Developer → Edit Config. Cela ouvre
claude_desktop_config.json. Ajoutez :
{
"mcpServers": {
"devcdp": {
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}- Enregistrez le fichier et redémarrez Claude Desktop.
Nécessite Node.js sur votre ordinateur. Le fichier se trouve dans ~/Library/Application Support/Claude/ sous macOS et dans %APPDATA%\Claude\ sous Windows.
Cursor
Ajouter à Cursor (s’ouvre dans un nouvel onglet)
Ou ajoutez-le à la main dans ~/.cursor/mcp.json (tous les projets) ou .cursor/mcp.json (ce projet) :
{
"mcpServers": {
"devcdp": {
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}Nécessite Node.js sur votre ordinateur.
VS Code
Installer dans VS Code (s’ouvre dans un nouvel onglet)
Ou depuis un terminal :
code --add-mcp '{"name":"devcdp","type":"stdio","command":"npx","args":["-y","devcdp"]}'Ou committez-le dans le dépôt, dans .vscode/mcp.json :
{
"servers": {
"devcdp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}Nécessite Node.js sur votre ordinateur.
Devin Desktop
- Ajoutez-le à
~/.config/devin/mcp_config.json(macOS et Linux) ou%APPDATA%\devin\mcp_config.json(Windows) :
{
"mcpServers": {
"devcdp": {
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}- Actualisez la liste des serveurs MCP dans Cascade.
Devin Desktop est le nouveau nom de Windsurf.
Codex
codex mcp add devcdp -- npx -y devcdpOu modifiez directement ~/.codex/config.toml :
[mcp_servers.devcdp]
command = "npx"
args = ["-y", "devcdp"]Nécessite Node.js sur votre ordinateur.
Gemini CLI
gemini mcp add devcdp npx -- -y devcdpCela l’ajoute au projet en cours. Ajoutez -s user pour l’utiliser partout.
Tout client
La plupart des clients qui lancent des serveurs locaux acceptent cette forme :
{
"mcpServers": {
"devcdp": {
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}Zed place les serveurs sous context_servers dans ses réglages, avec les mêmes champs command, args et env.
Nécessite Node.js sur votre ordinateur.
Intégrer
Affichez DevCDP dans un README ou sur votre site. Chaque intégration renvoie à cette page, utilise la commande d’installation du serveur et ne dépose aucun cookie. Comment fonctionnent les intégrations
La carte, l’iframe et le JSON sont en anglais. Ajoutez ?lang=it, fr, de ou es à leur adresse pour une autre langue.
Badge pour README
[](https://mcp.tc/i/devcdp)<a href="https://mcp.tc/i/devcdp"><img src="https://mcp.tc/i/devcdp/badge.svg" alt="DevCDP on mcp.tc" height="20"></a>Il suit le mode clair ou sombre du lecteur. Ajoutez ?theme=light ou ?theme=dark pour le fixer, ou ?style=compact pour afficher le symbole sans le nom.
Carte pour site web
<script src="https://mcp.tc/w/devcdp.js" async></script>La carte apparaît à l’endroit de la balise. Ajoutez data-theme="dark" ou data-size="compact" à la balise pour la modifier. Le fichier contient tout ce qu’il lui faut : il ne fait aucune autre requête et ne dépose aucun cookie.
iframe
<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>Utilisez-la sur les pages qui n’autorisent pas les scripts. Ajoutez ?theme=light ou ?theme=dark à l’adresse pour fixer les couleurs.
JSON
La fiche sous forme de données pour vos pages et vos outils : nom, accroche, commande d’installation, outils et liens « Add to ». N’importe quel site peut la lire (CORS ouvert).
https://mcp.tc/i/devcdp.jsonPrompt pour l’IA
Collez-le dans un assistant de code IA, comme Claude Code ou Cursor, et il ajoutera la carte de DevCDP à votre site.
Ajoute à mon site la carte mcp.tc de DevCDP, un serveur MCP. C’est un seul script statique : pas de build, aucun paquet à installer, aucun cookie.
Place cette balise là où la carte doit apparaître. La carte s’affiche juste avant elle :
```html
<script src="https://mcp.tc/w/devcdp.js" async></script>
```
Pour l’afficher ailleurs, mets ce conteneur à cet endroit et charge le même script une seule fois, par exemple avant `</body>`. Garde le lien à l’intérieur : les visiteurs sans JavaScript le voient.
```html
<div data-mcptc="devcdp"><a href="https://mcp.tc/i/devcdp">DevCDP on mcp.tc</a></div>
```
Options :
- `data-theme="light"` ou `"dark"` sur la balise ou le conteneur fixe les couleurs. Sans cela, la carte suit le mode clair ou sombre du visiteur.
- `data-size="compact"` donne une carte plus petite, sans l’accroche.
- La variable CSS `--mcptc-max-width` sur le conteneur ou un parent fixe la largeur (`520px` par défaut).
- `?lang=` dans l’URL du script choisit la langue de la carte : `en`, `it`, `fr`, `de` ou `es`.
Si le site a une Content Security Policy, autorise `script-src https://mcp.tc` et `img-src data:` (l’icône est intégrée).
Pour un README ou une autre doc en Markdown, utilise plutôt le badge :
```markdown
[](https://mcp.tc/i/devcdp)
```
Référence : https://mcp.tc/fr/embedHistorique des changements
Ce serveur tourne sur votre ordinateur, donc nous suivons son paquet npm : chaque nouvelle version apparaît ici, avec les modifications de son propriétaire.
FAQ
Puis-je coller mcp.tc/i/devcdp dans mon client MCP ?
Non. DevCDP tourne sur votre propre ordinateur, lancé par votre client, il n’a donc pas d’adresse web à laquelle se connecter. Le lien rapide est la page à partager ; la commande d’installation est npx -y devcdp.
DevCDP a-t-il besoin d’une clé API ?
Non. Il ne déclare ni clé ni variable d’environnement. Il s’exécute avec les droits de votre compte utilisateur, vérifiez donc ce que ses outils peuvent atteindre.
DevCDP est-il un serveur distant ou local ?
Local. Votre client le lance comme un processus sur votre ordinateur avec npx -y devcdp, qui nécessite Node.js.
Que peut faire DevCDP ?
Vous pouvez lire la sortie de la console du navigateur, inspecter l’activité réseau et inspecter le DOM.
Quels clients peuvent l’utiliser ?
Tout client qui lance des serveurs locaux : Claude Code, Claude Desktop, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed et d’autres. claude.ai et ChatGPT ne se connectent qu’à des serveurs distants.
mcp.tc suit-il les changements de DevCDP ?
En partie. Il tourne sur votre ordinateur, donc nous suivons son paquet npm : son onglet Historique montre chaque nouvelle version et les modifications de son propriétaire. Suivez la fiche pour recevoir un e-mail quand elle change.
Qui a rédigé cette page ?
Le robot de mcp.tc a lu les métadonnées publiques de DevCDP (ses pages de paquet et de dépôt), et un modèle d’IA en a tiré le texte. Une personne examine tout ce que les vérifications ne peuvent pas confirmer. Le texte peut encore contenir des erreurs : si vous en repérez une, utilisez Signaler cette fiche sur cette page. Cette traduction a été réalisée par un modèle d’IA à partir du texte anglais.
mcp.tc n’est pas affilié à Dayananda-D. Cette page a été construite à partir des métadonnées publiques de DevCDP, vérifiées pour la dernière fois le 5 oct. 2026, et un modèle d’IA a rédigé la description : elle peut contenir des erreurs. Les noms et marques appartiennent à leurs propriétaires. Quelque chose cloche ? Signaler cette fiche. La traduction a été réalisée par un modèle d’IA à partir du texte anglais.