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

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 mise en pause 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 au remplissage 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, qui 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 regroupés par entité.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, 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 correspond à 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 :