Chrome DevTools MCP

• Der Chrome DevTools MCP-Server wurde verbessert, damit Coding-Agenten direkt eine Verbindung zu einer aktiven Browser-Sitzung herstellen können
• Dadurch können Agenten angemeldete Sitzungen wiederverwenden oder auf die aktive Debugging-Sitzung von DevTools zugreifen
• In Chrome M144 (Beta) verbindet sich der MCP-Server mit der Option --autoConnect automatisch mit einer laufenden Chrome-Instanz
• Bei jeder Verbindung wird ein Dialog zur Benutzerbestätigung angezeigt; während des Debuggings erscheint der Banner „automated test software“
• Da sich manuelles Debugging und KI-gestütztes Debugging flexibel wechseln lassen, steigt die Entwicklungseffizienz

---

Überblick über die Verbesserungen am Chrome DevTools MCP-Server

• Der Chrome DevTools MCP-Server wurde aktualisiert, damit Coding-Agenten direkt eine Verbindung zu aktiven Browser-Sitzungen herstellen können
  • Nutzer können angemeldete Sitzungen wiederverwenden und so ohne zusätzliche Anmeldung debuggen
  • Agenten können gebeten werden, Elemente zu untersuchen, die in der Network-Ansicht oder Elements-Ansicht der DevTools-Oberfläche ausgewählt wurden
• Auch die bisherigen Verbindungswege bleiben erhalten: Nutzung eines dedizierten Profils für den MCP-Server, Verbindung über einen Remote-Debug-Port und Ausführung mehrerer Instanzen mit temporären Profilen

Funktionsweise (How it works)

• In Chrome M144 (derzeit Beta) wurde eine Anfragefunktion für Remote-Debugging-Verbindungen hinzugefügt
  • Wenn der MCP-Server mit der Option --autoConnect gestartet wird, verbindet er sich automatisch mit der aktiven Chrome-Instanz und fordert eine Remote-Debugging-Sitzung an
• Zur Erhöhung der Sicherheit zeigt Chrome bei jeder Anfrage einen Dialog zur Benutzerbestätigung an und erlaubt die Verbindung erst nach Zustimmung
• Sobald die Debugging-Sitzung aktiv ist, erscheint oben im Browser der Banner „Chrome is being controlled by automated test software“

Erste Schritte (Get started)

• Um die neue Remote-Debugging-Funktion zu nutzen, muss in Chrome Remote-Debugging aktiviert und der MCP-Server eingerichtet werden

Schritt 1: Remote-Debugging in Chrome einrichten

• Zu chrome://inspect/#remote-debugging wechseln und Remote-Debugging aktivieren
• Im Dialog auswählen, ob die Debugging-Verbindung erlaubt werden soll

Schritt 2: Automatische Verbindung des MCP-Servers einrichten

• Beim Start des Servers chrome-devtools-mcp das Argument --autoConnect hinzufügen
• Beispielkonfiguration (gemini-cli):

  {
     "mcpServers": {
      "chrome-devtools": {
        "command": "npx",
        "args": [
          "chrome-devtools-mcp@latest",
          "--autoConnect",
          "--channel=beta"
        ]
      }
    }
  }
  

  • Bis Chrome M144 den Stable-Channel erreicht, muss --channel=beta angegeben werden

Schritt 3: Konfiguration testen

• In gemini-cli den folgenden Befehl ausführen:

  Check the performance of https://developers.chrome.com
  

• Chrome zeigt einen Dialog an, in dem der Nutzer gefragt wird, ob eine Remote-Debugging-Sitzung erlaubt werden soll
• Nach einem Klick auf Allow öffnet der MCP-Server die Website und führt ein Performance-Tracking durch

Integriertes Debugging mit Coding-Agenten

• Durch die Verbindung mit einer aktiven Chrome-Instanz lassen sich Automatisierung und manuelle Steuerung parallel nutzen
  • Nutzer können in DevTools problematische Elemente finden und diese an einen Coding-Agenten übergeben, um eine Korrektur anzufordern
  • Dasselbe ist im Network-Bereich möglich, indem eine Anfrage ausgewählt und der Agent mit der Analyse beauftragt wird
