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

Jecelyn Yeen

Redémarrer le frame pendant le débogage

La fonctionnalité Redémarrer le frame est de retour ! Vous pouvez réexécuter le code précédent après avoir été mis en pause quelque part dans une fonction. Auparavant, cette fonctionnalité était obsolète et supprimée dans Chrome 92 en raison de problèmes de stabilité.

Dans cet exemple, le débogueur a été initialement interrompu au point d'arrêt (ligne 343) vers la fin de la fonction toggleColorScheme. Pour redémarrer le débogage depuis le début de la fonction toggleColorScheme, développez la section Call stack (Pile d'appel) dans le volet Debugger (Débogueur), effectuez un clic droit sur toggleColorScheme et sélectionnez Restart frame (Redémarrer le frame).

Redémarrer le frame pendant le débogage

Problème Chromium: 1303521

Options de relecture lente dans le panneau "Enregistreur"

Vous pouvez désormais revoir les flux utilisateur à une vitesse plus lente (lente, très lente et extrêmement lente). Ces options vous permettent de mieux observer la répétition de chaque étape à l'écran.

Ouvrez le panneau Enregistreur et démarrez un nouvel enregistrement. Une fois l'enregistrement terminé, cliquez sur le bouton déroulant Revoir. Sélectionnez une vitesse pour lancer une nouvelle lecture.

Options de relecture lente dans le panneau "Enregistreur"

Problème Chromium: 1306756

Créer une extension pour le panneau "Enregistreur"

Vous pouvez désormais créer ou installer une extension Chrome pour exporter les scripts de relecture dans le format de votre choix. Consultez la documentation sur l'API de l'extension Enregistreur pour apprendre à en créer une.

Pour installer une extension de démonstration, suivez ces étapes décrites dans la documentation.

Extension personnalisée pour le panneau "Enregistreur"

Problème Chromium: 1325751

Regrouper les fichiers par Créés / Déployés dans le panneau "Sources"

Activez la nouvelle option Regrouper les fichiers par créés / déployés pour organiser vos fichiers dans le panneau "Sources". Lors du développement d'applications Web avec des frameworks (par exemple, React, Angular), il peut être difficile de naviguer dans les fichiers sources en raison des fichiers réduits générés par les outils de compilation (Webpack et Vite, par exemple).

Cette case à cocher vous permet de regrouper les fichiers en deux catégories pour accélérer la recherche de fichiers:

  • Créé : Semblables aux fichiers sources que vous affichez dans votre IDE. Les outils de développement génèrent ces fichiers en fonction des cartes sources (fournies par vos outils de compilation).
  • Déployé. Fichiers réellement lus par le navigateur. En général, la taille de ces fichiers est réduite.

Essayez par vous-même avec cette démonstration React.

Regrouper les fichiers par Créés / Déployés dans le panneau "Sources"

Problème Chromium: 960909

Nouveau suivi du temps utilisateur dans le panneau "Insights sur les performances"

Visualisez les marques performance.measure() dans votre enregistrement avec le nouveau suivi Temps utilisateur du panneau Informations sur les performances.

Par exemple, cette page Web utilise la méthode performance.measure() pour calculer le temps écoulé pour le chargement du texte.

Lorsque vous commencez à mesurer le chargement de la page, le suivi du temps utilisateur apparaît dans l'enregistrement. Cliquez sur l'élément de durée pour afficher ses détails dans le volet latéral.

Suivi du temps utilisateur dans le panneau "Informations sur les performances"

Problème Chromium: 1322808

Afficher l'emplacement attribué à un élément

Les éléments insérés dans le panneau Éléments ont un nouveau badge slot. Lors du débogage des problèmes de mise en page, utilisez cette fonctionnalité pour identifier l'élément qui affecte plus rapidement la mise en page du nœud.

Cet exemple contient des cartes avec quelques emplacements nommés. Inspectez l'emplacement person-occupation d'une carte, puis cliquez sur le badge slot situé à côté pour afficher l'emplacement qui lui est attribué.

