Verbesserungen bei Service Workern

Die Tools "Netzwerk", "Anwendung" und "Quellen" wurden verbessert, um Ihnen bei der Arbeit mit Service Workern und den Netzwerkanforderungen zu helfen, die die einzelnen Service Worker durchlaufen.

Die Verbesserungen vereinfachen die folgenden Aufgaben:

• Debuggen basierend auf Service Worker-Zeitachsen.
  • Der Anfang einer Anforderung und die Dauer des Bootstrap.
  • Aktualisieren sie auf die 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 Verbesserungen umfassen die folgenden Tools:

• Das Netzwerktool . Wählen Sie eine Netzwerkanforderung aus, die über einen Service Worker ausgeführt wird, und greifen Sie im Zeitsteuerungstool auf die entsprechende Zeitachse des Service Workers zu.

• Das Anwendungstool . Verwenden Sie zum Debuggen von Service Workern die Seite 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:

1. Wählen Sie die Netzwerkanforderung aus, die einen Service Worker durchlaufen hat.
2. Ö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 anzuzeigen.

Anwendung

Zeitachse für Service Worker-Updates

Das Microsoft Edge DevTools-Team hat im Anwendungstool eine Zeitachse hinzugefügt, die den Updatelebenszyklus des Service Workers widerspiegelt. Auf dieser Zeitachse 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 auf die Zeitachsen von Service Workern zugreifen. Dieses Feature profitiert von der Leistung, minimiert die Duplizierung der Benutzeroberfläche und schafft eine umfassendere Debugerfahrung.

1. Öffnen Sie den Service Worker, den Sie debuggen.

2. Klicken Sie auf die Schaltfläche Netzwerk , um das Anforderungsrouting zu öffnen.

3. 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.