Freigeben über

Debuggen einer PWA

  • Artikel

Eine progressive Web-App (PWA) wird mithilfe von Webtechnologien erstellt. Daher sind alle in Microsoft Edge DevTools verfügbaren Tools auch für eine PWA hilfreich. Eine PWA verwendet auch ein Web-App-Manifest und kann Service Worker und andere spezifische Features und APIs verwenden, die spezielle Debugtools erfordern.

Siehe auch:

DevTools öffnen

Eine PWA kann lokal installiert und in einem eigenständigen Fenster oder in einem Webbrowser wie einer Website verwendet werden.

Sie können DevTools auf Ihrer PWA in beiden Fällen auf die gleiche Weise öffnen. Verwenden Sie zum Öffnen von DevTools eine der folgenden Methoden:

  • Klicken Sie mit der rechten Maustaste auf ein beliebiges Element in der Benutzeroberfläche der App, und wählen Sie dann Untersuchen aus.
  • Drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS).
  • Drücken Sie F12.

Weitere Informationen finden Sie unter Öffnen von DevTools in der Übersicht über DevTools.

Testen der Änderungen

Wenn Sie eine PWA entwickeln, nehmen Sie Änderungen am Quellcode vor und testen sie dann.

Die schnellste Möglichkeit zum Testen Ihrer Änderungen besteht darin, Ihre PWA in einem Webbrowser zu laden, indem Sie die lokale Entwicklungs-URL verwenden, z. B http://localhost:8080. . Das Testen in einem Browser ist schneller, da Sie die PWA nicht zuerst lokal installieren müssen.

Um Ihre Änderungen zu testen, aktualisieren Sie die Browserregisterkarte, auf der die PWA geladen wird, indem Sie F5 drücken.

Sobald Sie über einen Service Worker verfügen, der statische Dateien zwischenspeichert, werden Ihre neuesten Änderungen möglicherweise nicht immer durch Drücken von F5 im Browser neu geladen. Verwenden Sie eine der folgenden Methoden, um zu erzwingen, dass der Browser Ihre Änderungen erneut lädt:

  • Öffnen Sie DevTools, klicken Sie in der Browsersymbolleiste mit der rechten Maustaste auf Aktualisieren , und klicken Sie auf Leerer Cache und harte Aktualisierung.
  • Öffnen Sie DevTools, öffnen Sie das Anwendungstool , klicken Sie auf Service Worker, und aktivieren Sie dann das Kontrollkästchen Für Netzwerk umgehen .

Um PWA-Features zu testen, die durch Hinzufügen von Code in Ihrem Web-App-Manifest aktiviert werden, müssen Sie Ihre PWA installieren. Wenn Sie dann weitere Änderungen an Ihrem Web-App-Manifest vornehmen, müssen Sie die PWA deinstallieren und neu installieren. Informationen zum Deinstallieren Ihrer PWA finden Sie unter Verwalten von PWAs unter Verwenden von PWAs in Microsoft Edge.

Debuggen Ihres Service Workers

Ihr PWA-Servicemitarbeiter ist dafür verantwortlich, Ihre App schneller und zuverlässiger für Netzwerkbedingungen zu machen.

Der Service Worker führt dazu parallel zu Ihrer App aus und fängt Netzwerkanforderungen ab. Es verfügt über einen eigenen Lebenszyklus, der vom Lebenszyklus Ihrer App unabhängig ist.

Um zu überprüfen, ob Ihr Service Worker ordnungsgemäß installiert wurde und in welchem Lebenszyklus er sich derzeit befindet, verwenden Sie den Bereich Service Worker des Anwendungstools . Weitere Informationen finden Sie unter Service Worker in Debuggen einer progressiven Web-App (PWA).

Um den JavaScript-Code zu debuggen, der im Service Worker-Thread ausgeführt wird, wechseln Sie mithilfe von Haltepunkten im Quellentool zum Dienst-Workerthread. Weitere Informationen finden Sie unter Ändern des Threadkontexts in JavaScript-Debugfeatures.

Service Worker können auch dann ausgeführt werden, wenn Ihre App nicht ausgeführt wird, und Hintergrundaufgaben ausführen, um Ihre App auf dem neuesten Stand zu halten. Sie können beispielsweise Daten vom Server abrufen oder Pushnachrichten empfangen.

Verwenden Sie den Abschnitt Hintergrunddienste des Anwendungstools , um Ihre Dienstmitarbeiter-Hintergrundaufgaben zu debuggen. Weitere Informationen finden Sie unter Debuggen von Hintergrunddiensten.

Anzeigen ihres Web-App-Manifests

Ihr Web-App-Manifest definiert den Namen, die Beschreibung, das Symbol und die Features Ihrer Anwendung. Ob diese Features ordnungsgemäß funktionieren, kann davon abhängen, ob sie ordnungsgemäß in die JSON-Manifestdatei eingegeben wurden.

Um zu überprüfen, ob Microsoft Edge Ihre Manifestdatei und die darin enthaltenen Features erkennt, verwenden Sie den Bereich Manifest des Anwendungstools . Weitere Informationen finden Sie unter Web-App-Manifest in Debuggen einer progressiven Web-App (PWA).

Bestimmte PWA-Manifestfeatures verfügen über dedizierte Tools. Beispielsweise können Sie die Protokollbehandlung für progressive Web-App (PWA) testen.

Anzeigen und Bearbeiten lokaler Daten

Um Ihren Benutzern eine umfassende und schnelle Erfahrung zu bieten, kann Ihre PWA Daten lokal speichern. Informationen zum Anzeigen, Bearbeiten und Löschen der gespeicherten Daten finden Sie in der folgenden DevTools-Dokumentation, je nachdem, welche Speicheroption Sie ausgewählt haben:

Verwenden Sie den Bereich Speicher des Anwendungstools , um die Gesamtmenge der von Ihrer PWA verwendeten gespeicherten Daten, das verfügbare Kontingent anzuzeigen und die Daten zu löschen. Weitere Informationen finden Sie unter Storage in Debug a Progressive Web App (PWA).

Simulieren verschiedener Bildschirmgrößen

Mit Progressive Web-Apps stellen Sie eine App für alle Geräte aus einer Codebasis bereit. Um sicherzustellen, dass sich Ihre App an die Bildschirmgrößen aller Geräte anpasst, verwenden Sie das Tool Geräteemulation in DevTools.

Weitere Informationen finden Sie unter Emulate mobile devices (Device Emulation).

Beachten Sie, dass das Geräteemulationstool nur verfügbar ist, wenn DevTools im Browser verwendet wird, und nicht, wenn DevTools in einer installierten PWA verwendet wird. Installierte PWAs verfügen über eigene eigenständige Fenster, die sehr einfach zu ändern sind, um Ihre App unter verschiedenen Bildschirmgrößen zu testen.