Cette page a été traduite par l'API Cloud Translation.

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

Jecelyn Yeen

Relecture détaillée dans l'Enregistreur

Vous pouvez désormais définir un point d'arrêt et relire 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 s'interrompt avant d'exécuter l'étape. Vous pouvez alors continuer la relecture, exécuter une étape ou annuler la relecture.

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

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

Relecture détaillée dans l'Enregistreur

Problème Chromium: 1257499

Permettre le survol avec la souris sur un événement dans le panneau "Enregistreur"

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

Cette démonstration présente un menu pop-up lorsque l'utilisateur pointe dessus. Essayez d'enregistrer un flux utilisateur et cliquez 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 au-dessus de la souris pendant l'enregistrement. Pour résoudre ce problème, ajoutez une étape manuellement. Pour ce faire, pointez sur le sélecteur avant de cliquer sur l'élément de menu.

Permettre le survol avec la souris sur l'événement dans l'Enregistreur

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 pour mesurer la vitesse de chargement perçue. Vous pouvez maintenant identifier les chemins critiques et les causes racines d'un LCP (Largest Contentful Paint).

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

LCP dans le panneau "Insights sur les performances"

Problème Chromium: 1326481

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

Le panneau Insights sur les performances détecte désormais les flash de texte invisible (FOIT) et le flash de texte sans style (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 Changements de mise en page.

Pour savoir comment éviter les décalages de mise en page, consultez Optimiser le chargement et l'affichage des polices Web.

FOUT dans le panneau "Insights sur les performances"

Problèmes liés à 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) via 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 Protocole de test pour ouvrir la page "Café" dans la PWA.

Gestionnaires de protocoles dans le volet "Manifeste"

Problèmes liés à Chromium: 1300613

Badge du calque supérieur dans le panneau "Elements"

Utilisez le badge de la 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 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 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 la couche supérieure (#top-layer) à l'arborescence DOM. Il se trouve après la balise de fermeture </html>.

Pour passer de l'élément conteneur de la couche supérieure à l'élément de l'arborescence de la couche supérieure, cliquez sur le bouton Reveal (Afficher) à côté de l'élément ou de son fond dans le conteneur de la couche supérieure.

À côté de l'élément de l'arborescence du calque supérieur (par exemple, l'élément de boîte de dialogue), cliquez sur le badge Calque supérieur pour accéder au conteneur du calque supérieur.

Problème Chromium: 1313690

Joindre les informations de débogage Wasm au moment 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 de joindre 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 Add DWARF debugging info (Ajouter des informations de débogage DWARF) pour joindre des informations de débogage à la demande.

ALT_TEXT_HERE

Problème Chromium: 1341255

Permettre 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, les outils de développement rétablissent la fonctionnalité Redémarrage du frame. Toutefois, vous n'avez pas pu modifier la fonction dans laquelle vous êtes actuellement mis en veille. Il est fréquent que les développeurs craignent une fonction, puis la modifient lorsqu'elle est mise en veille.

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 pendant une mise en veille
Pas d'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 les règles @scope du volet "Styles"

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

Les règles @scope font partie de la spécification CSS Cascading and Inheritance Level 6 (en cascade et d'héritage de niveau 6 des CSS). 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 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 la règle pour la modifier.

Remarque:Le CSS @scope est en cours de développement. Pour tester cette fonctionnalité, activez l'indicateur Experimental Web Platform features (Fonctionnalités expérimentales de la plate-forme Web) via chrome://flags/#enable-experimental-web-platform-features.

@scope at rules dans le volet "Styles" (Styles)

Problème Chromium: 1337777

Améliorations apportées à la carte source

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

Les outils de développement résolvent désormais correctement les identifiants de mappage source avec la ponctuation. Certains outils de minification modernes (par exemple, esbuild) produisent des mappages 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 carte source pour les constructeurs avec un appel super.
Correction de l'indexation de l'URL des cartes sources 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 forts divers

Voici quelques correctifs importants 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 Grille dans le volet Layout (Mise en page), et affichez-les sous forme de badges dans le panneau Elements. Auparavant, les éléments Flex et Grille étaient manquants de manière aléatoire aux deux emplacements. (1340441, 1273992).
Un nouveau lien Creator Ad Script est disponible pour les frames d'annonce si les outils de développement ont détecté le script ayant entraîné le libellé du frame en tant qu'annonce. Vous pouvez ouvrir un cadre via Application > Frames. (1217041).

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.