Améliorations apportées au Service Worker

Les outils Réseau, Application et Sources ont été améliorés pour vous aider à travailler avec les workers de service et les demandes réseau qui transitent par chaque worker de service.

Les améliorations simplifient les tâches suivantes :

  • Déboguer en fonction des chronologies de Service Worker.
    • Le début d’une demande et la durée du démarrage.
    • Mise à jour de l’inscription du Service Worker.
    • Exécution d’une requête à l’aide du gestionnaire d’événements fetch .
    • Runtime de tous les événements d’extraction pour le chargement d’un client.
  • Explorez les détails de l’exécution des gestionnaires d’événements fetch, de l’installation des gestionnaires d’événements et de l’activation des gestionnaires d’événements.
  • Pas à pas détaillé du gestionnaire d’événements fetch avec des informations de script de page.

Les améliorations couvrent les outils suivants :

  • Outil Réseau . Sélectionnez une requête réseau qui s’exécute via un worker de service et accédez à la chronologie correspondante du worker de service dans l’outil Minutage .

  • Outil Application . Pour déboguer les workers de service, utilisez la page Workers du service .

  • Outil Sources . Accédez aux informations de script de page lorsque vous effectuez un pas à pas dans des gestionnaires d’événements fetch.

Network

Chronologie du Service Worker dans l’outil Réseau

Vous pouvez accéder aux fonctionnalités de débogage de Service Worker dans l’outil Réseau de l’une des manières suivantes :

  • Directement dans l’outil Réseau .
  • Démarré dans l’outil Application .

Routage des requêtes

Pour faciliter la visualisation du routage des demandes, les chronologies affichent désormais le démarrage du Service Worker et les respondWith événements de récupération. Pour déboguer et visualiser une requête réseau transmise par un service Worker :

  1. Sélectionnez la requête réseau qui a transité par un service Worker.
  2. Ouvrez l’outil Minutage .

Récupérer des événements

Pour en savoir plus sur les événements d’extraction respondWith , cliquez sur la flèche déroulante à gauche du respondWith. Pour afficher plus d’informations sur la demande et la réponsed’origine reçues, cliquez sur les flèches de liste déroulante correspondantes.

Application

Vue d’application

Chronologie des mises à jour du Worker de service

L’équipe Microsoft Edge DevTools a ajouté une chronologie dans l’outil Application pour refléter le cycle de vie des mises à jour du service Worker. Cette chronologie affiche les événements d’installation et d’activation. Chacun des événements a une flèche déroulante correspondante pour vous donner plus de détails.

Routage des demandes et événements de récupération

Vous pouvez maintenant accéder aux chronologies du worker de service via l’outil Réseau . Cette fonctionnalité améliore les performances, réduit la duplication de l’interface utilisateur et crée une expérience de débogage plus complète.

  1. Ouvrez le service Worker que vous déboguez.

  2. Cliquez sur le bouton Réseau pour ouvrir l’expérience de routage des requêtes.

  3. Utilisez les flèches déroulantes respondWith pour récupérer les informations de demande et de réponse d’événement.

L’outil Réseau affiche les demandes réseau qui ont transité par le worker de service que vous déboguez. Le filtre automatique est un moyen d’affiner votre exploration.

Voir aussi Outil d’application, pour gérer le stockage.

Sources

Arborescence DOM

Pour trouver plus d’informations sur la pile, définissez un point d’arrêt dans le gestionnaire d’extraction. Les détails mènent à l’emplacement où la ressource est demandée dans le script de page.

Lorsque le débogueur s’interrompt à l’intérieur d’un gestionnaire de récupération, des informations de pile combinées s’affichent dans le panneau à droite. Après cela, vous pouvez vous déplacer dans les trames de pile.

Travaux futurs

L’équipe Microsoft Edge DevTools prévoit de développer davantage les détails du cache et étudie d’autres façons d’améliorer l’expérience de débogage de Service Worker pour les développeurs DWA (Progressive Web Application).