Déboguer des applications web progressives

Les applications web progressives (PWA) sont créées à l’aide de technologies web. Par conséquent, tous les outils disponibles dans Microsoft Edge DevTools sont également utiles pour les PWA. Pour en savoir plus, reportez-vous à la documentation Microsoft Edge DevTools.

Les PWA utilisent également des manifestes d’application web et peuvent utiliser des workers de service et d’autres fonctionnalités et API spécifiques qui nécessitent des outils de débogage spéciaux.

Ouvrir DevTools

Les PWA peuvent être installés localement et utilisés dans une fenêtre autonome, ou dans un navigateur web, tout comme un site web.

Vous pouvez ouvrir DevTools sur votre PWA de la même façon dans les deux cas. Pour ouvrir DevTools, utilisez l’une des méthodes suivantes :

• Cliquez avec le bouton droit sur un élément de l’interface utilisateur de l’application, puis sélectionnez Inspecter.
• Appuyez sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS).
• Appuyez sur F12.

Pour plus d’informations, consultez Ouvrir DevTools dans Vue d’ensemble de DevTools.

Tester vos modifications

Lorsque vous développez votre PWA, vous apportez des modifications à votre code source, puis vous les testez.

Le moyen le plus rapide de tester vos modifications consiste à charger votre PWA dans un navigateur web à l’aide de son URL de développement local, par exemple http://localhost:8080. Le test dans un navigateur est plus rapide, car vous n’avez pas besoin d’installer le PWA localement en premier.

Pour tester vos modifications, actualisez l’onglet du navigateur dans lequel la PWA est chargée en appuyant sur F5.

Une fois que vous avez un service Worker qui met en cache les fichiers statiques, appuyer sur F5 peut ne pas toujours recharger vos dernières modifications dans le navigateur. Pour forcer le navigateur à recharger vos modifications, utilisez l’une des méthodes suivantes :

• Ouvrez DevTools, cliquez avec le bouton droit sur Actualiser dans la barre d’outils du navigateur, puis cliquez sur Vider le cache et actualiser de manière définitive.
• Ouvrez DevTools, ouvrez l’outil Application , cliquez sur Workers de service, puis cochez la case Contourner pour le réseau .

Pour tester les fonctionnalités PWA activées en ajoutant du code dans votre manifeste d’application web, vous devez installer votre PWA. Si vous apportez ensuite d’autres modifications au manifeste de votre application web, vous devez désinstaller et réinstaller la PWA. Pour savoir comment désinstaller votre PWA, consultez Gestion des PWA dans Utiliser des applications web progressives dans Microsoft Edge.

Déboguer votre worker de service

Votre worker de service PWA est chargé de rendre votre application plus rapide et plus fiable pour les conditions réseau.

Le service Worker effectue cette opération en exécutant en parallèle à votre application et en interceptant les requêtes réseau. Il a son propre cycle de vie qui est indépendant du cycle de vie de votre application.

Pour vérifier si votre Service Worker a été installé correctement et quel état de son cycle de vie il se trouve actuellement, utilisez le volet Workers de service de l’outil Application . Pour plus d’informations, consultez Service Workers dans Déboguer des applications web progressives (PWA).

Pour déboguer le code JavaScript en cours d’exécution dans le thread de travail de service, à l’aide de points d’arrêt, basculez vers le thread de travail de service dans l’outil Sources . Pour plus d’informations, consultez Modifier le contexte de thread dans les fonctionnalités de débogage JavaScript.

Les workers de service peuvent s’exécuter même lorsque votre application n’est pas en cours d’exécution et exécuter des tâches en arrière-plan pour maintenir votre application à jour. Par exemple, ils peuvent extraire des données du serveur ou recevoir des messages Push.

Pour déboguer vos tâches de travail de service en arrière-plan, utilisez la section Services d’arrière-plan de l’outil Application . Pour plus d’informations, consultez Déboguer les services en arrière-plan.

Afficher le manifeste de votre application web

Le manifeste de votre application web définit le nom, la description, l’icône et les fonctionnalités de votre application. Le bon fonctionnement de ces fonctionnalités peut dépendre du fait qu’elles ont été correctement entrées dans le fichier JSON manifeste.

Pour vérifier si Microsoft Edge détecte votre fichier manifeste et les fonctionnalités qu’il contient, utilisez le volet Manifeste de l’outil Application . Pour plus d’informations, consultez Manifeste d’application web dans Déboguer des applications web progressives (PWA).

Certaines fonctionnalités de manifeste PWA ont des outils dédiés. Par exemple, vous pouvez tester la gestion du protocole PWA (Progressive Web App).

Afficher et modifier des données locales

Pour offrir une expérience riche et rapide à vos utilisateurs, votre PWA peut stocker des données localement. Pour afficher, modifier et supprimer les données stockées, reportez-vous à la documentation DevTools suivante, en fonction de l’option de stockage que vous avez choisie :

• Afficher les données du cache.
• Afficher et modifier les données IndexedDB.
• Afficher et modifier le stockage local.
• Afficher et modifier le stockage de session.

Pour afficher la quantité totale de données stockées utilisées par votre PWA, le quota disponible et supprimer les données, utilisez le volet Stockage de l’outil Application . Pour plus d’informations, consultez Stockage dans Debug Progressive Web Apps (PWA).

Simuler différentes tailles d’écran

Avec Progressive Web Apps, vous fournissez une application pour tous les appareils, à partir d’un code base. Pour vous assurer que votre application s’adapte à toutes les tailles d’écran de l’appareil, utilisez l’outil Émulation d’appareil dans DevTools.

Pour plus d’informations, consultez Émuler des appareils mobiles (émulation d’appareil).

Notez que l’outil d’émulation d’appareil n’est disponible que lorsque DevTools est utilisé dans le navigateur, et non lorsque DevTools est utilisé dans une PWA installée. Les PWA installées ont leurs propres fenêtres autonomes qui sont très faciles à redimensionner pour tester votre application sous différentes tailles d’écran.