Remote Web Debugging unter Android und Chrome
Dieser Artikel demonstriert eine einfache Möglichkeit mobile Webseiten und Projekte über eine Remote Verbindung zum Desktop PC hin zu debuggen und zu optimieren. Dazu sind folgende Voraussetungen nötig:
- USB Kabel
- Auf dem Smartphone aktiviertes USB Debugging
- Der Chrome Browser in einer aktuellen Version sowohl auf der Desktop Plattform als auch als App auf dem Smartphone
Verbinden von Smartphone und Desktop PC
Das Smartphone wird zunächst über USB mit dem Desktop PC verbunden. Hierbei ist darauf zu achten, dass die Treiber des Gerätes ordnungsgemäß installiert werden, da es sonst nicht erkannt werden könnte.
Aktivierung der USB Debugging Optionen
In den aktuellen Andriod Versionen ist das USB Debugging in den Optionen des mobilen Gerätes versteckt bzw. deaktiviert. Es muss zunächst über eine einfache Prozedur aktiviert werden. Die Anleitung zur Aktivierung der USB Debugging Optionen kann von Gerät zu Gerät abweichen. Man geht dabei grundsätzlich folgendermaßen vor:
Unter Einstellungen > Info > Software-Information (Klick auf Mehr) befindet sich ein Punkt Build Nummer. Dieser wird mehrmals (in der Regel 7 mal) angetippt, bis eine Meldung erscheint, dass man nun die Entwickler Optionen aktiviert hat. Nach erfolgreicher Freischaltung sollte der Bereich Entwickler Optionen in den Einstellungen zu finden sein. Hier lässt sich nun das USB Debugging einschalten.
Einrichtung der Desktop Seite
Wir öffnen nun Chrome auf dem Destkop PC und fügen folgende Zeile in die Adressleiste ein: chrome://inspect/#devices
Hier lässt sich nun das Erkennen von USB Geräten aktivieren. Nach der Aktivierung sollte nun auch das über USB Kabel angeschlossene Smartphone erkannt werden und sich mit einem Dialog zur Authorisierung melden.
Basisfunktionen
Die Basisfunktionen umfassen für jedes geöffnete Tab folgende Punkte:
- Inspect: Inspiziert das aktuelle Tab bzw. die geöffnete Seite
- Focus Tab: Bringt das aktuelle Tab in den Vordergrund
- Reload: Lädt das aktuelle Tab neu
- Close: Schließt das aktuelle Tab
Das Inspizieren der Tabs wird über die interne Developer Tools des Chrome Browsers geregelt.
Es können alle Funktionen der Developer Tools wie beim regulären Desktop Debugging verwendet werden.