Zum Inhalt springen

Dokumentation / Automatisierung

Coding Agents, MCP und Puppeteer

Lass deinen Coding Agent auf die echte Seite schauen: DOM lesen, einen Ablauf durchklicken, Fehler und Anfragen prüfen und die Lösung auf dem Gerät bestätigen.

Zwei Zugänge

Die tapscope-CLI – für Agenten, die Shell-Befehle ausführen, etwa Claude Code, Codex oder Cursor. Jeder Befehl antwortet in JSON, Element-Referenzen kommen aus einem lesbaren Snapshot, und Konsolen- und Netzwerkereignisse lassen sich schrittweise lesen. Siehe CLI-Referenz.
Der CDP-Endpunkt http://127.0.0.1:9222 – verhält sich wie ein Chrome mit Debug-Port. Chrome DevTools MCP, Puppeteer und VS Code verbinden sich damit.

Beide sehen dieselben Seiten, und beide funktionieren auch bei geschlossener Tapscope-App.

Ablauf für Agenten

tapscope doctor --json
tapscope devices list --json
tapscope open https://example.com --json
tapscope snapshot --interactive --json
tapscope click @e3 --json
tapscope console list --types error,exception --json
tapscope network list --failed --json
tapscope reload --json
tapscope screenshot --json

Gib deinem Agenten die installierte Referenz, statt Befehle in seinen Prompt zu kopieren:

tapscope agent-context
tapscope skills get mobile-debugging

agent-context gibt Befehle, Fehlercodes und Exit-Codes genau dieser Version aus. Die Skills mobile-debugging, vscode-debugging und puppeteer sind Schritt-für-Schritt-Anleitungen. Bei mehreren Agenten bekommt jeder seine eigene --session.

Welche Seiten der Endpunkt zeigt

Der CDP-Endpunkt zeigt die Seiten jeweils eines Geräts:

das Gerät der mit tapscope targets use <id> gewählten Seite,
sonst das Gerät, dessen Seite zuletzt in Tapscope oder per CDP geöffnet wurde,
sonst der erste gebootete Simulator, dann ein iPhone oder iPad (Kabel vor WLAN).

Android-Geräte werden nie von selbst gewählt. Öffne eine Seite in Tapscope oder nutze targets use, um eines zu wählen.

Chrome DevTools MCP

Claude Code:

claude mcp add tapscope -- npx -y chrome-devtools-mcp@latest --browser-url http://127.0.0.1:9222

Cursor, Claude Desktop und andere MCP-Clients:

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

Codex (~/.codex/config.toml):

[mcp_servers.tapscope]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest", "--browser-url", "http://127.0.0.1:9222"]

Dieselben Snippets stehen in Tapscope unter Einstellungen › Agenten.

Tapscope-Einstellungen, Bereich Agenten: CDP-Endpunkt http://127.0.0.1:9222 und kopierfertige Chrome-DevTools-MCP-Einrichtung für Claude Code, Cursor und Claude Desktop — Einstellungen › Agenten mit CDP-Endpunkt und MCP-Einrichtung.

MCP-Tools unter iOS

Geprüft mit chrome-devtools-mcp 1.12.0 gegen den iOS-Simulator und ein iPhone: 22 von 33 Tools funktionieren.

Funktioniert	Unter iOS nicht verfügbar
`list_pages`, `select_page`, `new_page`, `close_page`, `navigate_page`, `wait_for`	`get_css_styles`
`evaluate_script`, `take_screenshot` (auch ganze Seite), `take_snapshot`	`upload_file`, `resize_page`, `emulate`
`click`, `hover`, `fill`, `fill_form`, `type_text`, `press_key`, `drag`	`performance_*`, `take_heapsnapshot`
`list_console_messages`, `get_console_message`, `list_network_requests`, `get_network_request`	`handle_dialog`, `lighthouse_audit`
`screencast_start`, `screencast_stop`

close_page schließt nur Tabs, die ein Skript geöffnet hat.
screencast_start und screencast_stop brauchen --experimental-screencast und ffmpeg.
get_css_styles öffnet eine zweite DOM-Verbindung; WebKit nummeriert die Knoten dann neu, und ältere uids aus dem Snapshot sind veraltet.
Der Snapshot nähert Chromes Accessibility-Baum aus dem DOM an; Klicks und Eingaben sind synthetische DOM-Ereignisse.

Android- und Chrome-Targets sprechen selbst CDP und werden durchgereicht.

Puppeteer

import puppeteer from 'puppeteer-core';
const browser = await puppeteer.connect({
  browserURL: 'http://127.0.0.1:9222',
  defaultViewport: null,
  targetFilter: t => t.url().includes('example.com'),
});
const page = (await browser.pages()).find(p => p.url().includes('example.com'));
console.log(await page.evaluate(() => document.title));
await page.screenshot({ path: 'page.png' });
await browser.disconnect();

targetFilter verwenden: Auf echten Geräten pausiert Safari Hintergrund-Tabs, und das Anhängen an sie würde warten.
browser.disconnect() aufrufen, nie browser.close() – es ist dein Gerät.
browser.newPage() öffnet einen Safari-Tab; page.close() schließt Tabs, die ein Skript geöffnet hat.

VS Code

Den JavaScript-Debugger an eine Seite anhängen; Breakpoints in deinen Quellen greifen über Source Maps wie bei Desktop-Chrome:

{
  "type": "chrome",
  "request": "attach",
  "name": "Tapscope page",
  "port": 9222,
  "urlFilter": "https://example.com/*",
  "webRoot": "${workspaceFolder}"
}

Grenzen unter iOS