Vom: 05.03.2013

Mobile Chrome am Desktop über USB debuggen

Wir beschäftigen uns derzeit start mit Responsive Design in HTML mit Media Queries. Insbesondere interessant ist für uns dabei das Verhalten der mobilen Geräte wie Tablets oder Smartphones. Leider gestaltet sich das Debuggen des HTML/CSS/Javascript sehr viel schwieriger bei mobilen Geräten als am Desktop, da die Konsole, wie sie zum Beispiel Firefox oder Chrome standardmäßig haben, nicht verwendbar ist. Die Nutzung würde sich mangels geeignetem Zeigegerät wie einer Maus und dem geringen Platz am Bildschirm sehr schwierig gestalten.

Debuggen mit Android

Google stellt allerdings für Android-Geräte mit dem USB-Debugging-Modus eine Möglichkeit bereit, den eigenen Browser Chrome anzuzapfen! Um das nutzen zu können, braucht man nur am Desktop ebenfalls den Chrome-Browser sowie das das Android Software Development Kit (SDK), welches unter http://developer.android.com/sdk/index.html heruntergeladen werden kann. Für uns interessant sind hierbei aber nur die Platform Tools.

USB Debugging aktivieren am mobilen Gerät

[caption id="attachment_732" align="alignright" width="168"]Hier aktiviert man das USB-Debugging Hier aktiviert man das USB-Debuggin[/caption] Um auf die Daten des Browsers zugreifen zu können, muss erst das Debugging aktiviert werden. Unter Android 4.x macht man dies in den Systemeinstellungen unter „Entwickleroptionen“ In diesem Menü macht man nun einen Haken bei "USB-Debugging"; fortan startet der Debugging-Modus, wenn das Gerät an USB angeschlossen wird. Es empfiehlt sich, den Modus nach dem Debugging wieder zu deaktivieren, da sich hier Angriffsflächen für Hackingversuche bieten, wenn das Gerät in falsche Hände gerät. Wenn man nun das Gerät an USB anschliesst, muss unter Umständen unter Windows noch der ADK (Android Debugging Kit) Treiber installiert werden, Linux kommt ohne weiteres Zutun klar.

Die Verbindung zum Browser des Mobilgeräts herstellen

Als nächstes muss die Verbindung zwischen dem Desktop und dem Browser des Mobilgeräts hergestellt werden. Dies erledigt das adb Programm der Platform-Tools:

$ cd adt-bundle-linux-x86_64/sdk/platform-tools 
$ ./adb forward tcp:9222 localabstract:chrome_devtools_remote

Wenn kein Fehler auftritt, steht nun unter dem Port 9222 des localhost der mobile Browser zur Verfügung.

Den mobilen Browser ansprechen

[caption id="attachment_730" align="alignright" width="300"]Der mobile Chrome kann am Desktop debugged werden Der mobile Chrome kann am Desktop debugged werden[/caption] Um den mobilen Browser anzusprechen, ruft man mit dem lokalen Chrome die URL http://localhost:9222 auf. Es erscheint eine Auswahl von aktuell vorhandenen Tabs am entfernten Browser, hier wählt man den Debug-Kandidaten aus. Es erscheint nun das Entwickler-Fenster, wie man es von Chrome gewohnt ist – nur dass man jetzt die Interna des entfernten Browsers sieht. Die Werkzeuge verhalten sich exakt wie zum lokalen Pendant; wenn man z.B. ein Node im DOM mit dem Mauszeiger überfährt, wird dieses im Browserfenster des Mobilgeräts hervorgehoben. Gibt es zum Thema „mobiles Debugging“ Fragen oder Anregungen? Wir freuen uns über Eure Kommentare!