Open Source · MIT · MCP

Lassen Sie Ihren KI-Agenten die WebView auf dem Smartphone Ihres Nutzers debuggen.

Ein Script in Ihre H5-Seite oder in die WebView Ihrer App. Ihr Nutzer liest einen kurzen Gerätecode vor, und Claude Code, Codex, Cursor oder jeder andere MCP-Client sieht die Seite, liest Console und Netzwerk und klickt sich zum Bug durch – während der Nutzer zusieht und jederzeit übernehmen kann.

  • Kein USB-Kabel
  • Kein Remote-Debugging-Port
  • Kein App-Rebuild, nur ein Script
  • Greift auch nach dem Bug noch

01Live-DemoSelbst ausprobieren

Ein echter Bug, behoben auf einem „echten“ SmartphoneJetzt mit Ihrem eigenen Agenten

Das Smartphone in dieser Demo führt das echte Seiten-SDK in einem Demo-Shop aus. Sein Gateway ist in Ihrem Browser nachgebildet, es verlässt also nichts diesen Tab – aber jeder Snapshot, jeder Klick, jede Console-Zeile und jeder Live-Patch weiter unten ist echt.

Diese hier ist echt: ein öffentliches Demo-Gateway auf demo.debugger.site, von allem anderen getrennt und täglich geleert. Der Shop im Smartphone wird von dort geladen – holen Sie sich einen Key, richten Sie Ihren Agenten darauf und sehen Sie ihm direkt hier bei der Arbeit zu.

Bereit
Warten, bis der Shop online ist…
demo.debugger.site

KI-Agent

mit dem rwd-MCP-Server verbunden

Sehen Sie zu, wie sich ein Agent mit dem Smartphone verbindet, einen Checkout-Bug reproduziert, die Ursache findet und die Lösung live verifiziert.

  1. Einen eigenen Key holen

    Ein Klick, keine Anmeldung. Der Key gilt nur auf dem Demo-Gateway und bis die Demo neu beginnt.

    Holen Sie sich einen Key, dann steht er im Befehl unten.

  2. Das Demo-Gateway zu Ihrem Agenten hinzufügen

    Führen Sie den Befehl einmal im Terminal aus, oder tragen Sie ihn in die Einstellungen Ihres MCP-Clients ein. Der Key ist schon eingesetzt.

    terminal
    claude mcp add --transport http rwd-demo https://demo.debugger.site/v1/mcp \
      --header "Authorization: Bearer rwd_sk_live_…"
  3. Fragen Sie Ihren Agenten

    Der Gerätecode des Shops im Smartphone steht schon im Prompt. Wenn der Agent um Zugriff bittet, tippen Sie im Shop auf Zulassen und sehen ihm zu; Übernehmen oder Beenden geht jederzeit.

    Prompt
    Verwende den MCP-Server rwd-demo und verbinde dich mit Gerät XXXX-XXXX. Wähle im Shop bei einem Produkt die Geschenkverpackung, gehe zum Checkout und finde heraus, warum die Gesamtsumme „--“ anzeigt.

    Ersetzen Sie XXXX-XXXX durch den Code, der im Shop steht.

Grenzen der Demo

  • Ein Key pro Besucher: Ihr Agent erreicht nur die Seite, deren Code Sie ihm geben, und erst nachdem Sie zugestimmt haben
  • Nur Stufe interact: keine Skripte, keine Request-Bodys, kein Speicher
  • Ein Agent belegt eine Seite höchstens 15 Minuten (5 im Leerlauf)
  • 120 MCP-Anfragen pro Minute und IP
  • Täglich um 04:00 (UTC+8) geleert – geben Sie keine echten personenbezogenen Daten ein

Smartphone des KundenK7Q2-9M4X

Der Demo-Shop, live····-····

Warten, bis der Shop online ist…

Scannen, um es auf dem Smartphone zu öffnen
In neuem Tab öffnen

Das ist demo.debugger.site selbst, mit dem echten SDK. Scannen Sie den Code, um den Shop stattdessen auf Ihrem Smartphone zu öffnen.

