Déboguer les services d'arrière-plan

Kayce Basques

Sofia Emelianova

La section Services d'arrière-plan des outils pour les développeurs Chrome regroupe des outils destinés aux API JavaScript. Elle permet à votre site Web d'envoyer et de recevoir des mises à jour même lorsqu'un utilisateur n'a pas ouvert votre site Web. Un service d'arrière-plan est fonctionnellement semblable à un processus d'arrière-plan.

La section Services d'arrière-plan vous permet de déboguer les services d'arrière-plan suivants:

• Récupération de l'arrière-plan
• Synchronisation en arrière-plan
• Notifications
• Chargements spéculatifs
• Messages push

Les outils pour les développeurs Chrome peuvent consigner les événements de récupération, de synchronisation et de notification pendant trois jours, même lorsqu'ils ne sont pas ouverts. Cela peut vous aider à vous assurer que les événements sont envoyés et reçus comme prévu.

En plus des événements de service d'arrière-plan, les outils de développement peuvent:

• afficher les rapports que Chrome a déjà envoyés ou sur le point d'envoyer à l'aide de l'API Reporting ;
• Déboguer et tester le cache amélioré d'un simple clic

Récupération de l'arrière-plan

L'API Background Fetch permet à un service worker de télécharger de manière fiable des ressources volumineuses, telles que des films ou des podcasts, en tant que service d'arrière-plan. Pour consigner les événements de récupération en arrière-plan pendant trois jours, même lorsque les outils de développement ne sont pas ouverts:

1. Ouvrez les outils de développement, par exemple, sur cette page de démonstration.

2. Accédez à Application > Background services > Background fetch (Récupération en arrière-plan) et cliquez sur Record (Enregistrer).

   

3. Sur la page de démonstration, cliquez sur Stocker les composants en local. Cela déclenche une activité de récupération en arrière-plan. Les outils de développement consignent les événements dans la table.

   

4. Cliquez sur un événement pour en afficher les détails dans l'espace situé sous le tableau.

5. Vous pouvez fermer les outils de développement et laisser l'enregistrement s'exécuter pendant trois jours maximum. Pour arrêter l'enregistrement, cliquez sur Arrêter .

Synchronisation en arrière-plan

L'API Background Sync permet à un service worker hors connexion d'envoyer des données à un serveur une fois qu'il a rétabli une connexion Internet fiable. Pour consigner les événements de synchronisation en arrière-plan pendant trois jours, même lorsque les outils de développement ne sont pas ouverts:

1. Ouvrez les outils de développement, par exemple, sur cette page de démonstration.

