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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Compatibilité avec le débogage WebAssembly

Par défaut, les outils de développement activent Paramètres. Settings > Experiments > Case à cocher. WebAssembly Debugging: Enable DWARF support (Paramètres > Tests > Débogage WebAssembly : activer la prise en charge de 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 disponibles:

  • Votre code source d'origine, mappé à l'aide d'informations de débogage DWARF.
  • Noms de fonction clairs dans la pile d'appels.
  • Prise en charge des points d'arrêt, etc.

Application Wasm mise en pause dans le débogueur.

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

Problème Chromium: 1414289.

Amélioration du comportement de la progression dans les applications Wasm

La méthode "Passer" Écarte-toi. dans le code d'origine évite désormais la mise en pause lors du désassemblage (fichier .wasm). Auparavant, la lecture était mise en pause.

Toutefois, l'étape se termine lorsqu'elle se termine en dehors de la fonction à partir de laquelle elle a commencé, par exemple après son retour.

Ce comportement est activé par défaut dans Paramètres. Settings > Preferences > Sources (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 semi-automatique à l'aide du panneau "Éléments" et de l'onglet "Problèmes"

La saisie automatique Chrome permet de remplir automatiquement des formulaires avec des 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 surbrillance en les soulignant en rouge avec des crochets.

Pour tester cette fonctionnalité, activez Paramètres. Settings (Paramètres) > Experiments (Tests) > Case à cocher. Highlights a violating node or attribute in the Elements panel DOM tree (Met en surbrillance un nœud ou un attribut non conforme dans l'arborescence DOM du panneau "Elements") et inspectez cette page de démonstration.

Les problèmes de saisie automatique sont mis en évidence dans le panneau "Elements" (Éléments) et signalés dans le panneau "Issues" (Problèmes).

Pointez sur un problème mis en surbrillance 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 la cause du problème.

Problème Chromium: 1399414.

Affirmations dans l'Enregistreur

Le panneau Enregistreur vous permet désormais d'ajouter des assertions 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 avec le type waitForElement que vous pouvez personnaliser instantanément. Regardez la vidéo pour voir les assertions en action dans la démonstration du panier à 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 du nœud (count), la visibilité des éléments, etc. Pour en savoir plus, consultez Configurer les étapes.

De plus, l'Enregistreur mémorise désormais le format de script de votre choix dans la vue du code côte à côte et dans le menu d'étapes du clic droit.

Problème Chromium: 1423624.

Lighthouse 10.1.1

Le panneau Lighthouse exécute désormais Lighthouse 10.1.1, avec un changement notable introduit dans la version 10.1.0. Tous les audits concernant les 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 afin de faciliter leur identification sur la page.

Audits regroupés par entité.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 772558.

Améliorations des performances

performance.mark() affiche le temps de chargement lorsque vous pointez dessus dans Performances > Temps de chargement

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

Le pop-up avec le timing en survol dans la section "Timings".

Problème Chromium: 1426762.

La commande profile() renseigne 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 concernant 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 la bulle d'aide vers Récapitulatif.

Problèmes Chromium: 1432512, 1432509.

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

Le panneau Performances a supprimé les canaux suivants:

Les métriques Web Vitals et Tâches longues contenaient des informations en double ailleurs. Elles n'étaient pas non plus interactives par rapport à leurs alternatives plus complètes, qui fournissent des informations plus détaillées lorsqu'elles sont cliquées.

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

De plus, le canal Expériences a été renommé Décalages de mise en page pour refléter plus précisément son utilisation.

En savoir plus sur les métriques Web Vitals

Abandon du profileur JavaScript: phase 3

Dès Chrome 58, l'équipe DevTools a prévu d'abandonner 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 de DevTools marque le début de la troisième phase de l'abandon en quatre phases du profileur JavaScript. Au cours de cette phase, le panneau Profiler JavaScript est supprimé de DevTools, mais vous pouvez toujours l'activer temporairement via Paramètres. Settings (Paramètres) > Experiments (Tests) et l'ouvrir à partir du menu à trois points Menu à trois points..

Cochez la case "Profileur JavaScript" dans "Paramètres", puis "Tests".

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

Problème Chromium: 1428026.

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

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.