Läuft vollständig in Ihrem Browser: das echte SDK (sdk.js) in einem iframe, ein WebSocket-Shim, der zu einem Mock-Gateway in der Seite tunnelt, und ein skriptgesteuerter Agent, der echte RPCs schickt. Die Nachrichten des Agenten folgen der Sprache der Seite; Tool-Ergebnisse erscheinen in der Sprache des Gateways (Englisch oder Chinesisch).

02So funktioniert es

In drei Schritten von „auf meinem Handy geht es nicht“ zur Ursache

  1. Das Seiten-SDK einbinden

    Ein Script in <head>, so früh wie möglich, damit Console und Netzwerk ab der ersten Zeile aufgezeichnet werden. In einer App injizieren Sie dasselbe Script bei Dokumentbeginn.

  2. Der Nutzer gibt seinen Gerätecode weiter

    Jedes Smartphone hat einen festen Code wie K7Q2-9M4X in einem kleinen Badge. Nutzer können auf Unterstützung anfordern tippen, und das Gerät springt an die Spitze der Liste des Agenten.

  3. Ihr Agent verbindet sich über MCP

    Tragen Sie die MCP-Adresse Ihres Gateways mit einem API-Key ein. Dann beschreiben Sie einfach das Problem – der Agent findet das Gerät, bittet um Freigabe und fängt an.

index.html
<!-- In <head>, before your own scripts; pin a version in production -->
<script src="https://cdn.jsdelivr.net/npm/remote-webview-debugger/dist/sdk.js"></script>
<script>
  RemoteWebviewDebugger.run("https://rwd.example.com/v1", "rwd_pk_…", {
    userId: currentUser?.id ?? null, // optional: find devices by user
    helpButton: true,                // show the “Request assistance” button
  })
</script>

Pinnen Sie in Produktion eine Version, oder nutzen Sie die eigene Kopie Ihres Gateways unter /v1/sdk.js (mit SRI aus der Konsole).

terminal
claude mcp add --transport http rwd https://rwd.example.com/v1/mcp \
  --header "Authorization: Bearer rwd_sk_live_…"
Gerät K7Q2-9M4X kommt nicht durch den Checkout – die Gesamtsumme zeigt „--“. Finde heraus, warum.

03Was der Agent bekommt

Der DevTools-Workflow, über MCP, auf dem Smartphone eines anderen

  • Barrierefreiheits-Snapshots

    YAML im Playwright-Stil mit Element-Refs. Der Agent liest die Seite als Struktur, nicht als Pixel – und handelt über Refs.

  • Echte Interaktionen

    Klicken, Ausfüllen, Tippen, Tastendrücke, Auswählen, Hover, Scrollen, Ziehen – mit Prüfung der Bedienbarkeit und Events, die React und Vue akzeptieren.

  • Console und Netzwerk

    Ab dem Laden der Seite in begrenzten Puffern aufgezeichnet, sodass Fehler von vor der Verbindung noch da sind. Bodys auf Anfrage.

  • Seitenübergreifende Sitzungen

    Liste → Detail → Checkout oder eine zweite WebView: Alle Seiten eines Geräts bilden eine Sitzung, mit seitenübergreifender Zeitleiste.

  • Sitzungsänderungen, automatisch

    Jedes Tool-Ergebnis endet mit dem, was sich geändert hat – neue Seite, Navigation, ein Fehler, eine Übernahme durch den Nutzer. Kein Polling.

  • Aufgabenkarte auf dem Smartphone

    Der Agent zeigt Plan und Fortschritt auf dem Gerät, damit der Nutzer immer weiß, was er tut und warum.

  • Screenshots

    Echte Pixel, wenn die App eine Brücke bereitstellt, sonst eine DOM-Nachbildung. Die Maskierung gilt für beides.

  • Sitzungsprotokoll auf dem Gerät

    Seiten, Tipper, Console und jede Anfrage seit dem Start der App, auf dem Smartphone in IndexedDB – auch im Nachhinein lesbar.

  • Live-Patches

    Auf der Stufe advanced kann der Agent die laufende Seite mit evaluate_script patchen und eine Lösung sofort verifizieren.

  • Schlechte Netze

    Ein leichter Heartbeat mit Back-off; nach drei Fehlversuchen ein Presence-Poll einmal pro Minute, und das Gateway weckt die Seite, wenn es nötig ist.

  • 11 Sprachen

    Smartphone-Oberfläche, Console und Texte für den Agenten in 11 Sprachen, inklusive Arabisch von rechts nach links. Eigene Sprachpakete und Formulierungen möglich.

  • Jeder MCP-Client

    Streamable HTTP unter /v1/mcp für Claude Code, Codex, Cursor und Co.; für alles andere eine winzige stdio-Brücke.

