Remote Debugging: Mobile Webseiten am PC oder Mac untersuchen

Beim Entwickeln von mobilen Webseiten kommt man irgendwann unweigerlich an den Punkt, an dem man auf dem Smartphone oder Tablet die Entwicklertools im Browser starten möchte, um das HTML und CSS genauer untersuchen zu können.

Dieser Beitrag zeigt Ihnen, wie Sie Webseiten auf Android- und iOS-Geräten mit den Browserentwicklertools auf einem PC oder Mac untersuchen können, und zwar weitgehend mit Bordmitteln und ohne die Installation zusätzlicher Software wie Android SDK, Adobe Edge Inspect oder Weinre (WEb INspector REmote).

Die Hardware

Bevor Sie loslegen, überprüfen Sie kurz die Hardware. Sie benötigen:

• Smartphone oder Tablet mit Android oder iOS
• USB-Kabel, um das Gerät mit dem Rechner zu verbinden
• Mac mit OS X oder PC mit Windows (oder beides)

Am besten funktioniert die im Folgenden beschriebene Vorgehensweise auf Macs unter OS X ab 10.8, denn dort können Sie ohne viel Aufwand sowohl iOS- als auch Android-Geräte untersuchen. Auf PCs hingegen kann man nur Androids debuggen und muss zunächst einen USB-Treiber für das Gerät installieren, was Windows in der Regel allerdings automatisch erledigt.

Remote Debugging mit Android-Geräten (für Win und OS X)

Zum Debuggen von Webseiten auf Androids benötigen Sie folgende Software:

• als Browser: Googles Chrome ab V28 auf beiden Geräten
• auf dem PC oder Mac die Chrome-Erweiterung ADB
• PC mit Windows (ideal 7) oder Mac mit OS X (ab 10.8)
• unter Windows: USB-Treiber für das Android-Gerät

Und los geht’s.

1. Die Chrome-Erweiterung ADB installieren

Im Chrome auf dem PC oder Mac installieren Sie zunächst die Erweiterung mit dem schönen Namen „ADB“, die innerhalb von Chrome die „Android Debug Bridge“ zur Verfügung stellt und Ihnen damit die Installation des kompletten Android SDK erspart.

Zur Installation der Erweiterung suchen Sie im Chrome Web Store einfach nach den Buchstaben „ADB“ oder klicken auf den Direktlink, den Sie weiter unten bei den „Links zum Beitrag“ finden. Unter Windows 8 klappt die Installation aus dem Chrome Webstore nicht, aber bei Github gibt es genaue Anweisungen zur manuellen Installation. Einen Link dazu finden Sie ebenfalls am Ende des Beitrags.

Nach der Installation der ADB-Extension finden Sie im Chrome rechts oben einen kleinen grauen Androiden.

Lesetipp: Windows 11 für Webentwickler 🐧: Die besten Tools und Tricks

2. Debugging auf dem Android-Gerät erlauben

Auf dem mobilen Gerät müssen Sie das Debugging gleich zwei Mal erlauben, und zwar einmal in den Einstellungen des Gerätes und einmal im mobilen Chrome. Gehen Sie zunächst in die Einstellungen des Gerätes und erlauben bei den Entwickler-Optionen das USB-Debugging.

Ab Android 4.2 sind die Entwickler-Optionen standardmäßig versteckt. Um sie einzublenden, rufen Sie in Einstellungen die Option Info zum Gerät (4.2) bzw. Über das Telefon (ab 4.3) auf. Dort tappen Sie dann sieben Mal auf die Buildnummer. Unglaublich aber wahr. Nach Absolvierung dieses Rituals gehen Sie wieder eine Seite zurück und finden dann dort die Entwickler-Optionen, in denen Sie wie oben beschrieben das USB-Debugging aktivieren können.

Starten Sie jetzt Chrome auf dem Android-Gerät und aktivieren Sie im Menü Einstellungen - Entwickler-Tools die Option Web-Debugging über USB, indem Sie auf die Option tappen und dann rechts oben den Schiebeschalter auf Ein stellen. [EDIT 2013-11-26: Falls diese Option nicht vorhanden sein sollte, machen Sie einfach mit Schritt 3 weiter. Siehe Kommentar weiter unten.]

Danach rufen Sie im mobilen Chrome die Seite auf, deren Quelltext Sie gleich am PC oder Mac untersuchen möchten.

3. Geräte verbinden und Quelltext untersuchen

Zum Verbinden der Geräte stöpseln Sie unter OS X einfach das USB-Kabel ein und bestätigen eventuelle Sicherheitsabfragen.
Auf dem Android-Gerät erscheint die Meldung Als Mediengerät verbunden und oben in der Statusleiste wird oben links das USB-Symbol sichtbar. Eine eventuelle Meldung „Es wurde keine Software auf Ihrem PC gefunden, die das Gerät erkennt“ können Sie ignorieren bzw. mit OK bestätigen. Es funktioniert trotzdem.

