Web-Inspector

Ein Layout, das nur auf dem Handy kaputt ist, ein Button ohne Reaktion, eine H5-Seite, die weiß bleibt — am Rechner drückt man F12 und sieht sofort warum. Auf dem Handy bleibt meist nur alert, neu bauen, nochmal schauen. Der Web-Inspector hängt genau diese Entwicklerwerkzeuge an die echte Seite auf dem Gerät: Kabel rein, und Elements, Console, Sources, Network und Storage stehen am Rechner — ändern Sie einen Wert, rendert das Gerät sofort neu.

Web-Inspector beim Debuggen einer Android-Seite: links der laufende Gerätebildschirm, rechts das Elements-Panel mit den berechneten Styles

1. Die Arbeitsteilung mit der Paketerfassung

Beides braucht man, aber sie beantworten unterschiedliche Fragen:

	Paketerfassung	Web-Inspector
Beantwortet	Was lief über das Netzwerk	Was hat die Seite getan
Zeigt	Requests / Responses, Header, Body (entschlüsselt)	DOM-Baum, berechnete Styles, Konsolenfehler, Call-Stacks, Cookies und Storage
Typische Frage	Was liefert dieser Endpunkt zurück, stimmen die Parameter	Welche Zeile JavaScript hat diesen Request geschickt, warum greift der Style nicht

Die Erfassung zeigt den Request, aber nie, wer ihn ausgelöst hat; der Inspector setzt einen Breakpoint in Sources und führt zurück zu genau der Zeile. Beides steckt im selben Werkzeug, das Hin- und Herwechseln kostet nichts.

2. Einmalige Vorbereitung

Die drei Blöcke unten sind Alternativen — machen Sie den, der zu Ihrem Ziel passt, und das nur einmal.

iOS-Gerät

Kabel anstecken, Gerät entsperrt lassen, und den Web-Inspector-Schalter einschalten:

Safari: Einstellungen → Safari → Erweitert → Web-Inspector
Chrome: Chrome-Einstellungen → Inhaltseinstellungen → Web-Inspector

Dieser Schalter ist unter iOS der Schritt, der am häufigsten vergessen wird. Ohne ihn wird das Gerät zwar erkannt, aber die Seitenliste bleibt leer.

Android-Gerät

Kabel anstecken und USB-Debugging in den Entwickleroptionen aktivieren. Android-Emulatoren werden meist auch ohne Kabel erkannt.

Browser an diesem Rechner

Chrome oder Edge mit --remote-debugging-port=9222 starten, dann in der Seitenliste auf Aktualisieren klicken.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3. Auch eine Seite in einer App debuggen? Noch das hier

Für reine Browser-Tabs kann dieser Abschnitt übersprungen werden.

Eigene App: einmal im Code einschalten.

// Android: beim Start von Application oder Activity einmal aufrufen
WebView.setWebContentsDebuggingEnabled(true);

// Ab iOS 16.4: WKWebView prüfbar machen
webView.isInspectable = true

Fremde App, oder keine Code-Änderung: im Dialog „Seiten in Apps mit einbeziehen“ anhaken, dann stehen auch die Seiten laufender Apps in der Liste. Häkchen wieder raus, und es bleiben nur Browser-Tabs.

	Voraussetzung	Hinweis
Android	Ein gerootetes Gerät	Aktiviert WebView-Debugging bei laufenden Apps, kein Neu-Packen nötig
iOS	Nur entwicklersignierte Apps	Systembedingt — aus dem App Store installierte Apps sind ausgeschlossen

So oder so wird die App nie neu gebaut, signiert, oder ein Helfer auf dem Gerät installiert. Nach der Sitzung ist das Gerät wieder wie zuvor.

4. Debuggen starten

Ist das erledigt, besteht jede Sitzung nur noch daraus:

Neue Aufzeichnung → Ziel (Dieser Rechner / iOS / Android) → Methode „Web-Inspector“ → Aktualisieren → Seite wählen → Inspect

Dialog „Neue Aufzeichnung“ mit Android und der Methode Web-Inspector, nach Anhaken von „Seiten in Apps mit einbeziehen“ mit einer Liste debuggbarer Seiten

