Wiederholbare Browser-Workflows mit der Chrome-Entwicklertools-Befehlszeile automatisieren

José Luis Zapata
Matthias Rohmer

Die Chrome-Entwicklertools für KI-Agenten enthalten eine Befehlszeile, mit der Ihr Coding-Agent oder Sie DevTools-Tools als Standard-Shell-Befehle ausführen können. Anstatt Tools dynamisch über den MCP-Server aufzurufen, schreibt Ihr Agent dieselben Aktionen als Shell-Befehle und kann sie in einem Skript verketten, das Sie jederzeit wieder ausführen können. Ihr Agent könnte beispielsweise ein Skript wie dieses generieren:

chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"

Sowohl der MCP-Server als auch die Befehlszeile stellen eine Verbindung zur selben Engine her: einem persistenten Hintergrund-Daemon, der über das Chrome-Entwicklertools-Protokoll (CDP) mit Chrome kommuniziert. Der Unterschied besteht darin, wie Ihr Agent diese Engine erreicht:

  • MCP-Server: Ihr Agent stellt über die Standardeingabe/-ausgabe eine Verbindung her, verwendet JSON-RPC und behandelt jedes Browser-Tool als interaktiven Funktionsaufruf.
  • CLI: Ihr Agent führt Shell-Befehle direkt für denselben Hintergrund-Daemon aus.

Mit der Befehlszeile können Sie Folgendes tun:

  • Workflow persistent speichern: Wandeln Sie die Aktionen, die Ihr Agent während einer explorativen Debugging-Sitzung ausgeführt hat, in ein wiederverwendbares Skript um.
  • Anwendungsstatus reproduzieren: Führen Sie ein Skript noch einmal aus, um den Browser in einen bekannten Zustand zu versetzen, bevor Sie das Debugging wiederholen.
  • Batchaktionen: Führen Sie eine Sequenz von Navigations-, Eingabe-, Emulations- und Prüfbefehlen aus, ohne dass zwischen den einzelnen Schritten ein Gespräch stattfindet.
  • Skripts ohne KI-Agent ausführen: Sie können die generierten Skripts von jedem Terminal, jeder Subshell oder jedem CI-Container ausführen, der Shell-Skripts ausführen kann, ohne dass eine aktive LLM-Sitzung oder ein MCP-Client erforderlich ist.

Zwischen der Befehlszeile und dem MCP-Server wählen

Die Entscheidung zwischen der Befehlszeile und dem MCP-Server ist eine technische Entscheidung, bei der Kosten, Kontext und Workflow berücksichtigt werden müssen.

  • Kosten für das Kontextfenster: Wenn Sie den MCP-Server registrieren, werden alle Tooldefinitionen und JSON-Schemas in jedem Gespräch in den System-Prompt Ihres LLM eingefügt. Mit dem CLI-Skill lädt Ihr Agent nur eine kompakte Markdown-Zusammenfassung und zahlt die Tokenkosten, wenn er sich entscheidet, den vollständigen Skill zu lesen und die erforderlichen Befehle zu erstellen. Bei langen KI-Agenten-Sitzungen mit mehreren Interaktionen summieren sich diese Unterschiede sowohl bei den Kosten als auch bei der Latenz.
  • Exploration im Vergleich zur Ausführung: MCP-Tools eignen sich hervorragend für dynamisches, exploratives Debugging, wenn weder Sie noch Ihr Agent wissen, was Sie prüfen müssen. Da Ihr Agent alle verfügbaren Tools im Voraus kennt, ist es wahrscheinlicher, dass er sie verwendet, um sein Ziel zu erreichen. Wenn der Pfad bereits bekannt ist, können Sie mit der Befehlszeile nur die erforderlichen Schritte ausführen.
  • Wiederverwendbarkeit: Sie können ein CLI-Skript speichern, in einem Skill wiederverwenden oder manuell außerhalb einer Agentenschleife ausführen. Das ist mit MCP-Toolaufrufen nicht möglich.
Verwenden Sie den MCP-Server, wenn Verwenden Sie die Befehlszeile, wenn
Sie untersuchen ein unbekanntes Problem und benötigen die gesamte Toolbox. Sie kennen die Schritte bereits und möchten sie zuverlässig wiederholen.
Sie möchten Probleme live und dynamisch lösen und den Browser genau analysieren. Sie möchten token-effiziente Agenten-Skills oder terminalbasierte Automatisierung.
Ihr Agent wird in einer IDE oder einem Client mit MCP-Unterstützung ausgeführt. Ihre Umgebung unterstützt keine MCP-Clients.

