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

Jecelyn Yeen

Replay par étapes 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 se met en pause avant d'exécuter l'étape. Vous pouvez alors continuer la lecture, exécuter une étape ou annuler la lecture.

Grâce à cette fonctionnalité, vous pouvez facilement visualiser et déboguer votre parcours utilisateur.

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

Replay par étapes 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 dans un enregistrement.

Cette démonstration montre un menu pop-up qui s'affiche lorsque l'utilisateur pointe sur l'élément. Essayez d'enregistrer un parcours utilisateur et de cliquer sur un élément de menu.

Si vous relancez 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 de survol de la souris 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 d'un Largest Contentful Paint (LCP).

Dans un enregistrement des performances, cliquez sur le badge LCP dans le 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 Performance Insights pour découvrir comment obtenir des insights exploitables et améliorer les performances de votre site Web à l'aide de ce panneau.

LCP dans le panneau "Informations sur les performances"

Problème Chromium: 1326481

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

Le panneau Insights sur les performances détecte désormais les clignotements de texte invisible (FOIT) et de texte non stylisé (FOUT) comme causes potentielles de décalages 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.

Erreur FOUT dans le panneau "Informations sur les performances"

Problèmes Chromium: 1334628, 1328873

Gestionnaires de protocoles dans le volet "Fichier manifeste"

Vous pouvez désormais utiliser DevTools 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 protocole) via le volet Application > Manifest (Application > Fichier 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 sur le café dans la PWA.

Gestionnaires de protocoles dans le volet "Fichier manifeste"

Problèmes Chromium: 1300613

Badge de la couche supérieure dans le panneau "Elements"

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

L'élément <dialog> est récemment devenu 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 tous les autres contenus.

Dans cette démonstration, cliquez sur Ouvrir une boîte de dialogue.

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

Pour passer de l'élément de conteneur de la couche supérieure à l'élément de l'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.

Badge de la couche supérieure dans le panneau &quot;Elements&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 au moment de l'exécution. Auparavant, le panneau Sources ne permettait d'associer des maps sources qu'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 temps réel 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, DevTools rétablit la fonctionnalité de redémarrage du frame. Toutefois, vous n'avez pas pu modifier la fonction dans laquelle vous êtes actuellement en pause. Il est courant que les développeurs arrêtent 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 la plus élevée peut être modifiée en mode pause
  • Aucun appel récursif de la même fonction plus loin dans la pile

modification en temps réel pendant le débogage

Problème Chromium: 1334484

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

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

Les règles at @scope font partie de la spécification CSS Cascading and Inheritance Level 6. Ces règles permettent aux développeurs de définir le champ d'application des règles de style en 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 at @scope. Cliquez sur la déclaration de règle pour la modifier.

@scope at rules in the Styles pane

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 des signes de ponctuation. Certains minificateurs modernes (par exemple, esbuild) génèrent des mappages sources qui fusionnent les identifiants avec la ponctuation ultérieure (virgule, parenthèses, point-virgule).
  • DevTools résout désormais les noms de carte source 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 de doublons d'URL canoniques.

Problème Chromium: 1335338, 1333411

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

  • Supprimez correctement une paire clé-valeur de stockage local de la table 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 mal placées. (1340062)
  • Affichez de manière cohérente les éléments CSS flex et grid dans le volet Mise en page, ainsi que sous forme de badges dans le panneau Éléments. Auparavant, les éléments flex et grid étaient manquants de manière aléatoire dans les deux emplacements. (1340441, 1273992)
  • Un nouveau lien Script publicitaire du créateur est disponible pour les frames d'annonces si DevTools a détecté le script qui a entraîné le marquage du frame comme annonce. Vous pouvez ouvrir un frame via Application > Frames (Application > Cadres). (1217041)

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à 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, 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 éléments abordés dans la série Nouveautés des outils pour les développeurs.