So debuggen Sie Android-Web-Apps und -Websites in Linux

Das Debuggen von Websites und Web-Apps für mobile Geräte kann bei der Behebung von Problemen helfen und die Benutzererfahrung auf Handheld-Geräten verbessern. In diesem Artikel wird erläutert, wie Sie eine Website debuggen, die in einem Chrome-/Chromium-basierten Browser oder einer Webansicht auf einem Android-Gerät ausgeführt wird. Beachten Sie, dass Firefox auch Remote-Debugging von Android-Geräten unterstützt. Ich konnte es jedoch nicht auf meinem Linux-System zum Laufen bringen, daher behandelt der Artikel nur Anweisungen zum Debuggen von Websites/Web-Apps, die im Chrome-Browser oder Chrome/Chromium-basierten Webansichten auf einem Android-Gerät gerendert werden.

Um eine Webseite zu debuggen, die derzeit im Chrome-Browser oder in der Webansicht auf einem Android-Gerät angezeigt wird, müssen Sie das USB-Debugging aktivieren und Ihr Android-Gerät über ein USB-Kabel mit einem Linux-PC verbinden.

Aktivieren von USB-Debugging auf einem Android-Gerät

Der USB-Debugging-Schalter ist auf Android-Geräten unter dem versteckten Menü "Entwickleroptionen" zu finden. Um die Ansicht der Entwickleroptionen zu aktivieren, müssen Sie in den Systemeinstellungen 7 Mal auf den Eintrag „Build Number“ tippen. Da es zahlreiche Android-Geräte mit unterschiedlichen Benutzeroberflächen und Versionen gibt, gibt es keine festgelegte Standardmethode, um die Build-Nummer zu finden. Sie können die Suchleiste in den Android-Systemeinstellungen verwenden, um die Build-Nummernoption zu suchen und direkt zu ihr zu gehen, oder Sie können manuell in den Systemeinstellungen navigieren, um sie zu finden. Normalerweise liegt es im selben Menü, das die Linux-Kernel-Version auf einem Android-Gerät anzeigt.

Sobald Sie die Entwickleroptionen aktiviert haben, schalten Sie den Schalter für USB-Debugging um. Achten Sie darauf, keine anderen Einstellungen in den Entwickleroptionen zu berühren, da eine Fehlkonfiguration zu Systembrüchen führen kann. Als Referenz sieht die USB-Debugging-Option auf meinem Samsung Android-Gerät so aus:

Installieren der Android Debug Bridge (ADB) unter Linux

ADB ist ein offizielles Debugging-Tool von Google zum Debuggen von Android-Betriebssystemen und Android-Geräten. Es erleichtert den Datenaustausch und die Kommunikation zwischen einem PC und einem Android-Gerät. ADB ist für das Remote-Debugging einer Webseite erforderlich, die sich derzeit auf einem Android-Gerät befindet. Es wird auch verwendet, um die Verbindung Ihres Android-Geräts mit Ihrem Linux-PC zu authentifizieren und zu überprüfen.

Führen Sie den folgenden Befehl aus, um ADB unter Ubuntu zu installieren:

$ sudo apt install adb

ADB-Pakete sind standardmäßig auf fast allen großen Linux-Distributionen verfügbar. Wenn Sie eine andere Linux-Distribution als Ubuntu verwenden, suchen Sie im Paketmanager nach dem Begriff „ADB“ und installieren Sie ihn von dort aus.

Verbinden Sie nun Ihr Android-Gerät über ein USB-Kabel mit Ihrem Linux-System. Falls Sie Ihr Android-Gerät mit USB-Debugging zum ersten Mal anschließen, erhalten Sie eine Autorisierungsaufforderung auf Ihrem Android-Gerät prompt. Sie müssen es akzeptieren, um fortzufahren. Führen Sie den folgenden Befehl aus, nachdem Sie die Aufforderung akzeptiert haben, um den erfolgreichen Verbindungs- und Authentifizierungsstatus zu überprüfen:

$ adb-Geräte

Der Screenshot unten zeigt die Ausgabe des Befehls. Wenn Sie unter der Überschrift „Liste der angeschlossenen Geräte“ eine Seriennummer sehen, wurde eine erfolgreiche Verbindung hergestellt. Wenn sich neben der Seriennummer ein Schlüsselwort „nicht autorisiert“ befindet, trennen Sie das Gerät, schließen Sie es erneut an und akzeptieren Sie die Autorisierungsaufforderung erneut (Sie haben die Aufforderung möglicherweise übersehen oder versehentlich geschlossen).

Remote-Debugging einer mobilen Webseite im Chrome-Desktopbrowser

Geben Sie die URL „chrome://inspect/#devices“ in die Adressleiste von Chrome ein und drücken Sie die Eingabetaste. Aktivieren Sie das Kontrollkästchen „USB-Geräte erkennen“. Sie können jetzt eine Liste aller Websites/Web-Apps sehen, die in Chrome, Chromium oder jedem Chrome-/Chromium-basierten Browser oder Webview auf Ihrem Android-Gerät geöffnet sind.

Klicken Sie einfach auf den Link "Inspect", um mit dem Debuggen zu beginnen. Sie erhalten denselben vollständigen Satz an Entwicklertools, der zum Debuggen von Websites auf einem Desktop-PC verfügbar ist.

Beachten Sie, dass die Website oder Webapp, die Sie debuggen, auf Ihrem Android-Gerät sichtbar und live sein sollte. Wenn Sie Apps, Registerkarten wechseln oder den Bildschirm ausschalten, ist der Vorschaubereich möglicherweise ausgegraut.

Fazit

Das Anschließen Ihres Android-Geräts an einen Linux-PC für das Remote-Debugging von Websites ist ziemlich einfach und erfordert ein paar Schritte. Während Sie responsive Layouts debuggen und mobile Ansichten auf dem Desktop selbst simulieren können, ist das Remote-Debugging besonders nützlich, wenn Sie Hybrid-Apps für Android entwickeln oder Webansichten verwenden.