Das Fenster
Die Seitenleiste zeigt alles, was Tapscope erreicht, gruppiert nach iOS-Geräte, Simulatoren, Android und Netzwerk-Targets. Unter jedem Gerät stehen seine Apps (Safari, Chrome oder deine eigene App) und deren Seiten. Ein Kennzeichen zeigt den Typ: Seite, WebView, Service Worker, Node.js oder Sonstiges. Wähle eine Seite, um sie rechts zu öffnen.
Steht etwas im Weg – ein gesperrtes iPhone, ein fehlendes Vertrauen, ein Android-Gerät ohne erlaubtes USB-Debugging –, zeigt die Seitenleiste den Zustand anstelle der Seiten. Der Tooltip erklärt ihn, und Wie behebe ich das? öffnet den passenden Abschnitt der Plattform-Anleitung.
Unten zeigt die Seitenleiste die Adresse des CDP-Endpunkts (normalerweise 127.0.0.1:9222) und im Free-Tarif die Restzeit der laufenden Sitzung bzw. die heute noch freien Sitzungen.
Toolbar
| Element | Funktion |
|---|---|
| DevTools / React | Wechselt zwischen den Chrome DevTools und den React DevTools der Seite. Beide bleiben verbunden. |
| WebKit-Rohkonsole | Öffnet ein Fenster für rohe Nachrichten des WebKit Inspector Protocol (nur iOS-Seiten). |
| Screencast | Zeigt eine Live-Vorschau der Seite neben den Panels, siehe Screencast. |
| Seite neu laden | Lädt die untersuchte Seite neu. |
| DevTools neu verbinden | Lädt die DevTools neu und verbindet sie wieder mit der Seite. |
| In Chrome öffnen | Öffnet dieselben DevTools in Google Chrome statt in der eingebauten Ansicht. |
| CDP-URL kopieren | Kopiert die WebSocket-URL der Seite für Puppeteer, VS Code oder andere CDP-Clients. |
Kontextmenü
Klicke mit der rechten Maustaste auf eine Seite in der Seitenleiste. Je nach Plattform gibt es:
- Neu laden, In den Vordergrund holen und Tab schließen.
- Neuen Tab öffnen … im selben Browser (Simulator, Android, Netzwerk-Targets).
- URL kopieren und CDP-URL kopieren.
- WebKit-Rohkonsole öffnen für iOS-Seiten.
Bei Netzwerk-Targets bietet die Seitenleiste außerdem Netzwerk-Target hinzufügen (der Knopf +) und Netzwerk-Target entfernen.
Menüs und Tastenkürzel
| Kürzel | Befehl |
|---|---|
| ⌘R | Debug › Seite neu laden |
| ⌥⌘R | Debug › DevTools neu verbinden |
| ⇧⌘P | Debug › Screencast ein/aus |
| ⇧⌘R | Debug › React DevTools anzeigen |
| ⌥⌘K | Debug › WebKit-Rohkonsole |
| ⌘, | Einstellungen |
Das Menü Darstellung schaltet die Abschnitte der Seitenleiste ein und aus: iOS-Geräte, Simulatoren, Android-Geräte und Netzwerk-Targets aktivieren. In den DevTools gelten die gewohnten Chrome-Kürzel, etwa ⌘F für die Suche in Elements oder ⌘P zum Öffnen einer Datei in Sources.
Einstellungen
- Agenten: CDP-Endpunkt und die Einrichtung von Chrome DevTools MCP für Claude Code, Cursor, Claude Desktop und andere MCP-Clients zum Kopieren. Siehe Coding Agents.
- Lizenz: dein Tarif, die heute noch freie Zeit und der Lizenzschlüssel. Siehe Tarife und Abrechnung.
- Allgemein: das Kommandozeilenwerkzeug
tapscopeinstallieren.
Wenn eine Seite nicht antwortet
Seiten auf einem gesperrten Gerät oder in einem Hintergrund-Tab antworten dem Debugger nicht. Bleibt eine Seite fünf Sekunden stumm, zeigt Tapscope über DevTools und Vorschau einen Hinweis mit den Schritten, die meist helfen, und dem Knopf Erneut verbinden. Details in der Anleitung für iPhone & iPad.
WebKit-Rohkonsole
Für Arbeit am Protokoll unter iOS schickt die Rohkonsole JSON-Nachrichten des WebKit Inspector Protocol an die gewählte Seite und zeigt jede Antwort und jedes Ereignis. Sie teilt sich die Verbindung mit den DevTools, du kannst also beides gleichzeitig nutzen. Öffnen über die Toolbar, das Kontextmenü oder ⌥⌘K.