Alle Tools 34

  • list_devices
  • connect_device
  • wait_for_device
  • list_pages
  • select_page
  • wait_for_page
  • take_snapshot
  • find_elements
  • take_screenshot
  • click
  • fill
  • type_text
  • press_key
  • select_option
  • hover
  • scroll
  • drag
  • batch_actions
  • navigate_page
  • go_back
  • reload_page
  • wait_for
  • list_console_messages
  • list_network_requests
  • get_network_request
  • get_storage
  • evaluate_script
  • set_task
  • get_session_timeline
  • get_session_overview
  • get_session_log
  • wait_for_event
  • wait_for_control
  • disconnect_device

04Highlights

Gemacht für die Bugs, die nur draußen auftreten

Drei Dinge, die Ihnen ein Kabel, ein Remote-Debugging-Port oder eine Bildschirmaufnahme nicht geben.

Sitzungsprotokoll · Kaltspeicher auf dem Gerät

Der Bug ist schon passiert? Das Protokoll liegt noch auf dem Smartphone.

Ab dem Moment, in dem die App startet, schreibt das SDK ein Sitzungsprotokoll in die IndexedDB des Geräts: besuchte Seiten, Tipper und Eingaben des Nutzers, Console-Ausgaben und jede Anfrage – fehlgeschlagene mit Headern und Bodys. Nichts wird irgendwohin gestreamt; es bleibt auf dem Smartphone, unter denselben Maskierungsregeln, bis ein Agent, den der Nutzer freigegeben hat, es mit get_session_overview und get_session_log abruft. Die letzten drei Starts bleiben erhalten, je bis zu 10 MB.

Live-Patch · evaluate_script

Verifizieren Sie die Lösung auf dem Smartphone des Kunden, bevor Sie ausliefern.

Mit der advanced-Freigabe des Nutzers läuft evaluate_script in der Seite – der Agent kann also einen falschen Zustand korrigieren, eine Funktion überschreiben oder eine Ansicht neu rendern und das Ergebnis auf dem echten Gerät sehen: ein Live-Patch, der die Diagnose beweist. Er lebt nur im Speicher dieser Seite; nichts wird persistiert, und sensible Klicks brauchen weiterhin das Ja des Nutzers.

Agent-native · MCP

Für Agenten gemacht, nicht für einen Menschen mit DevTools.

Jedes Tool-Ergebnis endet mit dem, was sich seit dem letzten Aufruf auf dem Gerät geändert hat, der Agent muss also nie pollen. Seiteninhalte werden als nicht vertrauenswürdige Daten übergeben. Eine Aufgabenkarte auf dem Smartphone zeigt den Plan des Agenten, und das Gateway spricht die Sprache des Agenten – Tool-Beschreibungen und Ergebnisse in 11 Sprachen.

05Datenschutz und Kontrolle

Das Smartphone des Nutzers bleibt das Smartphone des Nutzers

