Opera DevTools MCP

Dies ist ein Fork von chrome-devtools-mcp (Copyright 2025 Google LLC), erweitert um die Funktionen der Opera-Neon-KI.

opera-devtools-mcp ermöglicht Ihrem Coding-Agenten (z. B. Claude, Cursor oder Copilot) die Steuerung und Überprüfung eines laufenden Browsers. Er fungiert als MCP-Server (Model-Context-Protocol) und gibt Ihrem KI-Coding-Assistenten Zugriff auf die volle Leistungsfähigkeit von DevTools – für zuverlässige Automatisierung, tiefgehendes Debugging und Leistungsanalysen. Bei Verbindung mit Opera Neon werden außerdem die integrierten KI-Fähigkeiten von Opera bereitgestellt.

Tool-Referenz | Changelog | Mitwirken | Fehlerbehebung | Designprinzipien

Related MCP server: Chrome DevTools MCP

Wichtigste Funktionen

• Opera-Neon-KI-Tools: Interagieren Sie direkt aus Ihrem Coding-Agenten heraus mit der integrierten KI von Opera – chatten, Seitenaktionen ausführen, Inhalte generieren und Recherchen durchführen.

• Performance-Einblicke gewinnen: Nutzt Chrome DevTools, um Traces aufzuzeichnen und umsetzbare Performance-Erkenntnisse zu gewinnen.

• Erweiterte Browser-Debugging: Analysieren Sie Netzwerkanfragen, erstellen Sie Screenshots und prüfen Sie die-Konsolenmeldungen des Browsers (mit durch Source-Maps aufgelösten Stack-Traces).

• Zuverlässige Automatisierung: Nutzt puppeteer, um Aktionen im Browser zu automatisieren und automatisch auf die Ergebnisse der Aktionen zu warten.

Opera-Neon-KI-Tools

Diese Tools sind nur verfügbar, wenn Sie über --browser-url mit Opera Neon verbunden sind.

Haftungsausschlüsse

opera-devtools-mcp macht den Inhalt der Browser-Instanz für MCP-Clients zugänglich. Dadurch können diese alle Daten im Browser oder in DevTools einsehen, debuggen und ändern. Vermeiden Sie die Weitergabe sensibler oder persönlicher Informationen, die Sie nicht mit MCP-Clients teilen möchten.

Performance-Tools können Trace-URLs an die Google-CrUX-API senden, um Daten zur realen Benutzererfahrung abzurufen. Um dies zu deaktivieren, führen Sie das Tool mit dem Flag --no-performance-crux aus.

Voraussetzungen

• Node.js v20.19 oder eine neuere Search for "verification" lts-Version im aktuellen Wartungsmodus.

• Ein Chromium-basierter Browser (Chrome oder Opera Neon).

• npm

Erste Schritte

Fügen Sie Ihrem MCP-Client die folgende Konfiguration hinzu:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": ["-y", "opera-devtools-mcp@latest"]
    }
  }
}

[!NOTE] Die Verwendung von opera-devtools-mcp@latest stellt sicher, dass Ihr MCP-Client immer die neueste von opera verwendete „Opera DevTools MCP"-Serverversion verwendet.

Verbindung mit Opera Neon herstellen

Um die Opera-Neon-KI-Tools zu verwenden, starten Sie Opera Neon mit aktiviertem Remote-Dekorrupted, debugging und verbinden Sie sich über --browser-url:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "opera-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Starten Sie Opera Neon mit dem Port für das Remote-Debugging:

# macOS
/Applications/Opera\ Neon.app/Contents/MacOS/Opera\ Neon --remote-debugging-port=9222 --user-data-dir=/tmp/opera-profile

Konfiguration des MCP-Clients

claude mcp add opera-devtools --scope user npx opera-devtools-mcp@latest

Wechseln Sie zu Cursor Settings -> MCP -> New MCP Server. Verwenden Sie die oben angegebene Konfiguration.

Folgen Sie der MCP-Konfigurationsanleitung für VS Code und verwenden Sie die Standardkonfiguration von oben, oder nutzen Sie die CLI:

code --add-mcp '{"name":"opera-devtools","command":"npx","args":["-y","opera-devtools-mcp"],"env":{}}'

