Progressive Web Apps ( remote ) debuggen: Fehlersuche bei Android PWAs in Windows 11

In diesem Blogartikel erkläre ich, wie Sie eine progressive Web-App, die im Google-Betriebssystem Android installiert und genutzt werden kann, debuggen können.

Progressive Web-App – Was ist das?

Eine progressive Web-App ist eine Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Die Abkürzung für progressive Web-App ist PWA.
Eine PWA wird mit HTML, CSS und Javascript entwickelt. Durch sogenannte Service Worker ist es möglich, dass progressive Web-Apps ohne Internetverbindung genutzt werden können. Mithilfe einer Manifest-Datei ist es möglich, dass eine progressive Web-App genauso aussieht wie eine Native App. Progressive Web-Apps sind plattformunabhängig, das bedeutet, sie können auf allen Betriebssystemen eingesetzt werden.

Debuggen – Was ist das?

Debuggen bedeutet, das Entfernen von Fehlern. Im Fall von diesem Artikel geht es um das Entfernen von Fehlern in einer progressiven Web-App.

Progressive Web-Apps debuggen im Betriebssystem Android – das Problem

Um progressive Web-Apps debuggen zu können, benötigen Sie die Entwickler-Tools des Google Browser Chrome. Auf diese Entwickler-Tools kann im Betriebssystem Android nicht zugegriffen werden.

Die Lösung – Remote Debugging

Remote Debugging bedeutet, dass die progressive Web-App auf einem Android-Gerät, entweder Smartphone oder Tablet läuft und die Fehlersuche auf einem Computer oder Laptop stattfindet.

Das Bild zeigt Debugging von der PWA Marlems Camera auf dem Laptop in Windows 11
Debugging von der PWA Marlems Camera auf dem Laptop in Windows 11

Remote Debugging einer progressiven Web-App – Anleitung

In diesem Abschnitt gebe ich eine schrittweise Anleitung.

Entwickleroptionen aktivieren auf dem Android-Gerät

Sie müssen auf Ihrem Android-Smartphone oder Tablet die Entwickleroptionen aktivieren.
Unter Android 4.1 und niedriger ist der Bildschirm „Entwickleroptionen“ standardmäßig verfügbar. Unter Android 4.2 und höher müssen Sie diesen Bildschirm aktivieren. Um die Entwickleroptionen zu aktivieren, tippen Sie siebenmal auf die Option „Build-Nummer “.
Nachdem Sie das gemacht haben, gibt es auf Ihrem Android-Gerät in den „Einstellungen“ das Menü „Entwickleroptionen“.

Das Menü Entwickleroptionen auf einem Android-Smartphone
Menü Entwickleroptionen auf einem Android-Smartphone

USB-Debugging aktivieren

In den Entwickleroptionen gibt es eine Option „USB-Debugging“. Diese muss aktiviert werden.

Menü USB-Debugging in den Entwickleroptionen auf einem Android Smartphone
Menü USB-Debugging in den Entwickleroptionen auf einem Android Smartphone

chrome://inspect/#devices auf dem Computer / Laptop aufrufen

Öffnen Sie auf Ihrem Computer bzw. Laptop den Browser Google Chrome.
Öffnen Sie im Browser Google Chrome die Adresse chrome://inspect/#devices .

Das Bild zeigt Progressive Web Apps von meinem Android-Smartphone werden auf dem Laptop angezeigt
Das Bild zeigt progressive Web-Apps von meinem Android-Smartphone auf meinem Laptop an.

Android-Gerät mit Computer / Laptop per USB verbinden

Verbinden Sie Ihr Android Smartphone oder Tablet per USB mit Ihrem Computer / Laptop.
Jetzt müssen Sie auf Ihrem Android-Gerät die Meldung „USB Debugging zulassen?“ bestätigen.

Progressive Web-App zum debuggen auf Computer / Laptop auswählen

Nach einer kurzen Zeit des Wartens werden jetzt auf Ihrem Laptop / Computer im Browser Google Chrome alle progressive Web-Apps angezeigt, die auf Ihrem Android-Gerät installiert sind.
Bei der PWA die sie debuggen möchten klicken Sie auf den Link „inspect“. Nun öffnet sich ein neues Fenster. Auf der rechten Seite ist das Fenster von den Google Developer Tools. Hier können Sie wählen, ob Sie sich die Konsole oder den Quellcode anzeigen lassen. Im Quellcode können Sie, wie zum Beispiel in Visual Studio Code, Haltepunkte setzen und richtig debuggen.

Progressive Web-App auf dem Android-Gerät starten

Damit die progressive Web-App, die Sie debuggen möchten, auf Ihrem Computer / Laptop angezeigt wird, müssen Sie diese auf Ihrem Android-Gerät starten.
Wenn Sie jetzt auf Ihrem Android-Gerät die progressive Web-App bedienen, wird alles auf Ihrem Computer / Laptop übertragen. Es ist fantastisch!

Progressive Web App die in Android läuft wird im Browser Google Chrome in Windows 11 auf Fehler untersucht
Fehlersuche bei progressive Web-App, die in Android läuft, wird im Browser Google Chrome in Windows 11 angezeigt

Schlussbemerkung

Remote Debugging mit progressiven Web-Apps ist eine tolle Sache, um auf einem Windows Laptop oder Computer herauszufinden, welche Fehler bei einer progressiven Web-App im Betriebssystem Android auftreten.

Wenn Sie Fragen zu obige Themen haben schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.

Schreibe einen Kommentar