Remote-Debugging funktioniert nur mit Vertrauen. Jede Sitzung ist sichtbar, freigegeben und jederzeit unterbrechbar.

  • Erst die Freigabe

    Ein Agent bittet um Zugriff; der Nutzer sieht, wer fragt, und wählt die Stufe auf dem Smartphone. Nur echte Tipper zählen – ein Script kann sich nicht selbst freigeben.

  • Jederzeit übernehmen oder beenden

    Während der Agent arbeitet, ist die Seite hinter einem leuchtenden Rand gesperrt. Ein Tipp auf Übernehmen pausiert den Agenten, Beenden trennt ihn.

  • Maskiert von Haus aus

    Passwörter und alles, was mit data-rwd-mask markiert ist, erscheinen in Snapshots, Screenshots, Console, Netzwerkdaten und im Sitzungsprotokoll als ••••. Selektoren und Regex-Muster lassen sich pro Projekt ergänzen.

  • Sensible Klicks brauchen ein Ja

    Markieren Sie Schaltflächen mit data-rwd-confirm („Bestellung absenden“, „Konto löschen“), und der Nutzer bestätigt jeden Klick des Agenten darauf.

  • Zugriffsstufen

    observe liest, interact bedient, advanced ergänzt Skripte, Request-Bodys und Speicher. Pro Key und pro Projekt begrenzbar.

  • Audit-Log

    Jede Verbindung, Freigabe, jeder RPC und jede Übernahme wird mit wer, was und wann festgehalten – niemals Seiteninhalte oder Parameterwerte.

06Native Apps

In Ihrer App ist es ein User-Script

Laden Sie das SDK einmal herunter und injizieren Sie es bei Dokumentbeginn – WKUserScript auf iOS, addDocumentStartJavaScript auf Android. An Ihren Webseiten ändert sich gar nichts.

  • Überall ein Gerätecode

    Übergeben Sie eine feste deviceId (und behalten Sie den deviceToken), dann bleibt der Code über WebViews und Domains hinweg gleich.

  • Native Bedienelemente

    Zeigen Sie mit nativeControl() Ihre eigenen Schaltflächen zum Übernehmen, Zurückgeben und Beenden; Seiten-Scripts können die Funktion nicht aufrufen.

  • Native Freigabedialoge

    nativeApproval: true übergibt Zugriffsanfragen und Bestätigungen an die Oberfläche Ihrer eigenen App.

  • Screenshots mit echten Pixeln

    Eine kleine Brücke (WKWebView-Snapshot, Android-Bitmap) liefert dem Agenten echte Pixel statt einer DOM-Nachbildung.

RemoteDebugger.swift
import WebKit

/// Call before webView.load(…): fetch the SDK once, inject it at document start.
func installRemoteDebugger(into controller: WKUserContentController,
                           userId: String?, done: @escaping () -> Void) {
    let gateway = "https://rwd.example.com/v1"
    URLSession.shared.dataTask(with: URL(string: gateway + "/sdk.js")!) { data, _, _ in
        DispatchQueue.main.async {
            defer { done() }
            guard let data, let sdk = String(data: data, encoding: .utf8) else { return }
            let options: [String: Any] = [
                "deviceId": stableDeviceId, // a UUID kept in UserDefaults
                "userId": userId ?? NSNull(),
                "helpButton": true,
            ]
            let json = String(data: try! JSONSerialization.data(withJSONObject: options), encoding: .utf8)!
            let boot = sdk + "\n;RemoteWebviewDebugger.run(\"\(gateway)\", \"rwd_pk_…\", \(json));"
            controller.addUserScript(WKUserScript(source: boot,
                                                  injectionTime: .atDocumentStart,
                                                  forMainFrameOnly: true))
        }
    }.resume()
}

07Selbst gehostet

Ein Go-Binary. Ihre Server. Ihre Daten.

Das Gateway enthält die Web-Konsole und das Seiten-SDK. SQLite von Haus aus, Postgres wenn Sie es brauchen, Docker Compose und Caddy für HTTPS.

  • Konsole

    Geräte, API-Keys, Mitglieder und Rollen, Einladungen per QR-Code, Richtlinien und ein Audit-Log – plus eine Integrationsanleitung, in der Ihre eigenen Keys schon eingesetzt sind.

  • Datenbank

    Standardmäßig eine SQLite-Datei; mit RWD_DATABASE_URL=postgres://… nutzen Sie Postgres.

  • Betrieb

    Prometheus-Metriken unter /v1/metrics, versionierte SDK-Adressen mit SRI, Health-Check unter /v1/healthz.

Deployment-Anleitung

Schnellstart
# ein Container: Konsole + Gateway + SDK
docker run -d --name rwd -p 8080:8080 -v rwd-data:/data \
  -e RWD_ADMIN_PASSWORD='change-me' \
  ghcr.io/zanel1u/remote-webview-debugger:latest

