Debuggen progressiver Web-AppsDebug Progressive Web Apps

Verwenden Sie den Anwendungsbereich, um Web-App-Manifeste, Servicemitarbeiter und Dienstmitarbeitercaches zu überprüfen, zu ändern und zu debuggen.Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.

In diesem Handbuch werden nur die Progressive Web App-Features des Anwendungsbereichs erläutert.This guide only discusses the Progressive Web App features of the Application panel.

ZusammenfassungSummary

  • Verwenden Sie den Manifestbereich, um Ihr Web-App-Manifest zu überprüfen und Add to Homescreen-Ereignisse auszulösen.Use the Manifest pane to inspect your web app manifest and trigger Add to Homescreen events.
  • Verwenden Sie den Bereich Service Workers für eine ganze Reihe von aufgabenbezogenen Aufgaben, z. B. aufheben der Registrierung oder Aktualisierung eines Diensts, Emulieren von Pushereignissen, Offlinemodus oder Beenden eines Dienstmitarbeiters.Use the Service Workers pane for a whole range of service-worker-related tasks, like unregistering or updating a service, emulating push events, going offline, or stopping a service worker.
  • Anzeigen des Dienstarbeitscaches im Cachespeicherbereich.View your service worker cache from the Cache Storage pane.
  • Aufheben der Registrierung eines Dienstmitarbeiters und Löschen aller Speicher und Caches mit einer einzelnen Schaltfläche wählen Sie aus dem Bereich Speicher löschen aus.Unregister a service worker and clear all storage and caches with a single button choose from the Clear storage pane.

Web-App-ManifestWeb app manifest

Wenn Sie möchten, dass Ihre Benutzer Ihre App ihren mobilen Startseiten hinzufügen können, benötigen Sie ein Web-App-Manifest.If you want your users to be able to add your app to their mobile homescreens, you need a web app manifest. Das Manifest definiert, wie die App auf dem Startbildschirm angezeigt wird, wo der Benutzer beim Starten vom Startbildschirm direkt angezeigt werden soll und wie die App beim Start aussieht.The manifest defines how the app appears on the homescreen, where to direct the user when launching from homescreen, and what the app looks like on launch.

Nachdem Sie Ihr Manifest eingerichtet haben, können Sie den Manifestbereich des Anwendungsbereichs verwenden, um es zu überprüfen.After you have your manifest set up, you may use the Manifest pane of the Application panel to inspect it.