Ihr erster Prompt

Geben Sie folgenden Prompt in Ihren MCP-Client ein, um zu prüfen, ob alles funktioniert:

Check the performance of https://opera.com

Ihr MCP-Client sollte den Browser öffnen und einen Performance-Trace aufzeichnen.

[!NOTE] Der MCP-Server startet den Browser automatisch, Ferm eing der MCP-Client ein Tool verwendet, das eine laufende Browser-Instanz erfordert. Allein das Verbinden mit dem Opera-DevTools-MCP-Server startet den Browser nicht automatisch.

Tools

Wenn Probleme auftreten, werfen Sie einen Blick in unsere Fehlerbehandlungsanleitung.

• Eingabeautomatisierung (10 Tools)

  • click

  • drag

  • fill

  • fill_form

  • handle_dialog

  • hover

  • press_key

  • type_text

  • upload_file

  • click_at

• Navigationsautomatisierung (6 Tools)

  • close_page

  • list_pages

  • navigate_page

  • new_page

  • select_page

  • wait_for

• Emulation (2 Tools)

  • emulate

  • resize_page

• Performance (3 Tools)

  • performance_analyze_insight

  • performance_start_trace

  • performance_stop_trace

• Netzwerk (2 Tools)

  • get_network_request

  • list_network_requests

• Debugging (8 Tools)

  • evaluate_script

  • get_console_message

  • lighthouse_audit

  • list_console_messages

  • take_screenshot

  • take_snapshot

  • screencast_start

  • screencast_stop

• Speicher (12 Tools)

  • take_heapsnapshot

  • close_heapsnapshot

  • compare_heapsnapshots

  • get_heapsnapshot_class_nodes

  • get_heapsnapshot_details

  • get_heapsnapshot_dominators

  • get_heapsnapshot_duplicate_strings

  • get_heapsnapshot_edges

  • get_heapsnapshot_object_details

  • get_heapsnapshot_retainers

  • get_heapsnapshot_retaining_paths

  • get_heapsnapshot_summary

• Opera (8 Tools)

  • opera_call_mcp_tool

  • opera_chat

  • opera_do

  • opera_list_mcp_servers

  • opera_list_mcp_tools

  • opera_list_models

  • opera_make

  • opera_research

• Erweiterungen (5 Tools)

  • install_extension

  • list_extensions

  • reload_extension

  • trigger_extension_action

  • uninstall_extension

• Drittanbieter (2 Tools)

  • execute_3p_developer_tool

  • list_3p_developer_tools

• WebMCP (2 Tools)

  • execute_webmcp_tool

  • list_webmcp_tools

• Progressive Web Apps (4 Tools)

  • get_os_app_state

  • install_pwa

  • launch_pwa

  • uninstall_pwa

Konfiguration

Der Opera DevTools MCP-Server unterstützt die folgenden Konfigurationsoptionen:

• --autoConnect/ --auto-connect Wenn angegeben, verbindet sich automatisch mit einem lokal laufenden Browser (Chrome 144+) aus dem Benutzerdatenverzeichnis, das durch den Kanalparameter identifiziert wird (Standardkanal ist stable). Erfordert, dass der Remote-Debugging-Server in der Chrome-Instanz über chrome://inspect/#remote-debugging gestartet wurde.

  • Typ: boolean

  • Standard: false

