Fehler bei Hintergrunddiensten beheben

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Der Bereich Hintergrunddienste in den Chrome DevTools enthält eine Reihe von Tools für die JavaScript-APIs, mit denen Ihre Website Updates senden und empfangen kann, auch wenn ein Nutzer Ihre Website nicht geöffnet hat. Ein Hintergrunddienst ist funktional einem Hintergrundprozess ähnlich.

Im Bereich Hintergrunddienste können Sie die folgenden Hintergrunddienste debuggen:

Die Chrome-Entwicklertools können Abruf-, Synchronisierungs- und Benachrichtigungsereignisse für drei Tage protokollieren, auch wenn die Entwicklertools nicht geöffnet sind. So können Sie dafür sorgen, dass Ereignisse wie erwartet gesendet und empfangen werden.

Neben Ereignissen von Hintergrunddiensten können die Entwicklertools Folgendes tun:

Hintergrundabruf

Mit der Background Fetch API kann ein Service Worker große Ressourcen wie Filme oder Podcasts zuverlässig als Hintergrunddienst herunterladen. So protokollieren Sie Ereignisse für den Hintergrundabruf für drei Tage, auch wenn DevTools geschlossen ist:

  1. Öffnen Sie die Entwicklertools, z. B. auf dieser Demoseite.

  2. Gehen Sie zu Anwendung > Hintergrunddienste > Hintergrundabruf und klicken Sie auf Aufzeichnen Aufzeichnen.

    Der Bereich „Hintergrundabruf“.

  3. Klicken Sie auf der Demoseite auf Assets lokal speichern. Dadurch werden einige Hintergrundabrufaktivitäten ausgelöst. In DevTools werden die Ereignisse in der Tabelle protokolliert.

    Ein Ereignisprotokoll im Bereich „Abruf im Hintergrund“.

  4. Klicken Sie auf ein Ereignis, um die Details im Bereich unter der Tabelle aufzurufen.

  5. Sie können DevTools schließen und die Aufzeichnung bis zu drei Tage lang laufen lassen. Klicken Sie auf Anhalten. Beenden, um die Aufnahme zu beenden.

Hintergrundsynchronisierung

Mit der Background Sync API kann ein offline Dienst-Worker Daten an einen Server senden, sobald eine zuverlässige Internetverbindung wiederhergestellt wurde. So zeichnen Sie Hintergrundsynchronisierungsereignisse für drei Tage auf, auch wenn DevTools geschlossen ist:

  1. Öffnen Sie die Entwicklertools, z. B. auf dieser Demoseite.

  2. Gehen Sie zu Anwendung > Hintergrunddienste > Hintergrundsynchronisierung und klicken Sie auf Aufzeichnen Aufzeichnen.

    Im Bereich „Hintergrundsynchronisierung“

  3. Klicken Sie auf der Demoseite auf Hintergrundsynchronisierung registrieren, um den entsprechenden Dienst-Worker zu registrieren, und dann auf Zulassen.

    Die Registrierung von Service Workern ist eine Hintergrundsynchronisierungsaktivität. In DevTools werden die Ereignisse in der Tabelle protokolliert.

    Ein Protokoll der Ereignisse im Bereich „Synchronisierung im Hintergrund“.

  4. Klicken Sie auf ein Ereignis, um die Details im Bereich unter der Tabelle aufzurufen.

  5. Sie können DevTools schließen und die Aufzeichnung bis zu drei Tage lang laufen lassen. Klicken Sie auf Anhalten. Beenden, um die Aufnahme zu beenden.

(Experimentelle) Eindämmung von Bounce-Tracking

Mit dem Test Eindämmung von Bounce-Tracking in Chrome können Sie den Status von Websites ermitteln und löschen, die offenbar websiteübergreifend mithilfe von Bounce-Tracking-Methoden erfassen. Sie können die Minderung von Tracking manuell erzwingen und eine Liste der Websites aufrufen, deren Status gelöscht wurde.

So erzwingen Sie Maßnahmen zur Risikominderung:

  1. Drittanbieter-Cookies in Chrome blockieren Gehen Sie zu Dreipunkt-Menü > Einstellungen > Sicherheit Datenschutz und Sicherheit > Cookies und andere Websitedaten > Optionsfeld ist ausgewählt. Drittanbieter-Cookies blockieren und aktivieren Sie diese Option.
  2. Legen Sie in chrome://flags für den Test Eindämmung von Bounce-Tracking die Option Mit Löschen aktiviert fest.
  3. Öffnen Sie die DevTools, z. B. auf der Demoseite, und gehen Sie zu Anwendung > Hintergrunddienste > Maßnahmen zur Minimierung von Ausstiegsverfolgungen.
  4. Klicken Sie auf der Demoseite auf einen Link, der zu einer Ausstiegsseite führt, und warten Sie 10 Sekunden, bis Chrome den Ausstieg erfasst. Auf dem Tab Probleme werden Sie über das bevorstehende Löschen des Status informiert.
  5. Klicken Sie auf Erzwingen, um den Status sofort zu löschen.

