La section Services en arrière-plan des outils pour les développeurs Chrome est un ensemble d'outils pour les API JavaScript qui 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 en arrière-plan est fonctionnellement semblable à un processus en arrière-plan.
La section Services en arrière-plan vous permet de déboguer les services en arrière-plan suivants:
- Récupération en arrière-plan
- Synchronisation en arrière-plan
- Notifications
- Chargements spéculatifs
- Messages push
Chrome DevTools peut consigner les événements de récupération, de synchronisation et de notification pendant trois jours, même lorsque DevTools n'est pas ouvert. 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 en arrière-plan, les outils de développement peuvent:
- Afficher les rapports que Chrome a déjà envoyés ou est sur le point d'envoyer à l'aide de l'API Reporting.
- Vous permet de déboguer et de tester le cache amélioré en un clic.
Récupération en arrière-plan
L'API Background Fetch permet à un service worker de télécharger de manière fiable de grandes ressources, comme des films ou des podcasts, en tant que service en 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:
- Ouvrez les outils pour les développeurs, par exemple sur cette page de démonstration.
Accédez à Application > Services en arrière-plan > Récupération en arrière-plan, puis cliquez sur
Enregistrer.
Sur la page de démonstration, cliquez sur Stocker les composants localement. Cela déclenche une activité de récupération en arrière-plan. DevTools consigne les événements dans le tableau.
Cliquez sur un événement pour afficher ses détails dans l'espace situé sous le tableau.
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:
- Ouvrez les outils pour les développeurs, par exemple sur cette page de démonstration.
Accédez à Application > Services en arrière-plan > Synchronisation en arrière-plan, puis cliquez sur
Enregistrer.
Sur la page de démonstration, cliquez sur Register background sync (Enregistrer la synchronisation en arrière-plan) pour enregistrer le service worker correspondant, puis sur Allow (Autoriser) lorsque vous y êtes invité.
L'enregistrement du service worker est une activité de synchronisation en arrière-plan. DevTools consigne les événements dans le tableau.
Cliquez sur un événement pour afficher ses détails dans l'espace situé sous le tableau.
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 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 consulter la liste des sites dont les états ont été supprimés.
Pour forcer les mesures d'atténuation du suivi:
- 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, puis activez cette option. - Dans
chrome://flags, définissez le test Mesures d'atténuation du suivi des rebonds sur Activé avec suppression. - Ouvrez DevTools, par exemple sur la page de démonstration, puis accédez à Application > Services en arrière-plan > Atténuation du suivi des rebonds.
- Sur la page de démonstration, cliquez sur un lien de rebond et attendez (10 secondes) que Chrome enregistre le rebond. L'onglet Problèmes vous avertit de la suppression prochaine de l'état.
- Cliquez sur Forcer l'exécution pour supprimer immédiatement l'état.
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 enregistrer les notifications pendant trois jours, même lorsque les outils de développement ne sont pas ouverts:
- Ouvrez les outils pour les développeurs, par exemple sur cette page de démonstration.
Accédez à Application > Services en arrière-plan > Notifications, puis cliquez sur
Enregistrer.
Sur la page de démonstration, cliquez sur Planifier une notification, puis sur Autoriser lorsque vous y êtes invité.
Attendez que la notification s'affiche. DevTools consigne les événements de notification dans la table.
Cliquez sur un événement pour afficher ses détails dans l'espace situé sous le tableau.
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 de page quasi instantané en fonction des règles de spéculation que vous définissez. Cela permet à votre site Web de précharger et de prérendre la plupart des pages consultées.
Le préchargement récupère une ressource à l'avance, tandis que le prérendu va plus loin et affiche l'intégralité de la page dans un processus de rendu en arrière-plan masqué.
Vous pouvez déboguer les charges spéculatives dans la section Application > Services d'arrière-plan > Charges spéculatives. Cette section contient trois vues:
- Chargements spéculatifs Inclut l'état spéculatif de la page actuelle, l'URL actuelle, les pages que la page actuelle tente de charger de manière spéculative et leurs états.
- Règles Contient les ensembles de règles de la page active dans le panneau Éléments et l'état général des spéculations.
- Spéculations Contient un tableau contenant des informations sur les tentatives de chargement spéculatif et leur état. Si une tentative a échoué, vous pouvez cliquer dessus dans le tableau pour afficher des informations détaillées et la raison de l'échec.
Essayez de déboguer les chargements spéculatifs sur cette page de démonstration:
Ouvrez DevTools sur la page, puis accédez à Application > Services d'arrière-plan > Chargements spéculatifs. Si aucune charge spéculative n'est lancée par la page, actualisez-la.
La page de démarrage de la démonstration prérend deux pages et ne parvient pas à en prérendre une. Cliquez sur Afficher toutes les spéculations.
Dans Hypothèses, sélectionnez l'hypothèse avec l'état Échec pour afficher la section Motif de l'échec avec des informations détaillées en bas.
Dans ce cas, le prérendu a échoué, car il n'y a pas de page
/next3.htmlsur le site Web.Ouvrez la section Rules (Règles) et cliquez sur Status (État) pour afficher l'ensemble de règles en bas de la page. Cliquez sur le lien Ensemble de règles pour accéder au panneau Éléments et voir où la règle de spéculation est définie.
Pour obtenir un tutoriel plus détaillé, 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 PushMessage 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 les outils de développement ne sont pas ouverts:
- Ouvrez les outils pour les développeurs, par exemple sur cette page de démonstration.
Accédez à Application > Services en arrière-plan > Messagerie push, puis cliquez sur
Enregistrer.
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. DevTools consigne les événements de notification push dans la table.
Cliquez sur un événement pour afficher ses détails dans l'espace situé sous le tableau.
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 localement ni pendant le développement, car les utilisateurs, les réseaux et les appareils réels changent la donne.
Par exemple, imaginons que votre nouveau site repose sur un logiciel tiers qui utilise document.write() pour charger des scripts critiques. De nouveaux utilisateurs du monde entier ouvrent votre site, mais leurs connexions peuvent être plus lentes que celles que vous avez utilisées lors des tests. À votre insu, votre site commence à planter pour eux, car Chrome intervient contre document.write() sur les réseaux lents. Vous pouvez également surveiller les API obsolètes ou bientôt obsolètes que votre codebase peut utiliser.
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 décrit dans Surveiller votre application Web avec l'API de création de rapports.
Pour afficher les rapports générés par une page:
- Accédez à
chrome://flags/#enable-experimental-web-platform-features, définissez Experimental Web Platform features (Fonctionnalités expérimentales de la plate-forme Web) sur Enabled (Activé) et redémarrez Chrome. Ouvrez DevTools, puis accédez à Application > Services en arrière-plan > API de création de rapports. 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 avec les informations suivantes sur chaque rapport :
- URL ayant entraîné la génération du rapport
- Type de non-conformité
- État du rapport
- Point de terminaison Destination
- Code temporel Generated at
- Corps du rapport
- Section d'aperçu du corps du rapport. Pour prévisualiser le corps d'un rapport, cliquez dessus dans le tableau des rapports.
- Section Points de terminaison avec un aperçu 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, s'il est sur le point de l'envoyer ou s'il a échoué.
| État | Description |
|---|---|
Success |
Le navigateur a envoyé le rapport et le point de terminaison a répondu avec un code de réussite (200 ou un autre code de réponse de réussite 2xx). |
Pending |
Le navigateur tente d'envoyer le rapport. |
Queued |
Le rapport a été généré et le navigateur ne tente pas encore de l'envoyer. Un rapport apparaît sous la forme Queued dans l'un des deux cas suivants :
|
MarkedForRemoval |
Après avoir réessayé pendant un certain temps (Queued), le navigateur a cessé d'essayer d'envoyer le rapport et va bientôt le supprimer de sa liste de rapports à envoyer. |
Les rapports sont supprimés au bout d'un certain temps, qu'ils aient été envoyés ou non.