Service Worker-Verbesserungen
In diesem Artikel werden Verbesserungen der Entwicklertools für die Arbeit mit Service Workern und die Netzwerkanforderungen erläutert, die die einzelnen Service Worker durchlaufen. Die Service Worker-Verbesserungen sind in den Tools Netzwerk, Anwendung und Quellen enthalten.
Die Verbesserungen an Service Workern vereinfachen die folgenden Aufgaben:
- Debuggen basierend auf Service Worker-Zeitachsen.
- Der Anfang einer Anforderung und die Dauer des Bootstrap.
- Aktualisieren Auf Service Worker-Registrierung.
- Die Laufzeit einer Anforderung, die den Fetch-Ereignishandler verwendet.
- Die Laufzeit aller Abrufereignisse zum Laden eines Clients.
- Erkunden Sie die Laufzeitdetails von Fetch-Ereignishandlern, Installieren von Ereignishandlern und Aktivieren von Ereignishandlern.
- Schrittweises Ausführen und Deaktivieren des Fetch-Ereignishandlers mit Seitenskriptinformationen.
Die verbesserten Funktionen umfassen drei verschiedene Entwicklertools:
Das Netzwerktool . Wählen Sie eine Netzwerkanforderung aus, die über einen Service Worker ausgeführt wird, und greifen Sie im Zeitsteuerungstool auf die entsprechende Zeitleiste des Service Workers zu.
Das Anwendungstool . Navigieren Sie zum Debuggen der Service Worker zum Tool Service Worker .
Das Tool Quellen . Greifen Sie beim Schrittweisen Ausführen von Fetch-Ereignishandlern auf Seitenskriptinformationen zu.
Network
Sie können auf die Debugfunktionen des Service Workers im Netzwerktool auf eine der folgenden Arten zugreifen:
- Direkt im Netzwerktool .
- Gestartet im Anwendungstool .
Anforderungsrouting
Um das Anforderungsrouting einfacher zu visualisieren, zeigen Zeitachsen jetzt den Service Worker-Start und die respondWith Abrufereignisse an. So debuggen und visualisieren Sie eine Netzwerkanforderung, die über einen Service Worker übergeben wurde:
- Wählen Sie die Netzwerkanforderung aus, die einen Service Worker durchlaufen hat.
- Öffnen Sie das Zeitsteuerungstool .
Abrufen von Ereignissen
Um mehr über die respondWith Abrufereignisse zu erfahren, klicken Sie auf den Dropdownpfeil links neben .respondWith Klicken Sie auf die entsprechenden Dropdownpfeile, um weitere Details zu der ursprünglichen Anforderung und der empfangenen Antwort zu erhalten.
Anwendung
service worker update Zeitleiste
Das Microsoft Edge DevTools-Team hat eine Zeitleiste im Anwendungstool hinzugefügt, um den Updatelebenszyklus des Service Workers widerzuspiegeln. In diesem Zeitleiste werden die Installations- und Aktivierungsereignisse angezeigt. Jedes der Ereignisse verfügt über einen entsprechenden Dropdownpfeil, um Weitere Details zu erhalten.
Anforderungsrouting- und Abrufereignisse
Sie können jetzt über das Netzwerktool in der Konsolenschublade auf die Zeitachsen des Service Workers zugreifen. Dieses Feature profitiert von der Leistung, minimiert die Duplizierung der Benutzeroberfläche und schafft eine umfassendere Debugerfahrung.
Öffnen Sie den Service Worker, den Sie debuggen.
Klicken Sie auf die Schaltfläche Netzwerk , um das Anforderungsrouting zu öffnen.
Verwenden Sie die Dropdownpfeile "respondWith ", um Informationen zur Abrufereignisanforderung und -antwort abzurufen.
Das Netzwerktool zeigt die Netzwerkanforderungen an, die den Zu debuggende Service Worker durchlaufen haben. Der automatische Filter ist eine Möglichkeit, ihre Erkundung einzugrenzen.
Weitere Informationen finden Sie unter Anwendungstool zum Verwalten des Speichers.
Quellen
Um weitere Stapelinformationen zu finden, legen Sie einen Haltepunkt im Fetch-Handler fest. Die Details führen dazu, wo die Ressource im Seitenskript angefordert wird.
Wenn der Debugger innerhalb eines Abrufhandlers anhält, werden im Bereich auf der rechten Seite kombinierte Stapelinformationen angezeigt. Danach können Sie sich in den Stapelrahmen bewegen.
Zukünftige Arbeit
Das Microsoft Edge DevTools-Team plant, die Cachedetails weiter zu entwickeln, und untersucht weitere Möglichkeiten, die Service Worker-Debugerfahrung für Entwickler von progressiven Webanwendungen (PWA) zu verbessern.