# oder selbst bauen, ausliefern und HTTPS von Caddy bekommen
git clone https://github.com/ZaneL1u/remote-webview-debugger
RWD_DOMAIN=rwd.example.com \
  remote-webview-debugger/deploy/platform/deploy.sh you@your-server amd64
# → Konsole  https://rwd.example.com
# → Gateway  https://rwd.example.com/v1  (MCP unter /v1/mcp)

Auf dem Server braucht es nur Docker; zum Bauen aus dem Quellcode Go und Node.

08FAQ

Häufige Fragen

Muss der Nutzer etwas installieren?

Nein. Bei H5-Seiten ist das SDK Teil Ihrer Seite. In einer App injizieren Sie es aus nativem Code. Der Nutzer sieht nur ein kleines Badge mit seinem Gerätecode und, wenn sich ein Agent verbinden will, einen Freigabedialog.

Was kann der Agent sehen und tun?

Nur das, was der Nutzer freigegeben hat: die WebView-Seiten dieses Geräts, auf der gewährten Stufe. Außerhalb der WebView steuert er nichts. Maskierte Felder bleiben maskiert, und Seiteninhalte gehen als nicht vertrauenswürdige Daten an das Modell.

Der Bug ist passiert, bevor sich der Agent verbunden hat. Ist er verloren?

Nein. Das SDK führt ab dem Start der App ein Sitzungsprotokoll auf dem Gerät – Seiten, Tipper, Console und Anfragen –, sodass ein Agent, der sich später verbindet, mit get_session_log den ganzen Weg zum Bug nachlesen kann. Ansonsten verlässt es das Smartphone nie.

Kann der Agent den Bug auf dem Smartphone beheben?

Er kann eine Lösung verifizieren: Auf der Stufe advanced patcht evaluate_script die laufende Seite im Speicher – Zustand korrigieren, eine Funktion überschreiben, neu rendern – und der Agent sieht, ob das Problem verschwindet. Die echte Lösung geht weiterhin durch Ihr normales Release; auf dem Gerät wird nichts persistiert.

Welche Agenten funktionieren damit?

Jeder MCP-Client. Claude Code, Codex und Cursor nutzen die gehostete Streamable-HTTP-Adresse direkt; Clients, die nur stdio sprechen, verwenden rwd mcp, eine kleine Brücke zur selben Adresse.

Welche Plattformen werden unterstützt?

Jede moderne mobile WebView und jeder moderne Browser: WKWebView auf iOS, Android System WebView, App-interne Browser und einfach Safari oder Chrome auf dem Smartphone. Desktop-Browser funktionieren ebenfalls.

Was ist bei schlechten Netzen oder blockierten WebSockets?

Die Seite hält einen leichten Heartbeat-WebSocket mit exponentiellem Back-off. Kommt sie dreimal in Folge nicht durch, fällt sie auf einen Presence-Poll einmal pro Minute zurück, und das Gateway weckt sie, wenn sich ein Agent verbinden will.

Verlangsamt es meine Seite?

Es ist ein Script. Console- und Netzwerk-Aufzeichnungen liegen in begrenzten Ringpuffern (je 500 Einträge, Response-Bodys auf 5 MB begrenzt), das Sitzungsprotokoll wird im Hintergrund geschrieben, und eine untätige Verbindung tauscht nur Heartbeats aus.

Funktioniert es neben eruda, vConsole oder PageSpy?

Ja – Snapshots und Hit-Testing überspringen ihre Knoten, unser eigener Verkehr bleibt aus ihren Netzwerk-Logs heraus, und es kann sogar als Tab in eruda leben.

Ist die Demo oben echt?

Das SDK ist echt und unverändert; nur das Gateway ist in Ihrem Browser simuliert. Ein WebSocket-Shim tunnelt die Verbindung des SDK per postMessage dorthin, und ein skriptgesteuerter Agent schickt dieselben RPCs wie ein echtes Gateway. Für die echte Strecke von Anfang bis Ende testen Sie es mit Ihrem eigenen Agenten.