Unter „Eindämmung von Bounce-Tracking“ wird ein Status gelöscht.

Benachrichtigungen

Nachdem ein Service Worker eine Push-Nachricht von einem Server erhalten hat, verwendet er die Notifications API, um die Daten einem Nutzer anzuzeigen. So zeichnen Sie Benachrichtigungen für drei Tage auf, auch wenn die DevTools nicht geöffnet sind:

  1. Öffnen Sie die Entwicklertools, z. B. auf dieser Demoseite.

  2. Gehen Sie zu Anwendung > Hintergrunddienste > Benachrichtigungen und klicken Sie auf Aufzeichnen Aufzeichnen.

    Im Bereich „Benachrichtigungen“

  3. Klicken Sie auf der Demoseite auf Benachrichtigung planen und dann auf Zulassen.

  4. Warten Sie, bis die Benachrichtigung angezeigt wird. In DevTools werden die Benachrichtigungsereignisse in der Tabelle protokolliert.

    Ein Ereignisprotokoll im Bereich „Benachrichtigungen“.

  5. Klicken Sie auf ein Ereignis, um die Details im Bereich unter der Tabelle aufzurufen.

  6. Sie können DevTools schließen und die Aufzeichnung bis zu drei Tage lang laufen lassen. Klicken Sie auf Anhalten. Beenden, um die Aufnahme zu beenden.

Spekulative Ladevorgänge

Spekulative Ladevorgänge ermöglichen ein fast sofortiges Laden der Seite basierend auf von Ihnen definierten Spekulationsregeln. So können die meisten Seiten, auf die zugegriffen wird, vorab abgerufen und gerendert werden.

Beim Vorab-Caching wird eine Ressource im Voraus abgerufen. Beim Vorab-Rendering geht man noch einen Schritt weiter und rendert die gesamte Seite in einem ausgeblendeten Rendering-Prozess im Hintergrund.

Sie können spekulative Ladevorgänge im Bereich Anwendung > Hintergrunddienste > Spekulative Ladevorgänge beheben. Der Abschnitt enthält drei Ansichten:

  • Spekulative Ladevorgänge Enthält den spekulativen Status für die aktuelle Seite, die aktuelle URL, Seiten, die die aktuelle Seite spekulativ laden soll, und ihre Status.
  • Regeln Enthält die Regelsätze auf der aktuellen Seite im Bereich Elemente und den Gesamtstatus der Spekulationen.
  • Vermutungen Enthält eine Tabelle mit Informationen zu spekulativen Ladeversuchen und ihren Status. Wenn ein Versuch fehlgeschlagen ist, können Sie in der Tabelle darauf klicken, um detaillierte Informationen und den Grund für den Fehler zu sehen.

Auf dieser Demoseite können Sie das Debuggen von spekulativen Ladevorgängen ausprobieren:

  1. Öffnen Sie die DevTools auf der Seite und gehen Sie zu Anwendung > Hintergrunddienste > Spekulative Auslastungen. Wenn Sie keine spekulativen Ladevorgänge sehen, die von der Seite initiiert wurden, laden Sie sie neu.

    Die URLs, die von dieser Seite spekulativ geladen wurden, zwei erfolgreiche und ein fehlgeschlagener Vorgang.

  2. Auf der Startseite der Demo werden zwei Seiten vorab gerendert, eine jedoch nicht. Klicken Sie auf Alle Spekulationen anzeigen.

  3. Wählen Sie unter Vermutungen die Vermutung mit dem Status Fehler aus, um den Fehlergrund im Abschnitt mit detaillierten Informationen unten aufzurufen.

    Die fehlgeschlagene Spekulation wurde ausgewählt.

    In diesem Fall ist das Pre-Rendering fehlgeschlagen, weil es auf der Website keine /next3.html-Seite gibt.

  4. Öffnen Sie den Bereich Regeln und klicken Sie auf Status, um den Regelsatz unten aufzurufen. Wenn Sie auf den Link Regelsatz klicken, gelangen Sie zum Bereich Elemente. Dort sehen Sie, wo die Spekulationsregel definiert ist.

    Der Bereich „Regeln“ mit dem Link zum Regelsatz.

Eine ausführlichere Anleitung finden Sie unter Spekulationsregeln debuggen.

Push-Benachrichtigungen

