00:00:00Das Chrome-Team hat endlich ein Update veröffentlicht, mit dem der Chrome DevTools MCP-Server
00:00:06mit einer laufenden Chrome-Instanz kommunizieren kann, um Dinge wie das Debuggen hinter einer Login-Seite zu ermöglichen,
00:00:12Analysen in einer Live-Sitzung durchzuführen und sogar coole Debugging-Funktionen zu nutzen, wie den Zugriff auf
00:00:17ein ausgewähltes Element, spezifische Fehler und sogar Netzwerkaktivitäten.
00:00:21Aber angesichts anderer KI-Browser-Debugging-Tools wie Agent Browser und Playwright, die ein CLI
00:00:26mit Skills sowie einen MCP-Server bieten – ist das etwas, das der Chrome DevTools MCP
00:00:31in Zukunft noch hinzufügen muss?
00:00:33Abonniert den Kanal und finden wir es heraus.
00:00:35Vor ein paar Monaten hat Anjis ein Video erstellt, das einen tollen Überblick über den Chrome DevTools MCP-Server
00:00:44gab. Damals konnte er jedoch nur eine neue Chrome-Sitzung starten oder man konnte ihn
00:00:49mit einem Remote-Debugging-Port verbinden, was allerdings viel manuelle Einrichtung erforderte.
00:00:53Aber jetzt, ab Chrome-Version 144 und höher, erkennt das Chrome MCP-Tool bei aktiviertem Remote-Debugging-Flag
00:00:58automatisch eine offene Sitzung, die zum Debuggen verwendet werden kann. Das ist für mich persönlich ein Gamechanger,
00:01:04da ich lieber Claude Code im Terminal verwende. Das bedeutet,
00:01:09dass ich keine KI-Browser wie Deer oder Comet, die Claude Chrome-Extension
00:01:15oder nützliche KI-Debugging-Tools wie React Grab mehr benötige.
00:01:18Schauen wir uns diese neuen Chrome DevTools MCP-Funktionen in Aktion an.
00:01:22Zuerst müsst ihr den MCP-Server installiert haben, wobei die Auto-Connect-Option verfügbar sein muss.
00:01:27Ich verwende Open Code, aber dies unterstützt viele Agent-Umgebungen. In Chrome müsst ihr
00:01:31zu dieser URL navigieren und sicherstellen, dass diese Option aktiviert ist.
00:01:36Früher musste man eine Sitzung mit einem Befehl wie diesem starten, und der Agent
00:01:40verbindet sich dann über HTTP mit dem freigegebenen Port.
00:01:43Aber mit der neuen Methode in dieser UI könnt ihr Chrome ganz normal starten, mit Zugriff
00:01:48auf all eure Cookies, den Verlauf und alles andere, und es einfach ausschalten, wenn ihr fertig seid.
00:01:53Falls ihr sicherheitsbewusst seid: Später im Video zeige ich euch noch,
00:01:57wie ihr euch mit einer privateren Version von Chrome verbindet.
00:01:59Nachdem ihr diese zwei Dinge erledigt habt – also die Option aktiviert und die Verbindung zum
00:02:04MCP-Server mit der Auto-Connect-Option hergestellt habt – sollte es das gewesen sein.
00:02:08Ich kann meinen Agenten bitten, die Performance von Betastack zu prüfen, und in Chrome erhalte ich
00:02:12dieses Pop-up mit der Frage, ob ich Remote-Debugging zulassen möchte, und sehe dann oben diesen Banner.
00:02:17Der Agent konnte nun zur Betastack-Website navigieren und nutzt jetzt
00:02:21das Lighthouse-Audit-Tool, um mir Web Vitals, Lighthouse-Scores und andere Details anzuzeigen.
00:02:27Aber jetzt machen wir mal etwas wirklich Nützliches.
00:02:29Hier ist eine Sprachlern-App, an der ich gerade arbeite.
00:02:31Ich bin als Admin eingeloggt, zum Inhalt, einer bestimmten Einheit und dann zu dieser Übung navigiert.
00:02:37Mir ist aufgefallen, dass der Speichern-Button hier unten im Übungs-Modal
00:02:42anders aussieht als die anderen Buttons auf der Website.
00:02:44Anstatt dem Agenten mühsam zu sagen, er solle meine Schritte wiederholen – also einloggen und
00:02:49zu dieser spezifischen Seite navigieren –, wähle ich diesen Speichern-Button in den Inspect-Tools aus
00:02:55und frage den Agenten, ob er das von mir ausgewählte Element sehen kann.
00:02:58Nach einem Moment erkennt er, dass ich den Speichern-Button ausgewählt habe.
00:03:02Nun bitte ich ihn, den Stil des Speichern-Buttons so zu ändern, dass er wie der neue Übungs-Button
00:03:06aussieht – das ist dieser Button hier drüben, falls ihr ihn sehen könnt.
00:03:09Nach ein paar Sekunden hat er den Stil des Buttons genau so angepasst, wie ich es wollte.
00:03:13Falls ihr den MCP-Server in einer Sandbox-Umgebung ausführt, müsst ihr die Browser-URL-Option
00:03:18mit dem Port für Remote-Debugging als HTTP verwenden, nicht WebSockets.
00:03:23Wenn ihr sicherheitsbewusst seid, müsst ihr dem MCP-Server das User-Data-Verzeichnis
00:03:28mit einem spezifischen Pfad als Option hinzufügen. So haben die Agenten keinen Zugriff auf
00:03:33eure vorhandenen Cookies, Passwörter, den Browserverlauf und vieles mehr.
00:03:36Ihr müsstet euch dann auf diesen Seiten neu anmelden, wenn der Agent darauf zugreifen soll.
00:03:41So cool das auch ist: Wenn ihr meine früheren Videos gesehen habt, wisst ihr, dass ich nicht
00:03:46der größte Fan von MCP-Servern bin, da sie viel Kontext verbrauchen, wenn man
00:03:51viele davon gleichzeitig nutzt.
00:03:52Glücklicherweise erlaubt der Chrome DevTools MCP-Server aber auch alles über ein CLI zu erledigen.
00:03:59Das wissen nicht viele, weil es etwas versteckt ist. Man muss in das Skills-Verzeichnis
00:04:04und dann zu Chrome DevTools CLI gehen, um dieses experimentelle Feature zu finden,
00:04:10das dem Agenten Informationen zur Nutzung bereitstellt.
00:04:12Dort findet man auch Installationsanweisungen, falls man es noch nicht installiert hat.
00:04:16Im Grunde ist es ein schlanker Wrapper um den MCP-Server.
00:04:20Wenn ihr ihn bereits in einer Agent-Umgebung laufen habt, wird dieses CLI das nicht nutzen,
00:04:24da es einen eigenen Daemon verwendet.
00:04:26Dieser Befehl liefert Infos über den Standard-Daemon. Man sieht bereits,
00:04:30dass er das Browser-URL-Flag sowie Flags wie "headless" und "isolated" gesetzt hat.
00:04:34Euch wird aber auch auffallen, dass es in den verfügbaren CLI-Optionen kein Auto-Connect gibt.
00:04:39Wenn ihr Chrome also nicht über das Terminal gestartet habt, müsstet ihr das bestehende beenden
00:04:43und es so ausführen, wobei ihr bei Verwendung des Remote-Debugging-Port-Flags
00:04:48unbedingt auch das User-Data-Flag setzen müsst.
00:04:50Damit kann ich den Daemon nun so starten und die Liste der Seiten abrufen, die aktuell
00:04:54nur einen neuen Tab zeigt, da noch nicht viel passiert ist.
00:04:57Die wahre Stärke zeigt sich natürlich erst im Zusammenspiel mit einem Agenten.
00:05:01Wenn ich also das Chrome MCP-Tool ausschalte, diesen Button in den DevTools auswähle und den Agenten bitte,
00:05:06per CLI herauszufinden, welches Element ausgewählt ist, sehen wir, dass er das schafft.
00:05:10–
00:05:11Beachtet, dass die Informationen im User-Data-Verzeichnis zwischen den Sitzungen erhalten bleiben.
00:05:15Das speichert also all meine Cookies, Browser-Infos und so weiter.
00:05:19Außerdem kann das Chrome DevTools CLI noch viel mehr.
00:05:22Ich empfehle euch daher, euch den Skill mal anzusehen. Vielleicht führen sie
00:05:26in Zukunft ja auch die Auto-Connect-Funktion ein.
00:05:28Das war also ein kurzer Durchlauf einiger neuer cooler Funktionen des Chrome
00:05:32DevTools MCP-Servers und des CLI, die euer Debugging-Erlebnis mit Coding-Assistenten
00:05:38definitiv verbessern werden.
00:05:39Als Arc-Nutzer – ja, ich nutze Arc immer noch – wünsche ich mir sehr, dass dieses Feature bald dorthin kommt.
00:05:45Bis dahin nutze ich gerne den Agent Browser von Vassal, der für mich
00:05:50wirklich gut funktioniert.
00:05:51Falls ihr Agent Browser noch nicht kennt, schaut euch mein Video dazu an, auch wenn
00:05:55es sich seitdem stark verbessert hat.
00:05:58Vielleicht ist es also an der Zeit, dass ich ein neues Video dazu mache.