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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Compatibilité avec le débogage WebAssembly

Les outils de développement activent par défaut Paramètres. Paramètres > Expériences > Case à cocher. Débogage WebAssembly : activer la compatibilité DWARF. Pour en savoir plus, consultez Déboguer WebAssembly avec des outils modernes.

Ce test vous permet de suspendre l'exécution et de déboguer le code C et C++ dans les applications Wasm, avec toutes les informations de débogage à votre disposition :

  • Votre code source d'origine, mappé à l'aide des informations de débogage DWARF.
  • Noms de fonctions compréhensibles dans la pile d'appels.
  • Prise en charge des points d'arrêt et plus encore.

Application Wasm suspendue dans le débogueur.

Pour tester le débogage Wasm, installez l'extension C/C++ DevTools Support (DWARF) et parcourez le code dans la démonstration de Mandelbrot.

Problème Chromium : 1414289.

Amélioration du comportement de pas dans les applications Wasm

Pas à pas principal Passer au-dessus dans votre code d'origine évite désormais la mise en pause dans le désassemblage (fichier .wasm). Auparavant, la lecture s'arrêtait à ce moment-là.

Toutefois, le pas à pas s'arrête lorsqu'il se trouve en dehors de la fonction dans laquelle il a commencé, par exemple après le retour de la fonction.

Ce comportement est activé par défaut dans Paramètres. Paramètres > Préférences > Sources.

Le nouveau paramètre se trouve dans "Préférences", puis "Sources".

Problème Chromium : 1418938.

Déboguer la saisie automatique à l'aide du panneau "Éléments" et de l'onglet "Problèmes"

La saisie automatique de Chrome remplit automatiquement les formulaires avec les informations enregistrées, comme vos adresses ou vos informations de paiement. Pour vous permettre de déboguer facilement les problèmes liés à la saisie automatique, le panneau Éléments peut désormais les mettre en évidence à l'aide de traits ondulés rouges.

Pour tester cette fonctionnalité, activez Paramètres. Paramètres > Tests > Case à cocher. Met en surbrillance un nœud ou un attribut non conforme dans l'arborescence DOM du panneau "Éléments", puis inspectez cette page de démonstration.

Problèmes de saisie automatique mis en évidence dans le panneau "Elements" et signalés par le panneau "Issues".

Pointez sur un problème mis en évidence dans l'arborescence DOM, puis cliquez sur Afficher le problème pour ouvrir l'onglet Problèmes. Il liste tous les problèmes détectés et fournit des indices sur ce qui n'a pas fonctionné.

Problème Chromium : 1399414.

Assertions dans l'Enregistreur

Le panneau Enregistreur vous permet désormais d'ajouter des assertions directement pendant l'enregistrement, avec toutes les données d'exécution à votre disposition.

Pour ajouter une assertion, démarrez un nouvel enregistrement, interagissez avec votre page, puis cliquez sur Ajouter une assertion. L'enregistreur insère une étape de type waitForElement que vous pouvez personnaliser à la volée. Regardez la vidéo pour voir les assertions en action dans la démonstration du chariot à café.

Cette vidéo vous explique comment affirmer :

  • Attributs HTML, par exemple class d'un élément.
  • Propriétés JavaScript au format JSON, par exemple .innerText.

Vous pouvez également configurer des étapes pour affirmer, par exemple, des instructions conditionnelles en JavaScript, le nombre d'enfants d'un nœud (count), la visibilité d'un élément, etc. Pour en savoir plus, consultez Configurer des étapes.

De plus, l'enregistreur mémorise désormais votre format de script préféré dans la vue côte à côte du code et dans le menu contextuel des étapes.

Problème Chromium : 1423624.

Lighthouse 10.1.1

Le panneau Lighthouse exécute désormais Lighthouse 10.1.1, avec une modification notable introduite dans la version 10.1.0. Tous les audits qui traitent des URL sont désormais regroupés par entité et agrègent des statistiques numériques telles que la taille ou la durée. Les tiers populaires sont également tagués avec leur catégorie pour que vous puissiez plus facilement identifier leur objectif sur la page.

Audits groupés par entité.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problème Chromium : 772558.

Améliorations des performances

performance.mark() affiche le timing au survol dans Performances > Timing

La méthode performance.mark() affiche désormais son timing lorsque vous pointez sur la marque correspondante dans Performances > Timings. Le timing est un code temporel relatif à l'événement de navigation précédent.

Pop-up avec le timing au survol dans la section "Timing".

Problème Chromium : 1426762.

La commande profile() remplit Performances > Principal

Les commandes profile() et profileEnd() de la console démarrent et arrêtent désormais le profilage du processeur dans le thread principal du panneau Performances.

La commande console() crée un profil dans le panneau "Performances".

Problème Chromium : 1429191.

Avertissement pour les interactions utilisateur lentes

Les interactions utilisateur de plus de 200 millisecondes génèrent un avertissement Interaction to Next Paint (INP) dans l'onglet Performances > Récapitulatif.

Avertissement INP

De plus, l'ID de l'interaction a été déplacé de l'info-bulle vers Résumé.

Problèmes Chromium : 1432512, 1432509.

Le titre Web Vitals a été déplacé

Les pistes suivantes ont été supprimées du panneau Performances :

Les pistes Web Vitals et Long Tasks contenaient des informations qui étaient déjà disponibles ailleurs. Elles n'étaient pas non plus interactives, contrairement à leurs alternatives plus complètes qui fournissent des informations plus détaillées lorsqu'on clique dessus.

Avant et après le déplacement des métriques Web Vitals vers la piste "Timings".

De plus, la piste Experiences a été renommée Layout Shifts pour refléter plus précisément son utilisation.

En savoir plus sur les Web Vitals

Arrêt du profileur JavaScript : troisième phase

Depuis Chrome 58, l'équipe DevTools prévoyait de supprimer à terme le profileur JavaScript et de demander aux développeurs Node.js et Deno d'utiliser le panneau Performances pour profiler les performances du processeur JavaScript.

La version 114 des outils de développement marque le début de la troisième phase de l'abandon en quatre phases du profileur JavaScript. Pendant cette phase, le panneau Profileur JavaScript est supprimé des outils de développement, mais vous pouvez toujours l'activer temporairement via Paramètres. Paramètres > Expériences et l'ouvrir à partir du menu à trois points Menu à trois points..

Case à cocher "Profileur JavaScript" dans Paramètres > Tests.

Pour profiler les performances du processeur, utilisez le panneau Performances.

Problème Chromium : 1428026.

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.