Technologie / Know-How

Wer die Welt von morgen verstehen will, muss die Technologie von heute beherrschen.

+49 221 940 589-0

info@till.net

Online-Chat

Sie sind hier: Startseite > Technologie > HTML / Javascript > Remote Web Debugging unter Android und Chrome

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.

USB Debugging unter Android aktivieren

Einrichtung der Desktop Seite

Wir öffnen nun Chrome auf dem Destkop PC und fügen folgende Zeile in die Adressleiste ein: chrome://inspect/#devices

USB Debugging unter Chrome

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

USB Debugging unter Chrome 2

Das Inspizieren der Tabs wird über die interne Developer Tools des Chrome Browsers geregelt.

USB Debugging unter Chrome 3

Es können alle Funktionen der Developer Tools wie beim regulären Desktop Debugging verwendet werden.