Beachten Sie bei Verwendung der Befehlszeile Folgendes:

  • Tool-Abdeckung: Die Befehlszeile unterstützt die meisten Chrome-Entwicklertools für KI-Agenten für die Shell-basierte Automatisierung. Eine vollständige Liste der Befehle finden Sie in der Referenz zu CLI-Skills.
  • Impliziter Start: Der Hintergrundserver wird bei der ersten Verwendung automatisch gestartet. Sie müssen start, status oder stop nicht vor jedem Befehl ausführen.
  • Persistenter Zustand: Der Browserzustand bleibt über Befehle hinweg erhalten. Eine Seite, die Sie in einem Befehl öffnen, ist also im nächsten Befehl weiterhin verfügbar, sofern sie nicht explizit geschlossen wird.
  • Seiten-IDs und Element-UIDs: Die meisten Befehle verwenden eine Seiten-ID als erstes Argument. Führen Sie chrome-devtools list_pages aus, um sie zu finden, und chrome-devtools take_snapshot, um die UIDs der Elemente abzurufen, mit denen Sie interagieren möchten.
  • Ausgabeformat: Die Ausgabe erfolgt standardmäßig als einfacher Markdown-ähnlicher Text. Übergeben Sie --output-format=json, wenn Sie die Ergebnisse in anderen Skripts oder CI-Pipelines verwenden möchten.
  • Dateizugriff: Standardmäßig hat die Befehlszeile vollen Zugriff auf das Dateisystem für Parameter zum Speichern von Dateien und upload_file. Übergeben Sie --allowUnrestrictedPaths=false, um den Dateizugriff auf das temporäre Verzeichnis des Betriebssystems zu beschränken.
  • Lighthouse in CI: Sie können lighthouse_audit über die Befehlszeile ausführen. Die eigenständige Lighthouse-Befehlszeile und die zugehörigen GitHub-Aktionen sind jedoch eine einfachere Lösung, wenn Sie nur Lighthouse-Werte in CI benötigen.
  • Einfachere Abstraktion als Skripts zur Browserautomatisierung: Im Gegensatz zum Schreiben vollständiger Puppeteer- oder Playwright-Skripts in JavaScript oder TypeScript bietet die DevTools-Befehlszeile eine begrenzte, hochgradig zielgerichtete API-Oberfläche. Diese Shell-Syntax ist für Menschen leichter zu lesen und zu pflegen und für Modelle, selbst für solche mit geringer Leistung, wesentlich einfacher zuverlässig und ohne Halluzinationen zu generieren.

Vorbereitung

Bevor Sie die Befehlszeile verwenden, benötigen Sie Folgendes:

  • Chrome-Entwicklertools für KI-Agenten installiert: Folgen Sie dem Startleitfaden. Agentenspezifische Plug-ins und Erweiterungen (z. B. die Gemini CLI-Erweiterung) enthalten die agentischen Fähigkeiten zusammen mit dem MCP-Server.
  • Die in Ihrer Shell verfügbare Befehlszeile: Die Installation ist ein einmaliger Schritt und nicht Teil des regulären Agenten-Workflows. Weitere Informationen finden Sie in der Installationsreferenz.
  • Der Skill chrome-devtools-cli (installiert mit den Chrome-Entwicklertools für KI-Agenten): Dieser Skill zeigt Ihrem Agenten, wie er Shell-Skripts schreibt oder Shell-Befehle mit der Befehlszeile ausführt.

Befehlsstruktur

Befehle folgen dem Muster chrome-devtools <tool> [arguments] [flags]. Erforderliche Argumente sind Positionsargumente und optionale Argumente verwenden Flags. Verwenden Sie --help für einen beliebigen Befehl, um Details aufzurufen.

Beispiel:

chrome-devtools new_page "https://example.com"      # Open a page
chrome-devtools list_pages                          # Find the page ID
chrome-devtools take_snapshot 1                     # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello"                # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"

Anwendungsfälle für die Chrome-Entwicklertools-Befehlszeile

Weisen Sie Ihren KI-Agenten an, die bereits ermittelten Schritte als Skript zu erfassen, anstatt denselben Browserablauf in jeder Sitzung neu zu lösen.

Debugging-Sitzung als wiederverwendbares Skript speichern

Nach einer explorativen Debugging-Sitzung über MCP können Sie oft nicht garantieren, dass dasselbe Problem nicht noch einmal auftritt. Anstatt die Schritte zur Reproduktion beim nächsten Mal noch einmal zu erklären, bitten Sie Ihren Agenten, den gerade ausgeführten Ablauf aufzuschreiben.

