Remote Debugging: Mobile Webseiten am PC oder Mac untersuchen

Kein Beitragsbild

Peter Müller

Ich bin Autor, Dozent und Webworker. Meine Spezialität ist es, komplizierte und...

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.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

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

01-chrome-adb-installed

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.

02-s2-usb-debugging-quer

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.]

03-s2-chrome-web-debugging-ein

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.

04-chrome-adb-view-targets

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.

05-chrome-devtools-desktop-webseite-mobile

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.

06-safari-einstellungen-erweitert

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.

07-ipad-einstellungen-safari-erweitert

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.

08-safari-entwicklermenü-ios-devices

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.

09-safari-devtools-ipad-simulator

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

(dpe)

Peter Müller

Ich bin Autor, Dozent und Webworker. Meine Spezialität ist es, komplizierte und 'trockene' Sachverhalte auf einfache und unterhaltende Weise darzustellen. Sie kennen mich vielleicht durch meine Bücher wie "Websites erstellen mit Contao 3", "Flexible Boxes" oder "Einstieg in CSS" (aka "das neue Little Boxes").

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Remote Debugging: Mobile Webseiten am PC oder Mac untersuchen – Dr. Web. […]

Jens Grochtdreis
Gast

Dank Deines Hinweises ist mein Android-Handy jetzt ein “Entwickler-Gerät”. Wer denkt sich sowas aus? Allerdings hat auch ein Neustart von Chrome bei mir keinen noch so gut versteckten Eintrag für USB-Debugging hervorgebracht. Kann es sein, dass man für den Browser ein paar Beschwörungsformeln murmeln muss, während man eine Jungfrau bei Vollmond opfert? Nur so ne Idee :-)

NicNac
Gast
Hallo, ich habe mich sehr über die Anleitung gefreut, leider kriege ich mein Samsung Tab2 mit Android 4.2.2 an einem Win7 Rechner nicht zum laufen. Es fängt schon damit an, dass er in der Systemsteuerung ein tragbares Gerät und kein anderes Device erkennt (was er bei einem Nexus zwar tut, mir das aber auch nicht mit Chrome verbindet) Ich habe auf dem Tablet und dem Win7 aktuelle Chrom-versionen, sogar noch die ADB-App, Microsoft installiert mir den Treiber des Tablets, USB-Device wird erkannt, USB-Debugging ist eingestellt… ich weiß nicht weiter. Ich habe sogar den Android-SDK Manager installiert… auch Beschwörungsformeln halfen nicht… Read more »
NicNac
Gast

Unser Systemadministrator hat sich heute des Problems angenommen. Als erstes stöpselte er mein per USB verbundenes Wacom Grafiktablett ab und über die Konsole erkannte er, dass ein nicht authorisiertes Gerät vorhanden war.
Debugging per USB auf dem Gerät einmal deaktiviert und wieder aktiviert und es erschien auf dem Gerät eine Popup-Meldung, dass ein Computer auf das Gerät zugreifen möchte und ob ich dies zulassen will. Check und voilá, unter Devices wird mein Gerät gelistet.

NicNac
Gast

Update. Es scheint doch nicht das Wacom Tablet zu sein, sofern per Konsole die platform-tools/adb-devices angesprochen werden, wird das Gerät ansprechbar. Die Tools muß ich jedesmal starten, schließe ich die Konsole, wird das Gerät unter Chrome bei den Devices ausgeblendet

wpDiscuz