Dépannage et journalisation

Le débogage d'un service worker est difficile. Vous gérez le cycle de vie, les mises à jour, les caches et l'interaction entre tous ces éléments. Heureusement, tout comme Workbox facilite le développement des service workers, il facilite également le débogage grâce à sa journalisation informative. Cette page présente quelques-uns des outils de débogage disponibles, le fonctionnement de la journalisation de Workbox et la manière dont elle peut être configurée.

Outils de dépannage disponibles

De nombreux outils sont disponibles dans le navigateur pour le débogage et le dépannage lors du développement d'un service worker. Voici quelques ressources pour vous aider à démarrer avec le navigateur de votre choix.

Chrome et Edge

Chrome (et les versions récentes d'Edge basées sur le moteur Blink) disposent d'un ensemble complet d'outils pour les développeurs. Certains de ces outils, en particulier ceux des outils pour les développeurs Chrome, ont été abordés plus tôt dans cette documentation, mais il y en a d'autres à découvrir:

Firefox

Les utilisateurs de Firefox peuvent consulter les ressources suivantes:

Safari

Actuellement, Safari propose un ensemble plus limité d'outils de développement pour le débogage des service workers. Pour en savoir plus, consultez les ressources suivantes:

Journalisation de la boîte de travail

La journalisation des informations proposée par Workbox est une amélioration clé de l'expérience des développeurs. Lorsque la journalisation est activée, Workbox enregistre presque toutes ses activités de manière distincte et fonctionnelle.

Capture d'écran des messages de journalisation Workbox dans la console des outils pour les développeurs Chrome. Ces messages de journalisation se distinguent des journaux normaux de la console par un badge "Workbox". Vous pouvez développer chaque message pour obtenir des informations de débogage supplémentaires.

Les versions de développement de Workbox activent la journalisation par défaut, tandis que les versions de production la désactivent. Pour basculer entre les versions de développement et de production, vous devez suivre différentes étapes selon que vous créez un groupe Workbox personnalisé ou utilisez une copie pré-groupée via workbox-sw.

Avec ou sans bundler

Les bundles sont des outils qui récupèrent le code de modules individuels et créent une sortie JavaScript prête à être exécutée dans le navigateur. Lorsque vous utilisez un bundler, vous pouvez également utiliser un plug-in Workbox spécifique à bundler qui facilite la mise en cache, comme workbox-webpack-plugin, ou simplement regrouper la logique de mise en cache de l'environnement d'exécution Workbox. Dans tous les cas, la journalisation de Workbox est influencée par la définition d'un mode de production dans la configuration du bundler:

  • Dans webpack, l'option de configuration mode peut être définie sur 'production' ou 'development'. workbox-webpack-plugin utilisera la journalisation de production ou de développement dans Workbox en fonction de cette valeur.
  • Pour le rattachement, rollup-plugin-workbox accepte une option de configuration mode qui détermine également si la boîte de travail enregistre quelque chose dans la console. Si vous utilisez la propriété de consolidation sans le plug-in spécifique à Workbox, vous devez configurer @rollup/plugin-replace pour remplacer process.env.NODE_ENV par 'development' ou 'production'.

Supposons que le comportement de journalisation par défaut doive être remplacé lors du développement. Dans ce cas, le plug-in Workbox approprié pour votre bundler doit vous permettre de coder en dur une préférence pour le débogage des journaux dans sa configuration. Par exemple, vous pouvez désactiver la journalisation dans Workbox via l'option mode de workbox-webpack-plugin pour la méthode GenerateSW.

Sans bundler

Bien que les bundlers soient excellents, tous les projets n'en ont pas besoin. Si vous souhaitez ajouter Workbox à un projet qui n'utilise pas de bundler, workbox-sw est la solution qu'il vous faut.

Le module workbox-sw simplifie le chargement d'autres modules Workbox (par exemple, workbox-routing, workbox-precaching, etc.) à partir d'un CDN. Le chargement des bundles de développement ou de production dépend de l'URL utilisée pour accéder à votre application Web. Par défaut, workbox-sw charge la version de développement de Workbox si votre application Web s'exécute sur http://localhost, et la version de production le reste du temps.

Vous pouvez ignorer le comportement par défaut en appelant la méthode setConfig de Workbox pour définir l'option debug sur true:

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

Désactiver la journalisation des builds de développement dans tous les workflows

Que vous utilisiez un bundler ou non, vous pouvez désactiver la journalisation dans les builds de développement en attribuant true à une variable self.__WB_DISABLE_DEV_LOGS spéciale dans votre service worker:

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

L'un des avantages de cette approche est qu'elle est complètement indépendante de votre configuration de bundler et fonctionne que vous utilisiez workbox-sw directement ou que vous dépendiez d'un bundler pour créer le package de votre service worker basé sur Workbox.

Informations supplémentaires

Si vous n'arrivez toujours pas à comprendre ce qui se passe chez un service worker présentant des bugs et que la journalisation n'est tout simplement pas suffisante, essayez de publier une question sur Stack Overflow avec le tag workbox. Si vous n'y trouvez pas de réponse, signalez un problème sur GitHub (après avoir lu les consignes de contribution). Cela permet non seulement à un large public de développeurs de lire vos questions et d'y répondre, mais la réponse à votre question peut aider quelqu'un qui se trouve dans la même situation plus tard.