Debug achtergrondservices

Kayce Basques

Sofia Emelianova

De sectie Achtergrondservices in Chrome DevTools is een verzameling hulpmiddelen voor de JavaScript API's waarmee uw website updates kan verzenden en ontvangen, zelfs wanneer een gebruiker uw website niet open heeft. Een achtergrondservice is functioneel vergelijkbaar met een achtergrondproces .

In het gedeelte Achtergrondservices kunt u de volgende achtergrondservices debuggen:

• Achtergrond ophalen
• Achtergrondsynchronisatie
• Meldingen
• Speculatieve ladingen
• Pushberichten

Chrome DevTools kan gebeurtenissen met betrekking tot ophalen, synchroniseren en notificaties drie dagen lang vastleggen, zelfs wanneer DevTools niet geopend is. Dit kan u helpen te controleren of gebeurtenissen naar behoren worden verzonden en ontvangen.

Naast gebeurtenissen van achtergrondservices kan DevTools ook het volgende:

• Toont rapporten die Chrome al heeft verzonden of op het punt staat te verzenden via de Reporting API .
• Hiermee kunt u met één klik de back/forward-cache debuggen en testen .

Achtergrond ophalen

De Background Fetch API stelt een service worker in staat om betrouwbaar grote bestanden, zoals films of podcasts, als achtergrondservice te downloaden. Om gebeurtenissen van achtergronddownloads drie dagen lang te loggen, zelfs wanneer DevTools niet geopend is:

1. Open de ontwikkelaarstools op een pagina die gebruikmaakt van de Background Fetch API.

2. Ga naar Toepassing > Achtergrondservices > Achtergrond ophalen en klik. Dossier .

   

3. Activeer op je pagina een achtergrondactiviteit. DevTools registreert de gebeurtenissen in de tabel.

   

4. Klik op een evenement om de details ervan te bekijken in het veld onder de tabel.

5. U kunt DevTools sluiten en de opname maximaal drie dagen laten doorlopen. Om de opname te stoppen, klikt u op Stop .

Achtergrondsynchronisatie

De Background Sync API stelt een offline service worker in staat om gegevens naar een server te verzenden zodra er weer een betrouwbare internetverbinding is. Om gebeurtenissen van de achtergrondsynchronisatie gedurende drie dagen vast te leggen, zelfs wanneer DevTools niet geopend is:

1. Open DevTools , bijvoorbeeld op deze demopagina .

2. Ga naar Toepassing > Achtergrondservices > Achtergrondsynchronisatie en klik Dossier .

   

3. Klik op de demopagina op 'Achtergrondsynchronisatie registreren' om de betreffende service worker te registreren en klik op 'Toestaan' wanneer daarom wordt gevraagd.

   Opmerking: Zie Service workers voor meer informatie over het debuggen van service workers in DevTools.

   Het registreren van een service worker is een synchronisatieactiviteit op de achtergrond. DevTools registreert de gebeurtenissen in de tabel.

   

4. Klik op een evenement om de details ervan te bekijken in het veld onder de tabel.

5. U kunt DevTools sluiten en de opname maximaal drie dagen laten doorlopen. Om de opname te stoppen, klikt u op Stop .

(Experimentele) Beperkingen voor het volgen van terugkaatsingen

Let op: dit is een experimentele functie die beschikbaar is vanaf Chrome versie 115.

Met het experiment in Chrome om bounce-tracking tegen te gaan, kun je de status van sites identificeren en verwijderen die gebruikmaken van de bounce-trackingtechniek. Je kunt handmatig trackingbeperkingen afdwingen en een lijst bekijken van sites waarvan de status is verwijderd.

Om maatregelen ter beperking van het volgen van gegevens af te dwingen:

1. Blokkeer cookies van derden in Chrome . Ga naar de instellingen en schakel ze in. > Instellingen > Privacy en beveiliging > Cookies en andere sitegegevens > Blokkeer cookies van derden .
2. Stel in chrome://flags het experiment voor het beperken van Bounce-tracking in op 'Ingeschakeld met verwijdering' .
3. Open DevTools en ga naar Toepassing > Achtergrondservices > Maatregelen voor het opsporen van bounces .
4. Klik op een bounce-link en wacht (10 seconden) tot Chrome de bounce registreert. Het tabblad 'Problemen' waarschuwt je voor de aanstaande verwijdering van de status.
5. Klik op 'Geforceerd uitvoeren' om de status onmiddellijk te verwijderen.

