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

Rediffusion étape par étape 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 relecture sera mise en pause avant d'exécuter l'étape. À partir de là, vous pouvez poursuivre la relecture, exécuter une étape ou annuler la relecture.

Grâce à cette fonctionnalité, vous pouvez visualiser et déboguer entièrement votre flux utilisateur en toute simplicité.

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

Problème Chromium: 1257499

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

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

Cette démonstration montre un menu pop-up lorsque l'utilisateur pointe sur l'élément. Essayez d'enregistrer un flux utilisateur et cliquez sur un élément de menu.

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

Problème Chromium: 1257499

Largest Contentful Paint (LCP) dans le panneau "Insights 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 d'un Largest Contentful Paint (LCP).

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

Consultez l'article Informations sur les performances pour savoir comment obtenir des insights exploitables et améliorer les performances de votre site Web grâce au panel.

Problème Chromium: 1326481

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

Le panneau Informations sur les performances détecte désormais les flashs de texte invisible (FOIT) et les flashs de texte sans style (FOUT) comme causes potentielles de décalages de mise en page.

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

Consultez la section Optimiser le chargement et l'affichage des polices Web pour découvrir la technique permettant d'éviter les décalages de mise en page.

Problèmes Chromium: 1334628, 1328873

Gestionnaires de protocoles dans le volet du fichier manifeste

Vous pouvez désormais utiliser les outils de développement pour tester l'enregistrement du gestionnaire de protocole 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 ou web+example) pour une expérience plus intégrée.

Accédez à la section Gestionnaires de protocoles via Application > Volet Manifest (Manifeste). Vous pouvez consulter et tester tous les protocoles disponibles ici.

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

Problèmes Chromium: 1300613

Badge "Couche supérieure" dans le panneau "Éléments"

Utilisez le badge de la couche supérieure pour comprendre le concept de la couche supérieure et visualiser son évolution.

L'élément <dialog> est depuis peu stable dans tous 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 tout le reste du contenu.

Dans demo, cliquez sur Open dialog (Ouvrir la boîte de dialogue).

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

Pour passer de l'élément de 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 de l'arborescence de la couche supérieure (par exemple, l'élément de boîte de dialogue), cliquez sur le badge Couche supérieure pour accéder au conteneur de la couche supérieure.

Problème Chromium: 1313690

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

Vous pouvez désormais joindre des informations de débogage DWARF pour Wasm pendant l'exécution. Auparavant, le panneau Sources ne permettait d'associer que des mappages 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.

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 élevée de la pile sans redémarrer le débogueur.

Dans Chrome 104, les outils de développement restaurent la fonctionnalité de redémarrage du cadre. Cependant, vous n'avez pas pu modifier la fonction dans laquelle vous êtes actuellement mis en veille. Il est courant que les développeurs endommagent une fonction, puis la modifient lorsqu'elle est mise en pause.

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

• Seule la fonction de niveau supérieur peut être modifiée en pause
• Aucun appel récursif sur la même fonction plus bas dans la pile

Problème Chromium: 1334484

Afficher et modifier les règles @scope at dans le volet "Styles"

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

Le paramètre @scope au niveau des règles fait partie de la spécification de niveau 6 de CSS en cascade et d'héritage. Ces règles permettent aux développeurs de définir le champ d'application des règles de style dans CSS.

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

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:

• Désormais, les outils de développement résolvent correctement les identifiants de carte source en y ajoutant des signes de ponctuation. Certains outils de réduction modernes (par exemple, esbuild) produisent des mappages sources qui fusionnent les identifiants par le signe de ponctuation suivant (virgule, parenthèses, point-virgule).
• Les outils de développement résolvent désormais les noms de carte source pour les constructeurs avec un appel super.
• Correction de l'indexation des URL de mappage 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ème Chromium: 1335338, 1333411

Points importants divers

Voici quelques correctifs importants dans cette version:

• Supprimez correctement une paire clé-valeur de stockage local de la table dans Application > volet Stockage local lorsqu'il est supprimé. (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 égarées. (1340062).
• Affichez systématiquement les éléments CSS Flex et de grille dans le volet Mise en page, et affichez-les sous forme de badges dans le panneau Éléments. Auparavant, les éléments du circuit flexible et de la grille manquaient de manière aléatoire aux deux emplacements. (1340441, 1273992)
• Un nouveau lien vers le script d'annonce du créateur est disponible pour les frames d'annonces si les outils de développement ont trouvé le script ayant entraîné le libellé du frame en tant qu'annonce. Vous pouvez ouvrir un frame via Application > Cadres : (1217041).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement