DevCDP
MCP-Server von Dayananda-D
Webseiten über Chrome DevTools untersuchen und debuggen: Konsole, Netzwerk, DOM, Source Maps, Breakpoints und Live-Variablen.
DevCDP installieren
Läuft auf deinem Rechner. Dein Client startet ihn mit diesem Befehl:
Braucht Node.js auf deinem Rechner. Die Schritte unten zeigen, wo der Befehl in jedem Client hingehört.
DEVCDP_CHROME_PATHoptional Path to the Chrome executable, when it is not on the default install path.DEVCDP_LOG_LEVELoptional Server log verbosity on stderr: debug, info, warn or error.
Diesen Server teilen
Öffnet diese Seite mit dem Installationsbefehl und den Einrichtungsschritten.
mcp.tc/i/devcdpÜber den Server
DevCDP gibt einem KI-Assistenten Zugriff auf Chrome DevTools. Laut der Beschreibung in der Registry deckt er die Konsole, die Netzwerkaktivität, das DOM, Source Maps, Breakpoints und Live-Variablen ab, sodass der Assistent eine laufende Seite mit echten Browserdaten debuggen kann.
Er läuft lokal über stdio und wird mit npx aus dem npm-Paket devcdp gestartet. Ein API-Schlüssel ist nicht nötig. Chrome muss installiert sein. Liegt es nicht im Standardpfad, setze DEVCDP_CHROME_PATH. DEVCDP_LOG_LEVEL steuert die Ausführlichkeit der Logs auf stderr.
Was du damit machen kannst
- Ausgabe der Browserkonsole lesen
- Netzwerkaktivität untersuchen
- DOM untersuchen
- Source Maps nutzen
- Breakpoints setzen und Live-Variablen auslesen
Tools
Lokale Server zeigen ihre Tools erst, wenn sie laufen, und dieser veröffentlicht seine Liste nicht vorab. Dein Client zeigt sie, nachdem du ihn hinzugefügt hast.
Beispiel-Prompts
Prüfe die Browserkonsole dieser Seite auf Fehler.
Zeig mir die fehlgeschlagenen Netzwerkanfragen auf der Seite, die ich geöffnet habe.
Setze einen Breakpoint in meinem Checkout-Handler und zeig mir die Live-Variablen.
Untersuche das DOM des Login-Formulars und sag mir, warum der Button versteckt ist.
Einrichtung
Jeder Client startet DevCDP mit demselben Befehl auf deinem Rechner. Wähl deinen; die Seite merkt sich deine Wahl.
Claude Code
- Führe das in einem Terminal in deinem Projektordner aus:
claude mcp add --transport stdio devcdp -- npx -y devcdp- Starte Claude Code und tippe
/mcp. devcdp sollte als verbunden angezeigt werden.
Ergänze --scope user, damit er in jedem Projekt verfügbar ist.
Claude Desktop
- Öffne Settings → Developer → Edit Config. Das öffnet
claude_desktop_config.json. Füge hinzu:
{
"mcpServers": {
"devcdp": {
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}- Speichere die Datei und starte Claude Desktop neu.
Braucht Node.js auf deinem Rechner. Die Datei liegt unter macOS in ~/Library/Application Support/Claude/ und unter Windows in %APPDATA%\Claude\.
Cursor
Zu Cursor hinzufügen (öffnet in einem neuen Tab)
Oder trag ihn von Hand in ~/.cursor/mcp.json (alle Projekte) oder .cursor/mcp.json (dieses Projekt) ein:
{
"mcpServers": {
"devcdp": {
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}Braucht Node.js auf deinem Rechner.
VS Code
In VS Code installieren (öffnet in einem neuen Tab)
Oder aus einem Terminal:
code --add-mcp '{"name":"devcdp","type":"stdio","command":"npx","args":["-y","devcdp"]}'Oder committe ihn ins Repository in .vscode/mcp.json:
{
"servers": {
"devcdp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}Braucht Node.js auf deinem Rechner.
Devin Desktop
- Füge ihn zu
~/.config/devin/mcp_config.json(macOS und Linux) oder%APPDATA%\devin\mcp_config.json(Windows) hinzu:
{
"mcpServers": {
"devcdp": {
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}- Aktualisiere die Liste der MCP-Server in Cascade.
Devin Desktop ist der neue Name von Windsurf.
Codex
codex mcp add devcdp -- npx -y devcdpOder bearbeite ~/.codex/config.toml direkt:
[mcp_servers.devcdp]
command = "npx"
args = ["-y", "devcdp"]Braucht Node.js auf deinem Rechner.
Gemini CLI
gemini mcp add devcdp npx -- -y devcdpDamit fügst du ihn dem aktuellen Projekt hinzu. Ergänze -s user, um ihn überall zu nutzen.
Jeder Client
Die meisten Clients, die lokale Server starten, akzeptieren diese Form:
{
"mcpServers": {
"devcdp": {
"command": "npx",
"args": [
"-y",
"devcdp"
]
}
}
}Zed legt Server in seinen Einstellungen unter context_servers ab, mit denselben Feldern command, args und env.
Braucht Node.js auf deinem Rechner.
Einbinden
Zeig DevCDP in einem README oder auf deiner Website. Jede Einbindung verlinkt auf diese Seite, nutzt den Installationsbefehl des Servers und setzt keine Cookies. So funktionieren Einbindungen
Karte, iframe und JSON sind auf Englisch. Häng ?lang=it, fr, de oder es an ihre Adresse an, um eine andere Sprache zu bekommen.
README-Badge
[](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>Es folgt dem hellen oder dunklen Modus der Lesenden. Hänge ?theme=light oder ?theme=dark an, um ihn festzulegen, oder ?style=compact, um das Zeichen ohne Schriftzug zu zeigen.
Website-Karte
<script src="https://mcp.tc/w/devcdp.js" async></script>Die Karte erscheint dort, wo das Tag steht. Füge dem Tag data-theme="dark" oder data-size="compact" hinzu, um sie zu ändern. Die Datei enthält alles, was sie braucht, stellt also keine weiteren Anfragen und setzt keine Cookies.
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>Nutze es auf Seiten, die keine Skripte erlauben. Hänge ?theme=light oder ?theme=dark an die Adresse an, um die Farben festzulegen.
JSON
Der Eintrag als Daten für deine eigenen Seiten und Tools: Name, Kurzbeschreibung, Installationsbefehl, Tools und die „Add to“-Links. Jede Website kann ihn lesen (CORS ist offen).
https://mcp.tc/i/devcdp.jsonKI-Prompt
Füg ihn in einen KI-Coding-Assistenten wie Claude Code oder Cursor ein, und er baut die Karte von DevCDP in deine Website ein.
Füge meiner Website die mcp.tc-Karte für den MCP-Server DevCDP hinzu. Es ist ein einziges statisches Skript: kein Build-Schritt, kein Paket zu installieren, keine Cookies.
Setz dieses Tag dorthin, wo die Karte erscheinen soll. Die Karte erscheint direkt davor:
```html
<script src="https://mcp.tc/w/devcdp.js" async></script>
```
Um sie woanders zu zeigen, setz dort diesen Platzhalter ein und lade dasselbe Skript nur einmal, zum Beispiel vor `</body>`. Lass den Link darin stehen: Besucher ohne JavaScript sehen ihn.
```html
<div data-mcptc="devcdp"><a href="https://mcp.tc/i/devcdp">DevCDP on mcp.tc</a></div>
```
Optionen:
- `data-theme="light"` oder `"dark"` am Tag oder Platzhalter legt die Farben fest. Ohne das Attribut folgt die Karte dem hellen oder dunklen Modus der Besucher.
- `data-size="compact"` ergibt eine kleinere Karte ohne Kurzbeschreibung.
- Die CSS-Variable `--mcptc-max-width` am Platzhalter oder einem Elternelement legt die Breite fest (Standard `520px`).
- `?lang=` in der Skript-URL legt die Sprache der Karte fest: `en`, `it`, `fr`, `de` oder `es`.
Wenn die Website eine Content Security Policy hat, erlaube `script-src https://mcp.tc` und `img-src data:` (das Icon ist eingebettet).
Für ein README oder andere Markdown-Dokumentation nimm stattdessen das Badge:
```markdown
[](https://mcp.tc/i/devcdp)
```
Referenz: https://mcp.tc/de/embedÄnderungsverlauf
Dieser Server läuft auf deinem Computer, deshalb verfolgen wir sein npm-Paket: Jede neue Version erscheint hier, dazu Änderungen seines Betreibers.
Häufige Fragen
Kann ich mcp.tc/i/devcdp in meinen MCP-Client einfügen?
Nein. DevCDP läuft auf deinem eigenen Rechner und wird von deinem Client gestartet, hat also keine Webadresse, mit der man sich verbinden könnte. Der Quick-Link ist die Seite zum Teilen; der Installationsbefehl lautet npx -y devcdp.
Braucht DevCDP einen API-Schlüssel?
Nein. Er gibt keine Schlüssel oder Umgebungsvariablen an. Er läuft mit den Rechten deines Benutzerkontos, prüfe also, worauf seine Tools zugreifen können.
Ist DevCDP ein Remote- oder ein lokaler Server?
Lokal. Dein Client startet ihn mit npx -y devcdp als Prozess auf deinem Rechner; dafür brauchst du Node.js.
Was kann DevCDP?
Du kannst damit Ausgabe der Browserkonsole lesen, Netzwerkaktivität untersuchen und DOM untersuchen.
Welche Clients können ihn nutzen?
Jeder Client, der lokale Server startet: Claude Code, Claude Desktop, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed und andere. claude.ai und ChatGPT verbinden sich nur mit Remote-Servern.
Verfolgt mcp.tc Änderungen an DevCDP?
Teilweise. Er läuft auf deinem Computer, deshalb verfolgen wir sein npm-Paket: Sein Tab Verlauf zeigt jede neue Version und Änderungen seines Betreibers. Folge dem Eintrag, um eine E-Mail zu bekommen, wenn er sich ändert.
Wer hat diese Seite geschrieben?
Der Roboter von mcp.tc hat die öffentlichen Metadaten von DevCDP (seine Paket- und Repository-Seiten) gelesen, und ein KI-Modell hat daraus den Text entworfen. Ein Mensch prüft alles, was die Prüfungen nicht bestätigen können. Der Text kann trotzdem falsch sein; wenn dir ein Fehler auffällt, nutze Eintrag melden auf dieser Seite. Diese Übersetzung hat ein KI-Modell aus dem englischen Text erstellt.
mcp.tc steht in keiner Verbindung zu Dayananda-D. Diese Seite entstand aus den öffentlichen Metadaten von DevCDP, zuletzt geprüft am 5. Okt. 2026, und ein KI-Modell hat die Beschreibung geschrieben, sie kann also Fehler enthalten. Namen und Marken gehören ihren Inhabern. Stimmt etwas nicht? Eintrag melden. Die Übersetzung hat ein KI-Modell aus dem englischen Text erstellt.