Damit einem Nutzer eine Push-Benachrichtigung angezeigt werden kann, muss ein Dienstworker zuerst die Push Message API verwenden, um Daten von einem Server zu empfangen. Wenn der Dienst-Worker bereit ist, die Benachrichtigung anzuzeigen, verwendet er die Notifications API. So zeichnen Sie Push-Nachrichten für drei Tage auf, auch wenn DevTools geschlossen ist:

  1. Öffnen Sie die Entwicklertools, z. B. auf dieser Demoseite.

  2. Gehen Sie zu Anwendung > Hintergrunddienste > Push-Messaging und klicken Sie auf Aufzeichnen Aufzeichnen.

    Im Bereich „Push-Benachrichtigungen“

  3. Aktivieren Sie auf der Demoseite die Option Push-Benachrichtigungen aktivieren, klicken Sie auf Zulassen, wenn Sie dazu aufgefordert werden, geben Sie eine Nachricht ein und senden Sie sie. In den DevTools-Protokollen werden Push-Benachrichtigungsereignisse in die Tabelle gesendet.

    Ein Ereignisprotokoll im Bereich „Push-Messaging“.

  4. Klicken Sie auf ein Ereignis, um die Details im Bereich unter der Tabelle aufzurufen.

  5. Sie können DevTools schließen und die Aufzeichnung bis zu drei Tage lang laufen lassen. Klicken Sie auf Anhalten. Beenden, um die Aufnahme zu beenden.

Reporting API

Einige Fehler treten nur in der Produktion auf. Sie sehen sie nie lokal oder während der Entwicklung, weil echte Nutzer, Netzwerke und Geräte das Spiel verändern.

Angenommen, Ihre neue Website verwendet Drittanbietersoftware, die kritische Scripts über document.write() lädt. Neue Nutzer auf der ganzen Welt öffnen Ihre Website, haben aber möglicherweise eine langsamere Verbindung als die, mit der Sie getestet haben. Unbeknownst to you, your site starts breaking for them because Chrome intervenes against document.write() on slow networks. Alternativ sollten Sie auch auf eingestellte oder bald eingestellte APIs achten, die in Ihrer Codebasis verwendet werden.

Mit der Reporting API können Sie unter anderem nicht mehr unterstützte API-Aufrufe und Sicherheitsverstöße auf Ihrer Seite im Blick behalten. Sie können Berichte wie unter Webanwendung mit der Reporting API überwachen beschrieben einrichten.

So rufen Sie die Berichte auf, die von einer Seite generiert wurden:

  1. Klicken Sie auf chrome://flags/#enable-experimental-web-platform-features, aktivieren Sie Experimentelle Webplattformfunktionen und starten Sie Chrome neu.

  2. Öffnen Sie die DevTools und gehen Sie zu Anwendung > Hintergrunddienste > Reporting API. Auf dieser Demoseite finden Sie beispielsweise Berichte.

    In der Reporting API aufgeführte Berichte

Der Tab Reporting API ist in drei Teile unterteilt:

  • Die Tabelle Berichte mit den folgenden Informationen zu jedem Bericht:
    • URL, die zur Berichterstellung geführt hat
    • Art des Verstoßes
    • Status des Berichts
    • Zielendpunkt
    • Zeitstempel Generated at
    • Berichtstext
  • Im Vorschaubereich Berichtskörper Wenn Sie sich eine Vorschau des Berichtskörpers ansehen möchten, klicken Sie in der Berichtstabelle auf einen Bericht.
  • Der Bereich Endpunkte mit einer Übersicht über alle Endpunkte, die in der Kopfzeile Reporting-Endpoints konfiguriert sind.

Berichtsstatus

In der Spalte Status sehen Sie, ob der Bericht von Chrome erfolgreich gesendet wurde, gerade gesendet wird oder der Versand fehlgeschlagen ist.

Status Beschreibung
Success Der Browser hat den Bericht gesendet und der Endpunkt hat mit einem Erfolgscode geantwortet (200 oder ein anderer Erfolgscode 2xx).
Pending Der Browser versucht, den Bericht zu senden.
Queued Der Bericht wurde generiert und der Browser versucht noch nicht, ihn zu senden. Ein Bericht wird in einem der folgenden beiden Fälle als Queued angezeigt:
  • Der Bericht ist neu und der Browser wartet, bis weitere Berichte eintreffen, bevor er versucht, ihn zu senden.
  • Der Bericht ist nicht neu. Der Browser hat bereits versucht, diesen Bericht zu senden, ist aber fehlgeschlagen. Er wartet jetzt, bevor er es noch einmal versucht.
MarkedForRemoval Nach einigen weiteren Versuchen (Queued) hat der Browser aufgehört, den Bericht zu senden, und wird ihn bald aus der Liste der zu sendenden Berichte entfernen.

Berichte werden nach einiger Zeit entfernt, unabhängig davon, ob sie erfolgreich gesendet wurden oder nicht.