2. Accédez à Application > Background services > Background sync (Application > Services d'arrière-plan > Synchronisation en arrière-plan) et cliquez sur Enregistrer.

   

3. Sur la page de démonstration, cliquez sur Enregistrer la synchronisation en arrière-plan pour enregistrer le service worker correspondant, puis cliquez sur Autoriser lorsque vous y êtes invité.

   L'enregistrement d'un service worker est une activité de synchronisation en arrière-plan. Les outils de développement consignent les événements dans la table.

   

4. Cliquez sur un événement pour en afficher les détails dans l'espace situé sous le tableau.

5. Vous pouvez fermer les outils de développement et laisser l'enregistrement s'exécuter pendant trois jours maximum. Pour arrêter l'enregistrement, cliquez sur Arrêter .

(Expérimental) Mesures d'atténuation du suivi des rebonds

Le test des mesures d'atténuation du suivi des rebonds dans Chrome vous permet d'identifier et de supprimer l'état des sites qui semblent effectuer un suivi intersites à l'aide de la technique de suivi des rebonds. Vous pouvez forcer manuellement les mesures d'atténuation du suivi et afficher la liste des sites dont les états ont été supprimés.

Pour forcer les mesures d'atténuation du suivi:

1. Bloquer les cookies tiers dans Chrome Accédez à > Paramètres > Confidentialité et sécurité > Cookies et autres données des sites > Bloquer les cookies tiers et activez-les.
2. Dans chrome://flags, définissez le test Mesures d'atténuation du suivi des rebonds sur Activé avec suppression.
3. Ouvrez les outils de développement, par exemple, sur la page de démonstration, puis accédez à Application > Services d'arrière-plan > Mesures d'atténuation du suivi des rebonds.
4. Sur la page de démonstration, cliquez sur un lien de non-distribution et attendez (10 secondes) que Chrome enregistre l'erreur. L'onglet Issues (Problèmes) vous avertit de la suppression prochaine de l'état.
5. Cliquez sur Forcer l'exécution pour supprimer l'état immédiatement.

Notifications

Une fois qu'un service worker a reçu un message push d'un serveur, il utilise l'API Notifications pour afficher les données à un utilisateur. Pour consigner les notifications pendant trois jours, même lorsque les outils de développement ne sont pas ouverts:

1. Ouvrez les outils de développement, par exemple, sur cette page de démonstration.

2. Accédez à Application > Background services > Notifications (Application > Services d'arrière-plan > Notifications), puis cliquez sur Record (Enregistrer).

   

3. Sur la page de démonstration, cliquez sur Programmer une notification et sur Autoriser lorsque vous y êtes invité.

4. Attendez que la notification s'affiche. Les outils de développement consignent les événements de notification dans la table.

   

5. Cliquez sur un événement pour en afficher les détails dans l'espace situé sous le tableau.

6. Vous pouvez fermer les outils de développement et laisser l'enregistrement s'exécuter pendant trois jours maximum. Pour arrêter l'enregistrement, cliquez sur Arrêter .

Chargements spéculatifs

Les chargements spéculatifs permettent un chargement quasi instantané des pages en fonction des règles de spéculation que vous définissez. Cela permet à votre site de précharger et de précharger les pages les plus visitées.

Le préchargement récupère une ressource à l'avance et le prérendu va plus loin et affiche la page entière dans un processus de rendu masqué en arrière-plan.

Vous pouvez déboguer les charges spéculatives dans la section Application > Services d'arrière-plan > Chargements spéculatifs. Cette section comporte trois vues:

• Chargements spéculatifs : Contient l'état spéculatif pour la page actuelle, l'URL actuelle, les pages que la page actuelle tente de charger de manière spéculative, ainsi que leurs états.
• Règles. Contient les jeux de règles de la page active dans le panneau Éléments, ainsi que l'état général des spéculations.
• Spéculations. Contient une table avec des informations sur les tentatives de chargement spéculatives et leur état. Si une tentative a échoué, vous pouvez cliquer dessus dans le tableau pour afficher des informations détaillées et le motif de l'échec.

Essayez de déboguer des chargements spéculatifs sur cette page de démonstration:

1. Ouvrez les outils de développement sur la page et accédez à Application > Services d'arrière-plan > Chargements spéculatifs. Si vous ne voyez aucun chargement spéculatif lancé par la page, actualisez-la.

   

2. La page de démarrage de la démo précharge deux pages, mais ne parvient pas à en précharger une. Cliquez sur Afficher toutes les spéculations.

3. Dans Speculations (Spéculations), sélectionnez la spéculation avec l'état Failure (Échec) pour afficher la section Failure reason (Motif de l'échec) avec des informations détaillées en bas de l'écran.

   

   Dans ce cas, le prérendu a échoué, car il n'y a pas de page /next3.html sur le site Web.

4. Ouvrez la section Règles et cliquez sur État pour afficher l'ensemble de règles au bas de la page. Cliquez sur le lien Jeu de règles pour accéder au panneau Éléments, où la règle de spéculation est définie.

   

Pour une procédure plus détaillée, consultez Déboguer les règles de spéculation.

Messages push

Pour afficher une notification push à un utilisateur, un service worker doit d'abord utiliser l'API Push Message pour recevoir des données d'un serveur. Lorsque le service worker est prêt à afficher la notification, il utilise l'API Notifications. Pour consigner les messages push pendant trois jours, même lorsque DevTools n'est pas ouvert:

1. Ouvrez les outils de développement, par exemple, sur cette page de démonstration.

2. Accédez à Application > Services d'arrière-plan > Push Messaging et cliquez sur Enregistrer.

   

3. Sur la page de démonstration, activez l'option Activer les notifications push, cliquez sur Autoriser lorsque vous y êtes invité, saisissez un message et envoyez-le. Les outils de développement consignent les événements de notification push dans la table.

   

4. Cliquez sur un événement pour en afficher les détails dans l'espace situé sous le tableau.

5. Vous pouvez fermer les outils de développement et laisser l'enregistrement s'exécuter pendant trois jours maximum. Pour arrêter l'enregistrement, cliquez sur Arrêter .

API Reporting

Certaines erreurs ne se produisent qu'en production. Vous ne les voyez jamais en local ni pendant le développement, car les vrais utilisateurs, réseaux et appareils changent la donne.

Par exemple, supposons que votre nouveau site s'appuie sur un logiciel tiers qui utilise document.write() pour charger des scripts critiques. De nouveaux utilisateurs du monde entier ouvrent votre site, mais leur connexion peut être plus lente que celle que vous avez testée. À votre insu, votre site commence à ne plus fonctionner car Chrome intervient contre document.write() sur les réseaux lents. Vous pouvez également garder un œil sur les API obsolètes ou qui le seront bientôt.

L'API Reporting est conçue pour vous aider à surveiller les appels d'API obsolètes, les cas de non-respect de la sécurité de votre page, etc. Vous pouvez configurer la création de rapports comme indiqué dans Contrôler votre application Web avec l'API Reporting.

Pour afficher les rapports générés par une page:

1. Accédez à chrome://flags/#enable-experimental-web-platform-features, définissez Fonctionnalités expérimentales de la plate-forme Web sur Activées, puis redémarrez Chrome.

2. Ouvrez les outils de développement, puis accédez à Application > Services d'arrière-plan > API Reporting. Par exemple, vous pouvez consulter les rapports sur cette page de démonstration.

   

L'onglet API Reporting est divisé en trois parties:

• Le tableau Rapports, qui contient les informations suivantes pour chaque rapport :
  • URL à l'origine de la génération du rapport
  • Type de non-conformité
  • État du rapport
  • Point de terminaison de destination
  • Généré au code temporel
  • Corps du rapport
• La section d'aperçu du corps du rapport. Pour prévisualiser le corps d'un rapport, cliquez sur un rapport dans le tableau des rapports.
• Section Points de terminaison avec une vue d'ensemble de tous les points de terminaison configurés dans l'en-tête Reporting-Endpoints

État du rapport

La colonne État indique si Chrome a bien envoyé le rapport, est sur le point de l'envoyer ou a échoué.

Les rapports sont supprimés au bout d'un certain temps, qu'ils aient été envoyés correctement ou non.