Beispielprompt:

Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.

Beispiel für die Ausführung des KI-Agenten: Ihr KI-Agent überprüft die Navigations-, Eingabe- und Prüfschritte, die er während der Sitzung ausgeführt hat, und übersetzt sie in eine Abfolge von chrome-devtools-Befehlen, z. B. new_page, take_snapshot, fill, click und list_console_messages. Das Script wird als test.sh gespeichert. Wenn Sie diesen Bereich das nächste Mal debuggen, können Sie Ihren Agenten auf das Skript verweisen, um denselben Zustand wieder zu erreichen, oder es außerhalb einer Agentenschleife ausführen, um es manuell zu debuggen.

Anwendungsstatus vor der Untersuchung reproduzieren

Komplexe Zustände wie ein mehrstufiger Bezahlvorgang oder ein gefiltertes Dashboard sind für einen Agenten aufwendig, wenn er sie jedes Mal neu erstellen muss. Verwenden Sie ein gespeichertes Skript als Ausgangspunkt für eine neue Prüfung.

Beispielprompt:

Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.

Beispiel für die Ausführung durch den Agenten: Ihr Agent führt das Skript aus, das zur Kasse navigiert, das Adressformular ausfüllt und eine Versandoption auswählt. Da der Browserstatus über Befehle hinweg beibehalten wird, verwendet Ihr Agent dann take_snapshot und evaluate_script auf derselben Seite, um den Status des Buttons und die Event-Handler zu prüfen, die an die Zahlungsauswahl angehängt sind.

Visuelle Batch-Prüfungen über Darstellungsbereiche hinweg

Das Prüfen einer Layoutänderung auf mehreren Bildschirmgrößen ist eine sich wiederholende Aufgabe, die normalerweise manuell ausgeführt wird. Bitten Sie Ihren Agenten um ein Skript, das Emulationseinstellungen anwendet und für jede Einstellung in einem einzigen Durchlauf Nachweise erfasst.

Beispielprompt:

Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.

Beispiel für die Ausführung durch den Agenten: Ihr Agent schreibt eine Schleife, die für jeden Darstellungsbereich chrome-devtools emulate 1 --viewport "<size>" und dann chrome-devtools take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" aufruft. Sie können das Script nach jeder CSS-Änderung noch einmal ausführen, ohne eine Unterhaltung zu öffnen.

Smoke-Test für einen Ablauf, bei dem kein MCP-Client verfügbar ist

Einige Umgebungen, z. B. CI-Container oder gesperrte Unternehmensumgebungen, unterstützen keine MCP-Clients. Praktisch jedes Terminal, jede Subshell, jeder CI-Container und jedes Agent-Framework unterstützt das Ausführen von Standard-Shell-Skripts und das Lesen von stdout. Daher eignet sich die Befehlszeile für einfache Prüfungen an diesen Stellen.

Beispielprompt:

Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.

Beispiel für die Ausführung eines KI-Agenten: Ihr KI-Agent schreibt ein Skript, das new_page, take_snapshot, fill und click verwendet, ruft dann list_console_messages 1 --types error --output-format=json auf und parst die JSON-Ausgabe, um den Exit-Code zu bestimmen.

Workflow als schlanke Fähigkeit verpacken

Wenn ein Ablauf für mehrere Projekte oder Teammitglieder nützlich ist, kann Ihr Agent das Skript in eine Fähigkeit einbinden. Das ist die DevTools-CLI-Fähigkeit: eine einfache Referenz, mit der Ihr KI-Agent bestimmte Browserbefehle ausführen kann, ohne dass die Tokenkosten für alle Tools im Voraus anfallen.

Beispielprompt:

Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.

Beispiel für die Ausführung eines Agenten: Ihr Agent erstellt einen SKILL.md mit einem Namen, einer einzeiligen Beschreibung, wann der Skill angewendet wird, und Anweisungen, die auf das Skript verweisen. In späteren Sitzungen liest der Agent den vollständigen Skill nur, wenn die Aufgabe mit der Beschreibung übereinstimmt.

Nächste Schritte

  • Eine vollständige Liste der CLI-Befehle und -Flags finden Sie in der Referenz zu CLI-Skills.
  • Informationen zum Konfigurieren des zugrunde liegenden Servers (Headless-Modus, Kanäle, experimentelle Kategorien) finden Sie unter Konfiguration.