So debuggen Sie Web-Apps auf Android aus der Ferne

Das Web wird heute mehr auf Mobiltelefonen als auf Desktops durchsucht. Da sind die Geräte wirklich tragbar und die Bildschirmgrößen kleiner geworden. Wer also eine Webanwendung entwickelt, kommt um die Unterstützung von Mobiltelefonen (Android oder iOS) nicht herum. Defekte oder schlecht aussehende Websites auf mobilen Bildschirmen können Ihrem Ruf online wirklich schaden. Die Benutzererfahrung auf Telefonen unterscheidet sich vollständig von der auf dem Desktop. Daher müssen Entwickler die Anwendungen speziell so gestalten, dass sie sich an den mobilen Bildschirm anpassen.

Google Chrome Dev bietet Tools, mit denen Sie die Erfahrung auf dem Gerät überprüfen, debuggen und analysieren können, und Sie können die Chrome Dev-Tools auf Ihrem lokalen Computer verwenden, um Ihre Anwendung auf einem Mobilgerät zu debuggen. In diesem Tutorial erfahren Sie, wie Sie Ihren lokalen Entwicklungscomputer für das Remote-Debugging auf Android einrichten. Wir debuggen über eine USB-Verbindung zwischen Ihrem Mobilgerät und Ihrem lokalen Entwicklungscomputer.

Sie benötigen Folgendes, um mit dem Remote-Debugging fortzufahren:

1. Ein Android-Handy oder -Tablet, auf dem Chrome für Android 28 installiert ist (Sie können es installieren von hier).
2. Ein USB-Kabel zum Verbinden Ihres Android-Geräts mit Ihrem lokalen Entwicklungscomputer. Stellen Sie außerdem sicher, dass die erforderlichen Laufwerke installiert sind, um Ihr Android-Handy mit einem Computer zu verbinden.
3. Prüfen Sie die Liste der OEM-USB-Treiber und finden Sie die passenden Treiber für Sie heraus.
4. Chrome 28+ auf Ihrem lokalen Entwicklungscomputer installiert.
5. Stellen Sie sicher, dass die ADB Chrome-Erweiterung auf Ihrem lokalen Entwicklungscomputer installiert ist. Sie können es installieren von hier.

In diesem Tutorial verwenden wir ein Sony Xperia L (Android-Gerät) und Windows 7 auf unserem lokalen Entwicklungscomputer. Beginnen wir also mit dem Remote-Debugging:

1. Stellen Sie zunächst sicher, dass der Debug-Modus auf Ihrem Android-Gerät aktiviert ist

Wenn Sie dies nicht aktiviert haben, beziehen Sie sich bitte auf dies:

• Für Benutzer von Android 4.2 siehe: http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
• Der Rest kann sich beziehen auf: http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.

Weitere Informationen zum Einrichten von Android-Geräten für die Entwicklung finden Sie unter: http://developer.android.com/tools/device.html#setting-up.

2. Anschließen Ihres Android-Geräts

Verbinden Sie nun Ihr Android-Gerät mit einem USB-Kabel mit Ihrem lokalen Entwicklungscomputer. Sobald Sie Ihr Android-Gerät angeschlossen haben, müssen Sie das USB-Web-Debugging auf Ihrem Telefon aktivieren, indem Sie Chrome auf Ihrem Android starten -> Einstellungen -> Entwicklertools -> Wählen Sie USB-Web-Debugging aktivieren

Wenn Sie diese Option auswählen, wenn Sie aufgefordert werden, Ihre Verbindung mit dem Entwicklungscomputer zu bestätigen, wählen Sie OK.

3. Debuggen

Nach der Installation der ADB-Erweiterung sehen Sie neben dem Chrome-Menü ein graues Android-Symbol. Klicken Sie nun auf das Android-Symbol und wählen Sie -> ADB starten. Jetzt sollte es grün werden und die Anzahl der derzeit verbundenen Geräte anzeigen. Klicken Sie dann auf das Symbol und wählen Sie -> Inspektionsziele anzeigen. Dies sollte eine neue Registerkarte öffnen und die Anzahl der verbundenen Android-Geräte und die derzeit geöffneten Registerkarten darauf anzeigen.

Wählen Sie nun die Registerkarte aus der Liste aus, die Sie debuggen möchten. Dadurch wird ein neues Fenster mit den Entwicklertools geöffnet.

Untersuchen Sie nun ein Element der Seite, und das Element wird in Echtzeit im Chrome-Handy hervorgehoben.

Auf diese Weise können Sie die gerätespezifischen Fehler beheben, indem Sie von den Dev-Tools aus debuggen. Sie können Befehle von Dev-Tools ausführen, die im Chrome-Handy ausgeführt werden. Sehen Sie sich auch verschiedene Panels wie Netzwerk, Ressourcen, Zeitleiste, Profile, Audits an.

Jetzt können Sie mobilspezifische Fehler beheben und mobile Apps in Echtzeit debuggen, anstatt Ihre App auf dem Server bereitzustellen und dann von Ihrem Telefon darauf zuzugreifen und zu debuggen. Google Chrome Dev bietet diese Tools, die ein echtes Problem für Entwickler lösen, die gerätekompatible Apps erstellen.