Nouveautés des outils de développement (Chrome 105)

Jecelyn Yeen

Relecture pas à pas dans l'Enregistreur

Vous pouvez désormais définir un point d'arrêt et revoir un parcours utilisateur étape par étape dans le panneau Enregistreur.

Pour définir un point d'arrêt, cliquez sur le point bleu à côté d'une étape. Relancez votre parcours utilisateur. La lecture s'interrompt avant l'exécution de l'étape. Vous pouvez ensuite poursuivre la lecture, exécuter une étape ou annuler la lecture.

Cette fonctionnalité vous permet de visualiser et de déboguer facilement votre flux utilisateur.

Pour en savoir plus, consultez la documentation de référence sur les fonctionnalités de l'Enregistreur.

Relecture pas à pas dans l'Enregistreur

Problème Chromium : 1257499

Prise en charge de l'événement de survol de la souris dans le panneau "Enregistreur"

L'Enregistreur permet désormais d'ajouter manuellement une étape de survol de la souris dans un enregistrement.

Cette démo montre un menu pop-up au survol. Essayez d'enregistrer un parcours utilisateur et de cliquer sur un élément de menu.

Si vous rejouez le parcours utilisateur maintenant, il échouera, car l'enregistreur ne capture pas automatiquement les événements de survol de la souris pendant l'enregistrement. Pour résoudre ce problème, ajoutez manuellement une étape pour pointer sur le sélecteur avant de cliquer sur l'élément de menu.

Prise en charge de l'événement "mouse over" dans l'enregistreur

Problème Chromium : 1257499

Largest Contentful Paint (LCP) dans le panneau "Informations sur les performances"

Le LCP est une métrique importante, centrée sur l'utilisateur, qui permet de mesurer la vitesse de chargement perçue. Vous pouvez désormais identifier les chemins critiques et les causes racines d'un Largest Contentful Paint (LCP).

Dans un enregistrement des performances, cliquez sur le badge LCP dans la chronologie. Dans le volet Détails, vous pouvez consulter le score LCP, découvrir comment corriger les ressources qui ralentissent le LCP et afficher le chemin critique de la ressource LCP.

Consultez Insights sur les performances pour découvrir comment obtenir des insights exploitables et améliorer les performances de votre site Web grâce au panneau.

LCP dans le panneau "Informations sur les performances"

Problème Chromium : 1326481

Identifier les flashs de texte (FOIT, FOUT) comme causes racines potentielles des décalages de mise en page

Le panneau Insights sur les performances détecte désormais le flash de texte invisible (FOIT) et le flash de texte sans style (FOUT) comme causes fondamentales potentielles des changements de mise en page.

Pour afficher les causes potentielles d'un décalage de mise en page, cliquez sur une capture d'écran dans la piste Décalages de mise en page.

Consultez Optimiser le chargement et le rendu des WebFonts pour découvrir comment éviter les décalages de mise en page.

FOUT dans le panneau "Informations sur les performances"

Problèmes Chromium : 1334628, 1328873

Gestionnaires de protocoles dans le volet "Manifeste"

Vous pouvez désormais utiliser les outils de développement pour tester l'enregistrement du gestionnaire de protocoles d'URL pour les progressive web apps (PWA).

L'enregistrement du gestionnaire de protocoles d'URL permet aux PWA installées de gérer les liens qui utilisent un protocole spécifique (par exemple, magnet, web+example) pour une expérience plus intégrée.

Accédez à la section Protocol Handlers (Gestionnaires de protocoles) dans le volet Application > Manifest (Application > Manifeste). Vous pouvez consulter et tester tous les protocoles disponibles ici.

Par exemple, installez cette PWA de démonstration. Dans la section Gestionnaires de protocoles, saisissez "americano", puis cliquez sur Tester le protocole pour ouvrir la page du café dans la PWA.

Gestionnaires de protocoles dans le volet "Manifeste"

Problèmes Chromium : 1300613

Badge de calque supérieur dans le panneau "Éléments"

Utilisez le badge de couche supérieure pour comprendre le concept de couche supérieure et visualiser comment le contenu de la couche supérieure change.

L'élément <dialog> est récemment devenu stable dans les navigateurs. Lorsque vous ouvrez une boîte de dialogue, elle est placée dans une couche supérieure. Le contenu de premier niveau s'affiche au-dessus de tous les autres contenus.

Dans cette démonstration, cliquez sur Open dialog (Ouvrir la boîte de dialogue).

