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: activez 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 le code C et C++ dans les applications Wasm. Toutes les informations de débogage sont à votre disposition:

Votre code source d'origine, mappé à l'aide des informations de débogage DWARF.
Noms de fonction compréhensibles dans la pile d'appel.
Compatibilité avec les points d'arrêt, etc.

Une application Wasm suspendue dans le débogueur

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

Problème Chromium: 1414289.

Amélioration du comportement des pas effectués dans les applications Wasm

Dans le code d'origine, vous pouvez désormais passer à la section précédente sans être mis en pause lors du démontage (fichier .wasm). Auparavant, il s'y interrompait.

Toutefois, le pas à pas se termine lorsqu'il atterrit 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 > 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 des informations enregistrées, telles que vos adresses ou vos informations de paiement. Pour vous aider à déboguer facilement les problèmes liés à la saisie automatique, le panneau Éléments peut désormais les mettre en surbrillance avec des traits de soulignement rouges.

Pour essayer cette fonctionnalité, activez Paramètres > Tests > Mettez en évidence un nœud ou un attribut non conforme dans l'arborescence DOM du panneau "Éléments" et 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.

Problème Chromium: 1399414.

Assertions dans l'Enregistreur

Le panneau Recorder (Enregistreur) vous permet désormais d'ajouter des assertions directement pendant l'enregistrement, avec toutes les données d'exécution disponibles.

Pour ajouter une assertion, démarrez un nouvel enregistrement, interagissez avec votre page et cliquez sur 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 les assertions en action dans la démonstration du chariot à café.

Cette vidéo vous montre comment revendiquer:

Les attributs HTML (par exemple, l'class d'un élément)
Propriétés JavaScript en JSON (par exemple, .innerText).

Vous pouvez également configurer des étapes pour valider, 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 Procédure de configuration.

De plus, l'Enregistreur mémorise désormais votre format de script préféré dans la vue de code côte à côte et dans le menu d'étape effectué par clic droit.

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 concernant des URL sont désormais regroupés par entité et regroupent des statistiques numériques telles que la taille ou la durée. Les catégories tierces les plus populaires sont également taguées, ce qui vous permet d'identifier plus facilement leur fonction sur la page.

Audits regroupés par entité.

Pour découvrir les principes de base 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 au passage de la souris dans Performances > Délais

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

Pop-up avec les codes temporels au passage de la souris dans la section "Temps de trajet".

Problème Chromium: 1426762.

La commande `profile()` renseigne le champ Performance > Principal

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

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

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 la section Performances > Onglet Résumé.

L'avertissement INP.

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

Problèmes Chromium: 1432512, 1432509.

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

Le panneau Performances a supprimé les canaux suivants:

Le canal Signaux Web. Passez la souris sur les codes temporels correspondants dans le canal Durée.
Le sous-titre Long Tasks (Tâches longues) Vous les trouverez déjà dans la piste principale en rouge avec un triangle rouge.

Les pistes Web Vitals et Tâches longues contiennent des informations dupliquées ailleurs. Elles étaient également non interactives par rapport à leurs alternatives plus complètes qui fournissent des informations plus détaillées lorsque l'utilisateur cliquait dessus.

Avant et après avoir déplacé le rapport Core Web Vitals vers la piste "Durée".

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

En savoir plus sur les Signaux Web

Abandon du Profileur JavaScript: phase 3

Dès Chrome 58, l'équipe DevTools prévoyait d'abandonner le Profileur JavaScript et 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 3 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 encore l'activer temporairement via Paramètres > Tests et ouvrez-le depuis le menu à trois points .

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

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

Problème Chromium: 1428026.

Points importants divers

Voici quelques correctifs importants dans cette version:

Le sélecteur de couleur détecte désormais les valeurs HWB qui sont hors de la gamme lorsqu'elles sont rognées (1429271).
Le panneau Sources: <ph type="x-smartling-placeholder">
- Activation de la mise en surbrillance de la syntaxe JSON pour les mappages sources (1385374).
- Affichage du message "Carte source détectée" arrêté lorsque vous désactivez manuellement les mappages de source (1423718).
La console vous permet désormais d'évaluer des expressions JavaScript incomplètes à l'aide de la combinaison de touches Ctrl+Ctrl et génère des erreurs de syntaxe (1314700).
La boîte de dialogue de modification des points d'arrêt comporte désormais un bouton de fermeture. Auparavant, vous deviez appuyer sur Entrée ou retirer le curseur de la boîte de dialogue (1412980).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta 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 plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.