• --browserUrl/ --browser-url, -u Stellt eine Verbindung zu einer laufenden, debuggbaren Chrome-Instanz her (z. B. http://127.0.0.1:9222). Weitere Details finden Sie unter: https://github.com/operasoftware/opera-devtools-mcp#connecting-to-a-running-chrome-instance.

  • Typ: string

  • Standard: false

• --wsEndpoint/ --ws-endpoint, -w WebSocket-Endpunkt zum Verbinden mit einer laufenden Chrome-Instanz (z. B. ws://127.0.0.1:9222/devtools/browser/). Alternative zu --browserUrl.

  • Typ: string

  • Standard: false

• --wsHeaders/ --ws-headers Benutzerdefinierte Header für die WebSocket-Verbindung im JSON-Format (z. B. '{"Authorization":"Bearer token"}'). Funktioniert nur mit --wsEndpoint.

  • Typ: string

  • Standard: false

• --headless Ob im Headless-Modus (ohne Benutzeroberfläche) ausgeführt werden soll.

  • Typ: boolean

  • Standard: false

• --executablePath/ --executable-path, -e Pfad zu einer benutzerdefinierten Chrome-Executable.

  • Typ: string

  • Standard: false

• --isolated Wenn angegeben, wird ein temporäres user-data-dir erstellt, das nach dem Schließen des Browsers automatisch bereinigt wird. Standardwert ist false.

  • Typ: boolean

  • Standard: false

• --userDataDir/ --user-data-dir Pfad zum Benutzerdatenverzeichnis für Chrome. Standard ist $HOME/.cache/opera-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE

  • Typ: string

  • Standard: false

• --channel Geben Sie einen anderen Chrome-Kanal an, der verwendet werden soll. Der Standard ist die stabile Kanalversion.

  • Typ: string

  • Mögliche Werte: canary, dev, beta, stable

  • Standard: false

• --logFile/ --log-file Pfad zu einer Datei, in die Debug-Logs geschrieben werden. Setzen Sie die Umgebungsvariable DEBUG auf *, um ausführliche Logs zu aktivieren. Nützlich für das Einreichen von Fehlerberichten.

  • Typ: string

  • Standard: false

• --viewport Anfängliche Viewport-Größe für die vom Server gestarteten Chrome-Instanzen. Zum Beispiel 1280x720. Im Headless-Modus beträgt die maximale Größe 3840x2160px.

  • Typ: string

  • Standard: false

• --proxyServer/ --proxy-server Proxy-Server-Konfiguration für Chrome, die beim Starten des Browsers als --proxy-server übergeben wird. Siehe https://www.chromium.org/developers/design-documents/network-settings/ für Details.

  • Typ: string

  • Standard: false

• --acceptInsecureCerts/ --accept-insecure-certs Wenn aktiviert, werden Fehler in Bezug auf selbstsignierte und abgelaufene Zertifikate ignoriert. Mit Vorsicht verwenden.

  • Typ: boolean

  • Standard: false

• --experimentalPageIdRouting/ --experimental-page-id-routing Ob pageId bei seitenbezogenen Tools verfügbar gemacht und Anfragen nach Seiten-ID weitergeleitet werden sollen (nützlich für parallele Agent-Sitzungen).

  • Typ: boolean

  • Standard: false

• --experimentalDevtools/ --experimental-devtools Ob die Automatisierung über DevTools-Ziele aktiviert werden soll.

  • Typ: boolean

  • Standard: false

• --experimentalVision/ --experimental-vision Ob koordinatenbasierte Tools wie click_at(x,y) aktiviert werden sollen. Erfordert normalerweise ein Computer-Use-Modell, das anhand von Screenshots genaue Koordinaten erzeugen kann.

  • Typ: boolean

  • Standard: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory Ob Speicher-Debugging-Tools aktiviert werden sollen.

  • Typ: boolean

  • Standard: false

• --experimentalStructuredContent/ --experimental-structured-content Ob strukturierte formatierte Inhalte ausgegeben werden sollen.

  • Typ: boolean

  • Standard: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages Ob alle Arten von Seiten wie Webviews oder Hintergrundseiten als Seiten einbezogen werden sollen.

  • Typ: boolean

  • Standard: false

• --experimentalScreencast/ --experimental-screencast Stellt experimentelle Screencast-Tools bereit (erfordert ffmpeg). Installieren Sie ffmpeg https://www.ffmpeg.org/download.html und stellen Sie sicher, dass es im PATH des MCP-Servers verfügbar ist.

  • Typ: boolean

  • Standard: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path Pfad zur ffmpeg-Executable für Screencast-Aufnahmen.

  • Typ: string

  • Standard: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp Setzen Sie dies auf true, um WebMCP-Debugging-Tools zu aktivieren. Erfordert Chrome 150+ mit dem folgenden Flag: --enable-features=WebMCP

  • Typ: boolean

  • Standard: false

• --chromeArg/ --chrome-arg Zusätzliche Argumente für Chrome. Gilt nur, wenn Chrome von opera-devtools-mcp gestartet wird.

  • Typ: array

  • Standard: false

• --blockedUrlPattern/ --blocked-url-pattern Schränkt den Netzwerkzugriff des Browsers ein, indem angegebene URL-Muster blockiert werden (verwendet https://urlpattern.spec.whatwg.org/). Trennt beim Verbinden stillschweigend die Verbindung zu Zielen mit blockierten URLs und blockiert Laufzeitanforderungen (einschließlich Navigationen und Unterressourcen). Akzeptiert ein Array von Mustern.

  • Typ: array

  • Standard: false

• --allowedUrlPattern/ --allowed-url-pattern Schränkt den Netzwerkzugriff des Browsers ein, indem nur bestimmte URL-Muster zugelassen werden (verwendet https://urlpattern.spec.whatwg.org/). Erfordert Chrome 149+. Trennt beim Verbinden stillschweigend die Verbindung zu Zielen mit nicht zulässigen URLs und blockiert Laufzeitanforderungen (einschließlich Navigationen und Unterressourcen). Akzeptiert ein Array von Mustern.

  • Typ: array

  • Standard: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Standardargumente für Chrome explizit deaktivieren. Gilt nur, wenn Chrome von opera-devtools-mcp gestartet wird.

  • Typ: array

  • Standard: false

• --categoryEmulation/ --category-emulation Setzen Sie dies auf false, um Tools im Zusammenhang mit Emulation auszuschließen.

  • Typ: boolean

  • Standard: true

• --categoryPerformance/ --category-performance Setzen Sie dies auf false, um Tools im Zusammenhang mit Leistung auszuschließen.

  • Typ: boolean

  • Standard: true

• --categoryNetwork/ --category-network Setzen Sie dies auf false, um Tools im Zusammenhang mit Netzwerk auszuschließen.

  • Typ: boolean

  • Standard: true

• --categoryExtensions/ --category-extensions Setzen Sie dies auf true, um Tools im Zusammenhang mit Erweiterungen einzuschließen. Hinweis: Diese Funktion wird derzeit nur mit einer Pipe-Verbindung unterstützt. autoConnect, browserUrl und wsEndpoint werden mit dieser Funktion erst unterstützt, wenn Version 149 veröffentlicht wird.

  • Typ: boolean

  • Standard: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party Setzen Sie dies auf true, um Drittanbieter-Entwicklertools zu aktivieren, die von der untersuchten Seite selbst bereitgestellt werden.

  • Typ: boolean

  • Standard: false

• --categoryPwa/ --category-pwa Setzen Sie dies auf true, um Tools für die Automatisierung von Progressive Web Apps einzubeziehen (Installation, Start, Deinstallation und Betriebssystemzustand). Diese Funktion wird nur mit einer Pipe-Verbindung unterstützt; autoConnect, browserUrl und wsEndpoint werden nicht unterstützt.

  • Typ: boolean

  • Standard: false

• --performanceCrux/ --performance-crux Setzen Sie dies auf true, um das Senden von URLs aus Leistungs-Traces an die CrUX API zu aktivieren, um Feld-Leistungsdaten zu erhalten.

  • Typ: boolean

  • Standard: false

• --usageStatistics/ --usage-statistics Setzen Sie dies auf true, um der Erhebung von Nutzungsstatistiken zuzustimmen. Google sammelt Nutzungsdaten, um das Tool zu verbessern, gemäß der Google Privacy Policy (https://policies.google.com/privacy). Dies ist unabhängig von den Chrome-Browser-Metriken. Deaktiviert, wenn die Umgebungsvariablen OPERA_DEVTOOLS_NO_USAGE_STATISTICS oder CI gesetzt sind.

  • Typ: boolean

  • Standard: false

• --screenshotFormat/ --screenshot-format Überschreibt das Standard-Ausgabeformat, das von take_screenshot verwendet wird, wenn der Aufrufer keins angibt. JPEG und WebP sind ~3-5x kleiner als PNG, was dazu beiträgt, die Kontextgröße in KI-Konversationen zu reduzieren. Wenn nicht gesetzt, bleibt das bisherige Standardformat ("png") erhalten.

  • Typ: string

  • Mögliche Werte: jpeg, png, webp

  • Standard: false

• --screenshotQuality/ --screenshot-quality Überschreibt die Standard-Komprimierungsqualität (0-100), die von take_screenshot für JPEG und WebP verwendet wird, wenn der Aufrufer keine angibt. Niedrigere Werte bedeuten kleinere Dateien. Für PNG ignoriert. Wenn nicht gesetzt, bleibt der Puppeteer-Standardwert erhalten.

  • Typ: number

  • Standard: false

• --screenshotMaxWidth/ --screenshot-max-width Maximale Breite in Pixeln für Screenshots. Wenn das aufgenommene Bild breiter ist, wird es vor der Rückgabe unter Beibehaltung des Seitenverhältnisses verkleinert. Reduziert die Kontextgröße in KI-Konversationen. Nicht gesetzt bedeutet keine Größenänderung.

  • Typ: number

  • Standard: false

• --screenshotMaxHeight/ --screenshot-max-height Maximale Höhe in Pixeln für Screenshots. Wenn das aufgenommene Bild höher ist, wird es vor der Rückgabe unter Beibehaltung des Seitenverhältnisses verkleinert. Kann mit --screenshot-max-width kombiniert werden; der kleinere Skalierungsfaktor gewinnt. Nicht gesetzt bedeutet keine Größenänderung.

  • Typ: number

  • Standard: false

• --slim Stellt einen "slim"-Satz von 3 Tools bereit, der nur Navigation, Skriptausführung und Screenshots abdeckt. Nützlich für einfache Browser-Aufgaben.

  • Typ: boolean

  • Standard: false

• --redactNetworkHeaders/ --redact-network-headers Wenn true, werden einige der als sensibel geltenden Netzwerk-Header geschwärzt, bevor sie an den Client zurückgegeben werden.

  • Typ: boolean

  • Standard: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths Wenn gesetzt, wird die Standard-Pfadbeschränkung deaktiviert, die gilt, wenn der MCP-Client die Roots-Fähigkeit nicht aushandelt. Standardmäßig sind dateischreibende Tools auf das temporäre Verzeichnis des Betriebssystems beschränkt, wenn keine Roots konfiguriert sind. Verwenden Sie dies nur, wenn Sie eine Verbindung zu einem vertrauenswürdigen lokalen Client herstellen, der keine MCP-Roots implementiert und Zugriff auf Pfade außerhalb des temporären Verzeichnisses benötigt.

  • Typ: boolean

  • Standard: false

Übergeben Sie sie über die Eigenschaft args in der JSON-Konfiguration. Zum Beispiel:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Verbinden per WebSocket mit benutzerdefinierten Headern

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

Konzepte

Benutzerdatenverzeichnis

opera-devtools-mcp startet eine Browser-Instanz mit dem folgenden Benutzerdatenverzeichnis:

• Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

Das Benutzerdatenverzeichnis wird zwischen den Ausführungen nicht gelöscht. Setzen Sie die Option isolated auf true, um stattdessen ein temporäres Benutzerdatenverzeichnis zu verwenden, das nach dem Schließen des Browsers automatisch gelöscht wird.

Verbinden mit einer laufenden Browser-Instanz

Standardmäßig startet der Server eine neue Chrome-Instanz mit einem dedizierten Profil. Sie können stattdessen über --browser-url eine Verbindung zu einer laufenden Instanz herstellen:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Starten Sie den Browser mit aktiviertem Remote-Debugging-Port:

macOS (Chrome)

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

macOS (Opera Neon)

/Applications/Opera\ Neon.app/Contents/MacOS/Opera\ Neon --remote-debugging-port=9222 --user-data-dir=/tmp/opera-profile

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

[!WARNING] Durch das Aktivieren des Remote-Debugging-Ports wird ein Debugging-Port auf der laufenden Browser-Instanz geöffnet. Jede Anwendung auf Ihrem Rechner kann sich mit diesem Port verbinden und den Browser steuern. Stellen Sie sicher, dass Sie keine sensiblen Websites besuchen, während der Debugging-Port geöffnet ist.

Debugging von Chrome auf Android

Bitte konsultieren Sie diese Anweisungen.

Bekannte Einschränkungen

Siehe Fehlerbehebung.

Lizenz

Apache 2.0. Siehe LICENSE und NOTICE.