• Über den Chrome DevTools MCP-Server soll der Zugriff auf Daten aus zusätzlichen Panels schrittweise erweitert werden

[GN⁺]

Hacker-News-Kommentare

• Ich fange mit Playwright alle Requests und Responses ab und zeichne den relevanten Traffic auf, während Claude Code Websites wie YouTube durchsucht sowie Klicks und Eingaben ausführt
  Auf Basis der so gesammelten Daten generiere ich automatisch eine stark typisierte API, damit sich jede Website über ihre interne API ansprechen lässt
  Wahrscheinlich verstößt das natürlich gegen die Nutzungsbedingungen, aber der Vorteil ist, dass man nicht alle Anzeigen, Bilder und das komplette Markup laden muss
  Wenn Interesse besteht, will ich das diese Woche veröffentlichen

  • Interessant, dass HN diese Idee gut findet
    Tatsächlich ist das genau die Art, wie LLM-Hersteller wie Anthropic oder OpenAI schon seit Langem arbeiten
    Wenn sie Werbung umgehen oder urheberrechtlich geschützte Inhalte herunterladen, ist es ein „Geschenk Gottes“, aber wenn Zuck dasselbe tut, ist es plötzlich ein „Fluch des Teufels“
  • Ich nutze etwas Ähnliches ebenfalls
    Hauptsächlich, um das Seitenlayout und Styling an bestimmten Punkten im DOM-Baum nachzubilden oder responsives Verhalten automatisch zu erfassen
    Mit Playwright passe ich die Bildschirmbreite an, verfolge Stiländerungen und speichere Screenshots und Daten der Stil-Hierarchie zusammen
    Es gibt zwar manuelle Inspektionswerkzeuge, aber die sind zu langsam und ineffizient
    Ich persönlich halte es für deutlich effizienter, statt MCP direkt eine eigene CLI zu bauen
    Dass die KI direkt zugreifen und das Ganze über „Skills“ nutzen kann, ist der eigentliche Power-Move
  • Ich frage mich, warum man dafür unbedingt Playwright braucht
    Claude sollte doch mit agent-browser allein sofort deterministischen Code erzeugen können
  • Hoffentlich veröffentlichst du das wirklich. Ich frage mich, ob du das als Agent-Skill gebaut hast
  • Ich frage mich, ob man mit diesem Ansatz YouTube-Videos direkt herunterladen kann, ohne sie wie bei yt-dlp ständig aktuell halten zu müssen

• Das DevTools-MCP-Projekt hat vor Kurzem eine eigenständige CLI veröffentlicht
  In der Doku zu chrome-devtools-cli steht, dass sie in Version v0.20.0 enthalten ist
  Für Leute, die sich wegen der Token-Kostenprobleme von MCP Gedanken gemacht haben, sind das gute Nachrichten
  (Zur Einordnung: Ich habe im DevTools-Team gearbeitet und arbeite dort immer noch)

  • Dank Tool Search kostet MCP in CC jetzt nichts mehr

• Ich verwende seit einigen Monaten TideWave
  tidewave.ai basierte ursprünglich auf Elixir/LiveView, unterstützt inzwischen aber auch JS-Frameworks und RoR
  Dieses Tool kann nicht nur den Browser bedienen, sondern hat auch Zugriff auf die Laufzeitumgebung der App
  Das heißt, ein Agent kann direkt auf Datenbanken und Endpunkte zugreifen, was extrem mächtig ist