Unter Windows werden nach dem Einstöpseln des USB-Kabels zunächst die Treiber für das Android-Gerät installiert. Im Idealfall passiert dies automatisch und sie brauchen dafür nichts, außer ein paar Minuten Geduld. Falls die Installation aus irgendeinem Grunde nicht klappen sollte, müssen Sie den USB-Treiber für das Androidgerät manuell installieren. Einen Link für Windows OEM USB Treiber finden Sie am Ende des Beitrags.

Nach dem Verbinden der Geräte starten Sie im Chrome auf dem PC oder Mac die weiter oben installierte Erweiterung ADB, indem Sie zunächst auf den grauen Androiden klicken und dann auf den Befehl Start ADB. Daraufhin färbt sich der Android grün.

Klicken Sie auf das jetzt grüne Android-Symbol und wählen Sie im ADB-Menü die Option View Inspection Targets. Chrome öffnet die Seite chrome://inspect, auf der Sie eine URL eingeben und damit auf dem mobilen Chrome einen neuen Tab öffnen können. Darunter werden im mobilen Chrome bereits geöffnete Seite gelistet. Sie können sie untersuchen, indem Sie auf den Link Inspect hinter dem Namen der Seite klicken.

Die folgende Screenshot-Montage zeigt auf der linken Seite die Developer Tools im Chrome auf dem Desktop, in denen das HTML-Element für das Menü ausgewählt wurde. Auf der rechten Seiten sehen Sie, wie das auf dem Desktop-Chrome selektierte Element im Chrome auf dem Android-Gerät hervorgehoben wird. Änderungen in den Developer Tools auf dem Desktop werden live und in Farbe im mobilen Browser umgesetzt. Remote Debugging.

Remote Debugging mit iOS-Geräten (nur OS X)

Zu Analyse von Webseiten auf iOS-Geräten benötigen Sie mindestens iOS 6 und einen Mac. Der wesentliche Unterschied liegt darin, dass das Debugging im Safari stattfindet und nicht im Chrome.

Gleich zu Beginn der Hinweis, dass Sie statt eines echten iOS-Gerätes auch den in der Programmierumgebung Xcode enthaltenen iOS-Simulator benutzen können. Die folgenden Schritte können Sie also auch dann abarbeiten, wenn Sie gerade weder ein iPhone noch ein iPad zur Verfügung haben. Xcode selbst können Sie aus dem Appstore heraus installieren. Im Menü Xcode - Open Developer Tool wird dann der iOS-Simulator gestartet.

1. Im Safari die Entwicklertools aktivieren

Zunächst aktivieren Sie im Safari auf dem Mac und auf dem mobilen Gerät (oder im iOS-Simulator) die Entwicklertools. Auf dem Mac finden Sie dazu in den Einstellungen im Abschnitt Erweitert die Option Menü "Entwickler" in der Menüleiste anzeigen.

Im iOS-Gerät gehen Sie in die Einstellungen - Safari - Erweitert und aktivieren dort mit dem Schieberegler die Option mit dem unscheinbaren Titel Webinformationen. In der englischen Version heißt der Befehl Web Inspector.

2. Geräte verbinden und Quelltext untersuchen

In diesem Schritt verbinden Sie iOS-Gerät und Mac mit dem USB-Kabel. Danach öffnen Sie auf dem Mac den Safari und finden dort im Menü Entwickler relativ weit oben das per USB-Kabel angeschlossene Gerät und bzw. oder den iOS-Simulator.

Für die gefundenen Geräte werden alle im Safari geöffneten Webseiten angezeigt. Ein Klick auf die gewünschte Seite, und schon sehen Sie auf dem Mac die Entwicklertools mit dem Quelltext der auf dem mobilen Safari geöffneten Webseite. Auch hier werden Änderungen in den Entwicklertools auf dem Mac sofort im mobilen Safari umgesetzt.

Fazit

Das Debuggen von Webseiten auf mobilen Geräten von einem PC oder Mac aus ist auch ohne zusätzliche Software recht einfach möglich und erleichtert die Optimierung ganz enorm.

Links zum Beitrag

Remote Debugging für Android:
– Chrome downloaden
– Die Erweiterung ADB im Chrome Webstore
– ADB unter Windows 8 – manuelle Installation.
– Windows OEM USB Treiber für Android
– Artikel „Remote Debugging on Android“

Remote Debugging für iOS:
– Safari 7
– Xcode mit iOS Simulator
– Artikel „Using Web Inspector to Debug Mobile Safari“

Links zu weiteren Tools

• Android SDK
• Adobe Edge Inspect
• Weinre
• Firefox Remote Debugging

(dpe)