Meldingen

Nadat een service worker een pushbericht van een server heeft ontvangen, gebruikt deze de notificatie- API om de gegevens aan een gebruiker weer te geven. Om notificaties drie dagen lang te loggen, zelfs wanneer DevTools niet geopend is:

1. Open DevTools

2. Ga naar Toepassing > Achtergrondservices > Meldingen en klik Dossier .

   

3. Klik op 'Melding plannen' en sta toe wanneer daarom wordt gevraagd.

4. Wacht tot de melding verschijnt. DevTools registreert de meldingsgebeurtenissen in de tabel.

   

5. Klik op een evenement om de details ervan te bekijken in het veld onder de tabel.

6. U kunt DevTools sluiten en de opname maximaal drie dagen laten doorlopen. Om de opname te stoppen, klikt u op Stop .

Speculatieve ladingen

Speculatieve laadmethoden maken een bijna onmiddellijke paginalading mogelijk op basis van speculatieregels die u zelf definieert . Hierdoor kan uw website de meest bezochte pagina's vooraf ophalen en renderen.

Prefetch haalt een bron van tevoren op, terwijl prerender een stap verder gaat en de hele pagina in een verborgen achtergrondproces rendert.

Je kunt speculatieve laadprocessen debuggen in het gedeelte Toepassing > Achtergrondservices > Speculatieve laadprocessen . Dit gedeelte bevat drie weergaven:

• Speculatieve laadtijden . Bevat de speculatieve status voor de huidige pagina, de huidige URL, de pagina's die de huidige pagina speculatief probeert te laden, en hun statussen.
• Regels . Bevat de regelsets op de huidige pagina in het paneel Elementen en de algemene status van speculaties.
• Speculaties . Bevat een tabel met informatie over pogingen tot speculatief laden en hun status. Als een poging is mislukt, kunt u erop klikken in de tabel om gedetailleerde informatie en de reden van de mislukking te bekijken.

Probeer het debuggen van speculatieve laadprocessen op deze prerender-demopagina :

1. Open de ontwikkelaarstools op de pagina en ga naar Toepassing > Achtergrondservices > Speculatieve laadprocessen . Als je geen speculatieve laadprocessen ziet die door de pagina zijn gestart, vernieuw de pagina.

   

2. De startpagina van de demo laadt twee pagina's vooraf, maar laadt er één niet. Klik op 'Alle speculaties bekijken' .

3. Selecteer in 'Speculaties' de speculatie met de status 'Mislukt' om de reden van de mislukking te zien in het gedeelte met gedetailleerde informatie onderaan.

   

   In dit geval is het vooraf renderen mislukt omdat de pagina /next3.html niet op de website aanwezig is.

4. Open het gedeelte Regels en klik op Status om de regelset onderaan te bekijken. Door op de link Regelset te klikken, ga je naar het paneel Elementen , waar je kunt zien waar de speculatieregel is gedefinieerd.

   

   Tip: Je kunt de regel niet op dit scherm of in het paneel Elementen aanpassen, omdat DevTools willekeurige DOM-wijzigingen niet bewaart tussen pagina-updates. Je moet de regel bij de bron aanpassen door een werkruimte in te stellen of de wijziging simuleren door de inhoud te overschrijven .

Zie voor een meer gedetailleerde handleiding 'Foutopsporingsregels debuggen' .

Pushberichten

Om een ​​pushmelding aan een gebruiker te tonen, moet een service worker eerst de Push Message API gebruiken om gegevens van een server te ontvangen. Wanneer de service worker klaar is om de melding weer te geven, gebruikt deze de Notifications API. Om pushberichten drie dagen lang te loggen, zelfs wanneer DevTools niet geopend is:

1. Open DevTools , bijvoorbeeld op deze demopagina .

2. Ga naar Toepassing > Achtergrondservices > Pushberichten en klik Dossier .

   