• Google hängt bei agentischer CLI-Entwicklung weit zurück
  Gemini CLI ist so schlecht, dass sie intern offensichtlich nicht einmal selbst benutzt wird
  MCP ist meiner Meinung nach bereits eine tote Technologie. CLI-Tools sind schneller, flexibler und es gibt bereits viele trainierte Umgebungen dafür
  Für ernsthafte Entwickler sind Playwright und headless Chromium der Standard
  MCP ist nur für Einsteiger attraktiv

  • Ich arbeite in einem großen Enterprise-Umfeld, und wegen Authentifizierung, RBAC, Rate Limits und operativem Management ist MCP weiterhin nützlich
    Nur mit einer CLI werden Sicherheit und Betriebsaufwand viel zu komplex
    Dass Gemini CLI schlecht ist, sehe ich allerdings genauso
  • Ich stimme der Aussage „MCP ist tot“ zu
    Anthropic hat zwar versucht, es zu verbessern, aber das Problem des aufgeblähten Kontexts bleibt bestehen
    MCP-Server belegen Kontext, selbst wenn sie gar nicht verwendet werden
    Jetzt sollte man auf Agent-Skills umsteigen
  • Zur Info: Gemini CLI wird intern bei Google tatsächlich viel genutzt
    Für Code-Suche, Dokumentenzugriff, Bug-Abfragen und die Verbindung zu RAG-Datenbanken werden MCP-Dienste verwendet
    (Das habe ich direkt von Leuten innerhalb von Google gehört)
  • Wenn MCP tot ist: Mit welcher CLI soll man dann Chrome öffnen, Buttons klicken und Konsolenausgaben lesen?
    Und falls MCP Kontext verbraucht, sind CLI-Skills dann kostenlos?

• Es gibt bereits einen Agent-Skill, der das umsetzt
  Ich nutze chrome-cdp-skill täglich, und das Ding ist wirklich großartig
  Ich konnte damit zum Beispiel mit codex meine lokale Musikbibliothek verwalten, einen YT-Music-Tab öffnen, nach Alben suchen und die URL an yt-dlp weiterreichen
  Im Moment funktioniert es aber nur mit Chrome; für andere Browser muss man den Binärpfad anpassen

  • Tolle Demo, aber ich finde es beängstigend, dass schon ein einziger Prompt-Injection-Angriff Zugriff auf alle Daten ermöglichen könnte
  • Das ist kein Skill für DevTools MCP, sondern ein eigenständiges Projekt
    Der Bereich Browser-Automatisierung + Agenten ist bereits stark umkämpft
    DevTools MCP und die neue CLI werden vom Chrome-DevTools-&-Puppeteer-Team gepflegt und wirken deshalb stabiler
    Trotzdem ist es gut zu sehen, wie Open-Source-Wettbewerb Innovation schafft
  • Ich frage mich, ob irgendjemand solche Bastellösungen im Alltag wirklich benutzt
    Ich würde eher ein stabiles Tool wie playwriter.dev verwenden

• Ich habe einen WebSocket-Proxy + eine Chrome-Erweiterung gebaut, damit Agenten das DOM steuern können
  Über browserbox habe ich es so eingerichtet, dass der Zugriff mit erlaubten Session-Cookies erfolgt
  Derzeit nutze ich das als Middleware für Forschungszwecke, um die Erfolgsquote bei der Verwendung von Agenten-Tools zu verbessern

• Ich nutze dieses MCP schon ziemlich lange, und am stabilsten war es zusammen mit codex on opencode
  Besonders beeindruckt hat es mich als SVG-Editing-REPL, als es automatisch coole benutzerdefinierte Icons erzeugt hat
  Auch für Reverse Engineering oder Erweiterungsarbeiten in Electron-Apps eignet es sich gut

• Ich habe playwriter ausprobiert, und die Verbindung zu einer bestehenden Sitzung hat erstaunlich gut funktioniert

• Ich habe etwas Ähnliches ebenfalls mit Playwright gebaut
  Früher war der Token-Verbrauch so hoch, dass es teuer wurde, aber ich habe das gelöst, indem ich einen Wrapper gebaut habe, der die Ergebnisse auf die Festplatte schreibt und vom Agenten abfragen lässt
  Das kann man sich auf uisnap.dev ansehen
  Ich frage mich, ob dieses Projekt das Problem des hohen Token-Verbrauchs gelöst hat

  • Scheint größtenteils gelöst zu sein. Siehe dazu playwright-cli
  • Ich nutze einen Wrapper-MCP-Server, der mit Claude Haiku Seitensnapshots zusammenfasst
    Zu finden unter playwright-slim-mcp

• Ich habe firefox-devtools-mcp ausprobiert, und es war viel schneller und effizienter als das standardmäßige Chrome-MCP