Découvrez comment utiliser les éléments <template> et <slot> pour créer un modèle flexible qui peut ensuite être utilisé pour remplir le Shadow DOM d'un composant Web.

Afficher l&#39;emplacement attribué à un élément

Problème Chromium: 1018906

Simuler la simultanéité matérielle pour les enregistrements de performances

Le nouveau paramètre Simultanéité matérielle du panneau Performances permet aux développeurs de configurer la valeur signalée par navigator.hardwareConcurrency.

Certaines applications utilisent navigator.hardwareConcurrency pour contrôler le degré de parallélisme de leur application, par exemple pour contrôler la taille du pool pthread Emscripten. Grâce à cette fonctionnalité, les développeurs peuvent tester les performances de leurs applications avec différents nombres de cœurs.

Simuler la simultanéité matérielle pour les enregistrements de performances

Problème Chromium: 1297439

Prévisualiser la valeur sans couleur lors de la saisie semi-automatique des variables CSS

Lors de la saisie semi-automatique des variables CSS, les outils de développement renseignent désormais la variable non-color avec une valeur pertinente. Vous pouvez ainsi prévisualiser le type de modification de la valeur sur le nœud.

Prévisualiser la valeur sans couleur lors de la saisie semi-automatique des variables CSS

Problème Chromium: 1285091

Identifier les frames bloquants dans le volet du cache amélioré

Le volet Cache amélioré du panneau Application comporte une nouvelle section Cadres pour vous aider à identifier les frames bloquants qui peuvent empêcher la page d'être éligible au cache amélioré.

Identifier les frames bloquants dans le volet du cache amélioré

Problème Chromium: 1288158

Amélioration des suggestions de saisie semi-automatique pour les objets JavaScript

La saisie semi-automatique pour les propriétés d'objet JavaScript s'affiche désormais dans cet ordre:

  1. Posséder des propriétés énumérables
  2. Posséder des propriétés non énumérables
  3. Propriétés énumérables héritées
  4. Propriétés non énumérables héritées

Auparavant, les développeurs avaient du mal à trouver des propriétés pertinentes, car la suggestion ne favorisait que les propriétés propres plutôt que les propriétés héritées. De plus, toutes les propriétés héritées obtenaient la même priorité.

Amélioration des suggestions de saisie semi-automatique pour les objets JavaScript

Problème Chromium: 1299241

Améliorations apportées aux cartes sources

Voici quelques corrections apportées aux cartes sources pour améliorer l'expérience de débogage globale:

  • Les points d'arrêt fonctionnent désormais de manière intégrée dans <script> avec les annotations sourceURL.
  • Le débogueur résout désormais les variables à l'échelle du bloc dans la vue Champ d'application avec les mappages sources. Résout les variables à l&#39;échelle du bloc
  • Le débogueur résout désormais les variables dans les fonctions fléchées dans la vue Scope (Champ d'application) avec les mappages sources. Résout les variables dans les fonctions fléchées

Problèmes Chromium: 1329113, 1322115

Points importants divers

Voici quelques correctifs importants dans cette version:

  • Correction du paramètre Saisie semi-automatique pour le panneau Sources. Auparavant, la saisie semi-automatique était toujours activée même si le paramètre était désactivé. (1323286).
  • Mise à jour de l'onglet Manifeste dans le panneau Application pour analyser le dernier format de jeu de couleurs. (1318305).
  • Amélioration des suggestions pour les problèmes qui bloquent l'affichage de <script async> dans le panneau Informations sur les performances. Auparavant, les outils de développement suggéraient de add async attribute to the script tag, même si le script est déjà marqué comme asynchrone. (1334096).
  • Le panneau Informations sur les performances détecte désormais les iFrames comme causes potentielles de décalages de mise en page. Vous pouvez afficher les détails de l'iFrame dans le volet Détails. (1328873).
  • Lorsque vous ouvrez le fichier dans le menu de commande, les fichiers créés (fichiers générés par des mappages sources) sont désormais mieux classés afin qu'ils apparaissent au-dessus des scripts déployés portant un nom similaire. (1312929).

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   Plus > 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement