Dépannage et journalisation

Déboguer un service worker n'est pas facile. Vous devez gérer le cycle de vie, les mises à jour, les caches et les interactions entre tous ces éléments. Heureusement, tout comme Workbox facilite le développement de service worker, mais facilite également le débogage grâce à sa journalisation informative. Cette page présente certains des outils de débogage disponibles, et explique comment fonctionne la journalisation de Workbox et comment la configurer.

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 à faire vos premiers pas 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 disponibles dans les outils de développement de Chrome, ont été abordés plus tôt dans cette documentation, mais d'autres sont encore à découvrir:

Firefox

Les utilisateurs de Firefox peuvent consulter les ressources suivantes:

Safari

Safari dispose actuellement d'un ensemble plus limité d'outils pour les développeurs pour le débogage des service workers. Pour en savoir plus à leur sujet, consultez les ressources suivantes:

Journalisation de la boîte de travail

La journalisation informative constitue une amélioration importante de l'expérience développeur offerte par Workbox. Lorsque la journalisation est activée, Workbox consigne presque toutes ses activités de manière identifiable et fonctionnelle.

Capture d'écran des messages de journalisation de la boîte de travail dans la console des outils de développement de Chrome. Ils se distinguent des journaux de la console normaux grâce au badge Workbox. Chaque message peut être développé pour obtenir plus d'informations de débogage.

Les versions de développement de Workbox activent la journalisation par défaut, tandis que les versions de production la désactivent. La procédure pour basculer entre les versions de développement et de production diffère 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 génèrent 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 préalable, comme workbox-webpack-plugin, ou vous pouvez 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 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 Rollup, rollup-plugin-workbox accepte une option de configuration mode qui affecte également l'enregistrement d'éléments dans la console par Workbox. 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 ignoré lors du développement. Dans ce cas, le plug-in Workbox approprié pour votre bundler devrait 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

Même si les bundlers sont 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 meilleure solution.

Le module workbox-sw simplifie le chargement d'autres modules Workbox (par exemple, workbox-routing, workbox-precaching, etc.) depuis 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 à tout autre moment.

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ésactivez la journalisation des versions de développement dans n'importe quel workflow

Que vous utilisiez un bundler ou non, vous pouvez désactiver toute 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 bundler et qu'elle fonctionne que vous utilisiez directement workbox-sw ou que vous dépendiez d'un bundler pour empaqueter pour vous le service worker fourni par Workbox.

Informations supplémentaires

Si vous avez encore du mal à comprendre ce qui se passe chez un service worker comportant des bugs et que la journalisation ne suffit pas, 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 pour les contributions). 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 par la suite.