Pour vous aider à visualiser les éléments de la couche supérieure, les outils de développement ajoutent un conteneur de couche supérieure (#top-layer) à l'arborescence DOM. Elle se trouve après la balise de fermeture </html>.

Pour passer de l'élément conteneur de la couche supérieure à l'élément d'arborescence de la couche supérieure, cliquez sur le bouton Afficher à côté de l'élément ou de son arrière-plan dans le conteneur de la couche supérieure.

À côté de l'élément d'arborescence de la couche supérieure (par exemple, l'élément de boîte de dialogue), cliquez sur le badge top-layer pour accéder au conteneur de la couche supérieure.

Badge de calque supérieur dans le panneau &quot;Éléments&quot;

Problème Chromium : 1313690

Associer des informations de débogage Wasm au moment de l'exécution

Vous pouvez désormais joindre des informations de débogage DWARF pour wasm lors de l'exécution. Auparavant, le panneau Sources ne permettait que d'associer des cartes sources aux fichiers JavaScript et Wasm.

Ouvrez un fichier Wasm dans le panneau Sources. Effectuez un clic droit dans l'éditeur, puis sélectionnez Ajouter des informations de débogage DWARF… pour joindre des informations de débogage à la demande.

ALT_TEXT_HERE

Problème Chromium : 1341255

Prise en charge de la modification en direct pendant le débogage

Vous pouvez désormais modifier la fonction la plus haute de la pile sans redémarrer le débogueur.

Dans Chrome 104, les outils de développement restaurent la fonctionnalité Redémarrer le frame. Toutefois, vous ne pouvez pas modifier la fonction dans laquelle vous êtes actuellement en pause. Il est courant que les développeurs insèrent un point d'arrêt dans une fonction, puis la modifient pendant qu'elle est en pause.

Avec cette mise à jour, le débogueur redémarre automatiquement la fonction avec les restrictions suivantes :

  • Seule la fonction la plus haute peut être modifiée lorsqu'elle est en pause.
  • Aucun appel récursif sur la même fonction plus bas dans la pile

Modification en temps réel pendant le débogage

Problème Chromium : 1334484

Afficher et modifier @scope au niveau des règles dans le volet "Styles"

Vous pouvez désormais afficher et modifier les règles @@scope CSS dans le volet Styles.

Les règles @scope font partie de la spécification CSS Cascading and Inheritance Level 6. Ces règles permettent aux développeurs de définir des règles de style dans CSS.

Ouvrez cette page de démonstration et inspectez le lien hypertexte dans l'élément <div class=”dark-theme”>. Dans le volet Styles, affichez les règles @scope. Cliquez sur la déclaration de règle pour la modifier.

@scope au niveau des règles dans le panneau &quot;Styles&quot;

Problème Chromium : 1337777

Améliorations apportées à la carte source

Voici quelques corrections apportées aux cartes sources pour améliorer l'expérience de débogage globale :

  • Les Outils de développement résolvent désormais correctement les identifiants de carte source avec ponctuation. Certains minificateurs modernes (par exemple, esbuild) produisent des cartes sources qui fusionnent les identifiants avec la ponctuation suivante (virgule, parenthèses, point-virgule).
  • Les outils de développement résolvent désormais les noms de cartes sources pour les constructeurs avec un appel super. ALT_TEXT_HERE
  • Correction de l'indexation des URL de la carte source pour les URL canoniques en double. Auparavant, les points d'arrêt n'étaient pas activés dans certains fichiers en raison d'URL canoniques en double.

Problèmes Chromium : 1335338, 1333411

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

  • Supprime correctement une paire clé/valeur de stockage local du tableau dans le volet Application > Stockage local lorsqu'elle est supprimée. (1339280)
  • Les aperçus des couleurs s'affichent désormais correctement lorsque vous consultez des fichiers CSS dans le panneau Sources. Auparavant, leurs positions étaient incorrectes. (1340062)
  • Afficher de manière cohérente les éléments flex et de grille CSS dans le volet Mise en page, ainsi que sous forme de badges dans le panneau Éléments. Auparavant, les éléments flex et de grille manquaient de manière aléatoire dans les deux emplacements. (1340441, 1273992)
  • Un nouveau lien Creator Ad Script (Script d'annonce du créateur) est disponible pour les frames d'annonces si les outils de développement ont trouvé le script qui a entraîné le libellé d'annonce pour le frame. Vous pouvez ouvrir un frame en accédant à Application > Frames. (1217041)

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.