Die Seiten stehen nach zugehöriger App gruppiert, eine Seite in einer App ist so leicht von einem Browser-Tab zu unterscheiden.
Ein Klick auf Inspect öffnet vollwertige Entwicklerwerkzeuge im Browser am Rechner, verbunden mit genau dieser Seite auf diesem Gerät.
Beliebig viele gleichzeitig — ein Fenster pro Seite, alle live nebeneinander.

5. Was man sieht

Dieselben Panels, die man am Rechner jeden Tag benutzt — nur gerichtet auf die Seite auf dem Handy.

Panel	Was es kann
Elements	Der laufende DOM-Baum der Seite mit berechneten Styles, Vererbung und Box-Modell. Einen Wert ändern, und das Gerät rendert sofort neu — der schnellste Weg zu einem mobilen Layout-Bug
Console	Jeder Fehler und jedes Log der Seite, dazu eine Eingabezeile, die JavaScript direkt in dieser Seite auf diesem Gerät ausführt
Sources	Skripte und Stylesheets der Seite durchsehen, Breakpoints setzen, dem Call-Stack folgen und Variablen genau im Moment des Fehlers prüfen
Network	Jeder Request der Seite als Wasserfall: Status, Typ, Auslöser, Größe, Timing und Cache-Status, dazu Summen für Requests, übertragene Bytes, DOMContentLoaded und volle Ladezeit
Storage	Cookies nach Domain gruppiert mit Ablaufzeit, Secure, HttpOnly und SameSite, daneben localStorage und sessionStorage — der schnellste Weg, einen Login-Status-Bug aufzudröseln

Storage-Panel des Web-Inspectors: Cookie-Tabelle für eine auf einem iPhone geöffnete Seite mit Value, Domain, Ablaufzeit, Secure, HttpOnly und SameSite

Unter Android wird der laufende Gerätebildschirm neben den Panels gespiegelt und lässt sich mit der Maus klicken und scrollen — Prüfen und Bedienen passiert auf einem Bildschirm, ohne zwischen Handy und Tastatur zu wechseln.

6. Was unterstützt wird

	Dieser Rechner	iOS	Android
Browser-Tabs	✓	✓	✓
Seiten in Apps (WebView / WKWebView / H5)	✓	✓	✓
Emulator / Simulator	—	✓	✓
Elemente und Styles live prüfen und ändern	✓	✓	✓
Konsole, Breakpoints und Step-Through	✓	✓	✓
Netzwerk-Wasserfall für die Seite	✓	✓	✓
Cookies / localStorage / sessionStorage	✓	✓	✓
Live-Gerätebild neben den Panels	—	—	✓
Kein Zertifikat, kein Proxy einzurichten	✓	✓	✓

7. Es tut sich nichts? Erst das prüfen

Symptom	Meist	Was tun
Gerät erkannt, Seitenliste leer	Web-Inspector unter iOS aus, oder Gerät gesperrt	Abschnitt 2 befolgen, entsperrt lassen, dann Aktualisieren
Android zeigt keine App-internen Seiten	Debugging für diese WebView nie aktiviert	Eigene App: `setWebContentsDebuggingEnabled(true)` ergänzen; fremde App: „Seiten in Apps mit einbeziehen“ anhaken (Root nötig)
Eine bestimmte iOS-App taucht nie auf	Systembedingte Grenze	App-Store-Builds sind ausgeschlossen — nur entwicklersignierte Apps gehen
Lokaler Browser listet keine Seiten	Ohne Debug-Port gestartet	Chrome / Edge mit `--remote-debugging-port=9222` neu starten, dann Aktualisieren
Inspect tut sich nichts	Ein nicht unterstützter Browser	Android- und lokale Sitzungen brauchen Chrome, Edge oder Brave

8. Wann man ihn nutzt

Ein Fehler tritt nur auf dem Handy auf: Layout, Trefferbereiche, Schriftdarstellung.
Eine H5-Seite ist weiß oder kaputt und man braucht Konsolenfehler und Call-Stack.
Man will wissen, welches Skript einen Request geschickt hat — die Erfassung allein sagt es nicht.
Man jagt ein Login- oder Cache-Problem und muss sehen, was wirklich in Cookies und Storage steht.
Man debuggt H5 in einer App — gewöhnliche Werkzeuge geben hier gar nichts her.

Zurück zu Erste Schritte · Verwandt: Untersuchen und dekodieren · iOS-Erfassung · Android-Erfassung