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

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

Sofia Emelianova

Jecelyn Yeen

Assistance au débogage WebAssembly

Les outils de développement activent Paramètres > Tests > Débogage WebAssembly: Activer la compatibilité avec DWARF par défaut. 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 du code C et C++ dans les applications Wasm, ainsi que 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'appel.
Prise en charge des points d'arrêt, etc.

Une application Wasm a été suspendue dans le débogueur.

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

Problème Chromium: 1414289.

Amélioration du comportement de pas dans les applications Wasm

Passer dans votre code d'origine évite désormais la mise en pause du démontage (fichier .wasm). Auparavant, il s'interrompait à cet endroit.

Cependant, le stepping se termine lorsqu'il arrive en dehors de la fonction dans laquelle il a commencé (par exemple, après son retour de la fonction).

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

Nouveau paramètre disponible dans "Préférences", puis dans "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, telles que 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 surligner en les soulignant en rouge.

Pour profiter de cette fonctionnalité, activez Paramètres > Tests > Met en évidence 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 "Éléments" et signalés par le panneau "Problèmes".

Pointez sur un problème en surbrillance dans l'arborescence DOM, puis cliquez sur Afficher le problème pour ouvrir l'onglet Problèmes. Celui-ci liste tous les problèmes détectés et fournit des indices sur le problème.

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 Add assertion (Ajouter une assertion). L'Enregistreur insère un pas de type waitForElement que vous pouvez personnaliser à la volée. Regardez la vidéo pour voir des assertions en action sur la démonstration d'un panier à café.

Cette vidéo vous montre comment revendiquer les éléments suivants:

les attributs HTML (par exemple, l'attribut class d'un élément) ;
Propriétés JavaScript au format JSON (par exemple, .innerText).

Vous pouvez également configurer des étapes pour effectuer des assertions, 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 la section Configurer les étapes.

De plus, l'Enregistreur mémorise désormais votre format de script préféré dans la vue Code côte à côte et dans le menu des étapes via un clic droit.

Problème Chromium: 1423624.

Lighthouse 10.1.1

Le panneau Lighthouse exécute désormais la version 10.1.1 de Lighthouse, avec un changement notable dans la version 10.1.0. Tous les audits qui traitent des URL sont désormais regroupés par entité et des statistiques numériques agrégées telles que la taille ou la durée. Les tiers populaires sont également associés à leur catégorie afin que vous puissiez identifier plus facilement leur objectif sur la page.

Audits regroupé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 du site Web.

Problème Chromium: 772558.

Améliorations des performances

`performance.mark()` affiche les codes temporels en pointant sur Performances > Durée.

La méthode performance.mark() affiche désormais ses codes temporels lorsque vous pointez sur la marque correspondante dans Performances > Durées. Ici, la durée correspond à un horodatage relatif à l'événement de navigation précédent.

Pop-up avec les codes temporels en pointant dans la section "Chronologie"

Problème Chromium: 1426762.

La commande `profile()` renseigne Performance > 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 en cas d'interactions utilisateur lentes

Les interactions utilisateur de plus de 200 millisecondes reçoivent un avertissement Interaction to Next Paint (INP) dans l'onglet Performances > Résumé.

Avertissement INP.

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

Problèmes Chromium: 1432512, 1432509.

Le canal Core Web Vitals a été déplacé

Le panneau Performances a supprimé les canaux suivants:

Le canal Signaux Web Consultez plutôt les codes temporels correspondants dans le titre Durée en passant la souris.
Sous-titre Tâches longues Ces tâches se trouvent déjà dans le canal principal, ombré en rouge et par un triangle rouge.

Les canaux Signaux Web et Tâches longues contiennent des informations dupliquées ailleurs. De plus, elles n'étaient pas interactives, contrairement aux autres options plus complètes qui fournissent des informations plus détaillées lorsque l'utilisateur clique dessus.

Avant et après avoir déplacé les signaux Web vers le canal "Chronologie".

De plus, la piste Experiences a été renommée Changements de mise en page pour refléter plus précisément son utilisation.

En savoir plus sur les Signaux Web

Abandon du Profileur JavaScript: phase 3

À partir de Chrome 58, l'équipe DevTools prévoyait d'abandonner le Profileur JavaScript afin de demander aux développeurs Node.js et Deno d'utiliser le panneau Performance pour profiler les performances du processeur JavaScript.

La version 114 des outils de développement lance la phase trois de l'abandon du Profileur JavaScript en quatre phases. Pendant cette phase, le panneau Profileur JavaScript est supprimé des outils de développement, mais vous pouvez toujours l'activer temporairement via Paramètres > Tests et l'ouvrir depuis le menu à trois points .

Profileur JavaScript dans "Paramètres", puis "Tests".

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

Problème Chromium: 1428026.

Points forts divers

Voici quelques correctifs importants dans cette version:

Le sélecteur de couleur détecte désormais les valeurs HWB qui sont en dehors de la gamme lorsqu'elles sont rognées (1429271).
Le panneau Sources :
- Activation de la mise en surbrillance de la syntaxe JSON pour les cartes sources (1385374).
- Arrêt de l'affichage des messages "Carte source détectée" lorsque vous désactivez manuellement les mappages source. (1423718)
La console vous permet désormais d'évaluer des expressions JavaScript incomplètes avec Ctrl+Entrée et génère des erreurs de syntaxe (1314700).
La boîte de dialogue de modification des points d'arrêt dispose désormais d'un bouton de fermeture. Auparavant, il fallait appuyer sur Entrée ou désactiver la boîte de dialogue (1412980).

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.