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.
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“.
USB-Debugging aktivieren
In den Entwickleroptionen gibt es eine Option „USB-Debugging“. Diese muss aktiviert werden.
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 .
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!
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 .
Ein Gedanke zu „Progressive Web Apps ( remote ) debuggen: Fehlersuche bei Android PWAs in Windows 11“