3. Schakel op de demopagina 'Pushmeldingen inschakelen' in, klik op 'Toestaan' wanneer daarom wordt gevraagd, typ een bericht en verzend het. DevTools registreert pushmeldingen in de tabel.

   

   Opmerking: Daarnaast kunt u in Applicatie > Service Workers op Push klikken om testmeldingen vanuit DevTools te verzenden.

4. Klik op een evenement om de details ervan te bekijken in het veld onder de tabel.

5. U kunt DevTools sluiten en de opname maximaal drie dagen laten doorlopen. Om de opname te stoppen, klikt u op Stop .

Rapportage-API

Sommige fouten doen zich alleen in de productieomgeving voor. Je ziet ze nooit lokaal of tijdens de ontwikkeling, omdat echte gebruikers, netwerken en apparaten de spelregels veranderen.

Stel bijvoorbeeld dat uw nieuwe website afhankelijk is van software van derden die document.write() gebruikt om cruciale scripts te laden. Nieuwe gebruikers over de hele wereld bezoeken uw site, maar ze hebben mogelijk een tragere internetverbinding dan waarmee u hebt getest. Zonder dat u het weet, begint uw site voor hen problemen te geven omdat Chrome ingrijpt tegen document.write() op trage netwerken. U kunt er ook voor kiezen om verouderde of binnenkort verouderde API's in uw codebase in de gaten te houden.

De Reporting API is ontworpen om u te helpen bij het monitoren van verouderde API-aanroepen, beveiligingsschendingen op uw pagina en meer. U kunt rapportage instellen zoals beschreven in Uw webapplicatie monitoren met de Reporting API .

Om de rapporten te bekijken die door een pagina zijn gegenereerd:

1. Ga naar chrome://flags/#enable-experimental-web-platform-features , stel 'Experimental Web Platform features' in op 'Enabled' en herstart Chrome.

2. Open DevTools en ga naar Toepassing > Achtergrondservices > Rapportage-API .

   

Het tabblad 'Rapportage-API' is onderverdeeld in drie delen:

• De tabel 'Rapporten' bevat de volgende informatie over elk rapport:
  • De URL die de rapportgeneratie heeft veroorzaakt.
  • Overtredingstype
  • Rapportstatus
  • Bestemmingseindpunt
  • Gegenereerd op tijdstempel
  • Rapportinhoud
• Het gedeelte met de voorbeeldweergave van de rapportinhoud . Om een ​​voorbeeld van de rapportinhoud te bekijken, klikt u op een rapport in de tabel met rapporten.
• De sectie 'Eindpunten' met een overzicht van alle eindpunten die zijn geconfigureerd in de kop Reporting-Endpoints .

Rapportstatus

In de kolom 'Status' ziet u of Chrome het rapport succesvol heeft verzonden, op het punt staat te verzenden of dat de verzending is mislukt.

Status	Beschrijving
Success	De browser heeft het rapport verzonden en het eindpunt heeft gereageerd met een succescode ( 200 of een andere succesresponscode 2xx ).
Pending	De browser probeert het rapport te verzenden.
Queued	Het rapport is gegenereerd, maar de browser probeert het nog niet te verzenden. Een rapport wordt in één van deze twee gevallen als Queued weergegeven: Het rapport is nieuw en de browser wacht af of er meer rapporten binnenkomen voordat het wordt verzonden. Het rapport is niet nieuw; de browser heeft al eerder geprobeerd dit rapport te verzenden, maar dat is mislukt. De browser wacht nu voordat hij het opnieuw probeert.
MarkedForRemoval	Na een tijdje opnieuw geprobeerd te hebben ( Queued ), is de browser gestopt met het verzenden van het rapport en zal het binnenkort uit de lijst met te verzenden rapporten verwijderen.

Rapporten worden na verloop van tijd verwijderd, ongeacht of ze succesvol zijn verzonden.

Belangrijk punt: De status Queued is niet altijd informatief, omdat deze niet precies aangeeft of het verzenden is mislukt of nog niet is geprobeerd. Het gebruik van korte rapportagevertragingen helpt: een rapport dat in dat geval Queued blijft staan, geeft waarschijnlijk aan dat het verzenden mislukt.