Der Manifestbereich

  • Um die Manifestquelle zu sehen, wählen Sie den Link unter App-Manifestbeschriftung ( https://airhorner.com/manifest.json in der vorherigen Abbildung).To look at the manifest source, choose the link below App Manifest label (https://airhorner.com/manifest.json in the previous figure).
  • In den Abschnitten Identity und Presentation werden nur Felder aus der Manifestquelle in einer benutzerfreundlicheren Anzeige angezeigt.The Identity and Presentation sections just display fields from the manifest source in a more user-friendly display.
  • Im Abschnitt Symbole werden alle von Ihnen angegebenen Symbole angezeigt.The Icons section displays every icon that you've specified.

Service WorkersService workers

Servicemitarbeiter sind eine grundlegende Technologie in der zukünftigen Webplattform.Service workers are a fundamental technology in the future web platform. Dabei handelt es sich um Skripts, die im Hintergrund ausgeführt werden, getrennt von einer Webseite.They are scripts that the browser runs in the background, separate from a web page. Mit den Skripts können Sie auf Features zugreifen, die ohne eine Webseite oder Benutzerinteraktion wie Pushbenachrichtigungen, Hintergrundsynchronisierung und Offlineerfahrungen erforderlich sind.The scripts allow you to access features that without the need of a web page or user interaction, like push notifications, background sync, and offline experiences.

Der Bereich "Service Workers" im Bereich "Anwendung" ist der wichtigste Ort in DevTools zum Überprüfen und Debuggen von Servicemitarbeitern.The Service Workers pane in the Application panel is the main place in DevTools to inspect and debug service workers.

Der Bereich Service Workers

  • Wenn ein Dienstmitarbeiter auf der derzeit geöffneten Seite installiert ist, wird er in diesem Bereich aufgelistet.If a service worker is installed to the currently open page, then it is listed on this pane. In der vorherigen Abbildung ist beispielsweise ein Dienstmitarbeiter für den Bereich https://weather-pwa-sample.firebaseapp.com installiert.For example, in the previous figure, there is a service worker installed for the scope of https://weather-pwa-sample.firebaseapp.com.
  • Das Kontrollkästchen Offline versetzt DevTools in den Offlinemodus.The Offline checkbox puts DevTools into offline mode. Dies entspricht dem Offlinemodus, der über das Netzwerktool verfügbar ist, oder der Option Go offline im Befehlsmenü.This is equivalent to the offline mode available from the Network tool, or the Go offline option in the Command Menu.
  • Das Kontrollkästchen Beim Erneutladen aktualisieren erzwingt, dass der Dienstmitarbeiter bei jeder Seitenlast aktualisiert wird.The Update on reload checkbox forces the service worker to update on every page load.
  • Das Kontrollkästchen Netzwerkumgehung umgehen umgeht den Dienstmitarbeiter und zwingt den Browser, für angeforderte Ressourcen in das Netzwerk zu wechseln.The Bypass for network checkbox bypasses the service worker and forces the browser to go to the network for requested resources.
  • Die Schaltfläche Aktualisieren führt eine einmalaktualisierung des angegebenen Dienstmitarbeiters durch.The Update button performs a one-time update of the specified service worker.
  • Die Schaltfläche Push emuliert eine Pushbenachrichtigung ohne Nutzlast (auch als Tickle ) bekannt.The Push button emulates a push notification without a payload (also known as a tickle).
  • Die Schaltfläche Synchronisierung emuliert ein Hintergrundsynchronisierungsereignis.The Sync button emulates a background sync event.
  • Mit der Schaltfläche Aufheben der Registrierung wird die Registrierung des angegebenen Dienstmitarbeiters aufgehoben.The Unregister button unregisters the specified service worker. Weitere Informationen zum Aufheben der Registrierung eines Dienstmitarbeiters und zum Löschen von Speicher und Zwischenspeichern mit einer einzelnen Schaltfläche finden Sie unter Löschen des Speichers.Check out Clear storage for a way to unregister a service worker and wipe storage and caches with a single button choose.
  • Die Zeile Source informiert Sie, wann der derzeit ausgeführte Dienstmitarbeiter installiert wurde.The Source line tells you when the currently running service worker was installed. Der Link ist der Name der Quelldatei des Dienstmitarbeiters.The link is the name of the source file of the service worker. Wenn Sie den Link auswählen, werden Sie an die Quelle des Servicemitarbeiters übermittelt.Choosing on the link sends you to the source of the service worker.
  • In der Zeile Status wird der Status des Servicemitarbeiters angezeigt.The Status line tells you the status of the service worker. Die ID-Nummer neben dem grünen Statusindikator ( in der vorherigen Abbildung) ist für den #36 derzeit aktiven Service Worker.The ID number next to the green status indicator (#36 in previous figure) is for the currently active Service Worker. Neben dem Status wird eine Startschaltfläche (wenn der Dienstmitarbeiter beendet wird) oder eine Stoppschaltfläche (wenn der Dienstmitarbeiter ausgeführt wird) angezeigt.Next to the status, a start button (if the service worker is stopped) or a stop button (if the service worker is running) is displayed. Servicemitarbeiter sind so konzipiert, dass sie jederzeit vom Browser angehalten und gestartet werden.Service workers are designed to be stopped and started by the browser at any time. Das explizite Beenden des Dienstmitarbeiters mithilfe der Stoppschaltfläche kann dies simulieren.Explicitly stopping your service worker using the stop button may simulate that. Das Beenden des Dienstmitarbeiters ist eine hervorragende Möglichkeit, um zu testen, wie sich Ihr Code verhält, wenn der Dienstmitarbeiter wieder hoch startet.Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again. Aufgrund fehlerhafter Annahmen über den dauerhaften globalen Zustand werden häufig Fehler gemeldet.It frequently reveals bugs due to faulty assumptions about persistent global state.
  • Die Zeile Clients teilt Ihnen den Ursprung mit, auf den der Dienstmitarbeiter begrenzt ist.The Clients line tells you the origin that the service worker is scoped to. Die Fokusschaltfläche ist hauptsächlich hilfreich, wenn Sie das Kontrollkästchen Alle Anzeigen aktiviert haben.The focus button is mostly useful when you've enabled the show all checkbox. Wenn dieses Kontrollkästchen aktiviert ist, werden alle registrierten Servicemitarbeiter aufgelistet.When that checkbox is enabled, all registered service workers are listed. Wenn Sie die Fokusschaltfläche neben einem Servicemitarbeiter auswählen, der auf einer anderen Registerkarte ausgeführt wird, konzentriert sich Microsoft Edge auf diese Registerkarte.If you choose on the focus button next to a service worker that is running in a different tab, Microsoft Edge focuses on that tab.

Wenn der Dienstmitarbeiter Fehler verursacht, wird eine neue Bezeichnung namens Errors angezeigt.If the service worker causes any errors, a new label called Errors shows up.

DienstarbeitscachesService worker caches

Der Bereich Cachespeicher enthält eine schreibgeschützte Liste der Ressourcen, die mithilfe der Cache-API (Service Worker) zwischengespeichert wurden.The Cache Storage pane provides a read-only list of resources that have been cached using the (service worker) Cache API.

Cachespeicherbereich

Hinweis

Wenn Sie zum ersten Mal einen Cache öffnen und eine Ressource hinzufügen, erkennt DevTools die Änderung möglicherweise nicht.The first time you open a cache and add a resource to it, DevTools may not detect the change. Aktualisieren Sie die Seite, und zeigen Sie den Cache an.Refresh the page and to display the cache.

Wenn sie zwei oder mehr Caches geöffnet haben, werden die Caches im folgenden Dropdownmenü Cachespeicher angezeigt.If you have two or more caches open, the caches display under the following Cache Storage dropdown.

Dropdownliste Cachespeicher

KontingentverwendungQuota usage

Einige Antworten im Bereich Cachespeicher werden möglicherweise als "undurchsichtig" gekennzeichnet.Some responses within the Cache Storage pane may be flagged as being "opaque". Dies bezieht sich auf eine Antwort, die von einem anderen Ursprung abgerufen wird, z. B. aus einem CDN oder einer Remote-API, wenn CORS nicht aktiviert ist.This refers to a response retrieved from a different origin, like from a CDN or remote API, when CORS is not enabled.

Um ein Leck an domänenübergreifenden Informationen zu vermeiden, wird der Größe einer undurchsichtigen Antwort, die zum Berechnen von Speicherkontingentgrenzen verwendet wird (z. B. ob eine Ausnahme ausgelöst wird) und von der API gemeldet, ein erheblicher Abstand QuotaExceeded navigator.storage hinzugefügt.In order to avoid leakage of cross-domain information, significant padding is added to the size of an opaque response used for calculating storage quota limits (for example whether a QuotaExceeded exception is thrown) and reported by the navigator.storage API.

Die Details dieses Abstands variieren von Browser zu Browser, für Microsoft Edge bedeutet dies jedoch, dass die Mindestgröße, die eine einzelne zwischengespeicherte undurchsichtige Antwort zur Gesamtspeichernutzung beiträgt, ca. 7 MB beträgt.The details of this padding vary from browser to browser, but for Microsoft Edge, this means that the minimum size that any single cached opaque response contributes to the overall storage usage is approximately 7 megabytes. Denken Sie an den Abstand, wenn Sie bestimmen, wie viele undurchsichtige Antworten Zwischenspeicherung erfordern, da Speicherkontingentbeschränkungen möglicherweise viel früher überschritten werden, als Sie es basierend auf der tatsächlichen Größe der undurchsichtigen Ressourcen sonst erwarten.Remember the padding when determining how many opaque responses you want to cache, since you may easily exceed storage quota limitations much sooner than you otherwise expect based on the actual size of the opaque resources.

Verwandte Leitfäden:Related Guides:

Löschen des SpeichersClear storage

Der Bereich Speicher löschen ist ein sehr nützliches Feature bei der Entwicklung progressiver Web-Apps.The Clear Storage pane is a very useful feature when developing progressive web apps. In diesem Bereich können Sie die Registrierung von Servicemitarbeitern aufheben und alle Caches und Speicher mit einer einzigen Schaltfläche löschen.This pane lets you unregister service workers and clear all caches and storage with a single button choose.

Mit dem Microsoft Edge-Entwicklungstools-Team Kontakt aufnehmenGetting in touch with the Microsoft Edge DevTools team

Verwenden Sie die folgenden Optionen, um die neuen Features und Änderungen im Beitrag, oder andere Themen, die mit Entwicklungstools zu tun hat, zu diskutieren.Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Senden Sie Ihr Feedback über das Symbol Feedback senden, oder wählen Sie Alt+Shift+I (Windows, Linux) oder Option+Shift+I (macOS) in Entwicklungstools aus.Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet auf @EdgeDevTools.Tweet at @EdgeDevTools.
  • Senden Sie einen Vorschlag an The Web We Want.Submit a suggestion to The Web We Want.
  • Verwenden Sie den folgenden Feedback-Abschnitt, um Fehler in diesem Artikel zu melden.To file bugs about this article, use the following Feedback section.

Das Symbol „Feedback senden“ in den Microsoft Edge-Entwicklungstools

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden.Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
Die ursprüngliche Seite befindet sich hier und wird von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) verfasst.The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.This work is licensed under a Creative Commons Attribution 4.0 International License.