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 lorsque l'exécution est suspendue quelque part dans une fonction. Auparavant, cette fonctionnalité était obsolète et avait été supprimée dans Chrome 92 en raison de problèmes de stabilité.

Dans cet exemple, le débogueur s'est d'abord arrêté au point d'arrêt (ligne 343) près de la fin de la fonction toggleColorScheme. Pour redémarrer le débogage depuis le début de la fonction toggleColorScheme, développez la section Pile d'appels dans le volet Débogueur, effectuez un clic droit sur toggleColorScheme, puis sélectionnez Redémarrer le frame.

Problème Chromium : 1303521

Options de lecture au ralenti dans le panneau "Enregistreur"

Vous pouvez désormais relire les parcours utilisateur à une vitesse plus lente : lente, très lente et extrêmement lente. Ces options vous permettent de mieux observer la relecture de chaque étape à l'écran.

Ouvrez le panneau Enregistreur et lancez un nouvel enregistrement. Une fois l'enregistrement terminé, cliquez sur le bouton de menu déroulant Revoir. Sélectionnez une vitesse pour lancer la rediffusion.

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 lecture dans votre format préféré. Consultez la documentation de l'API de l'extension Recorder pour savoir comment en créer une.

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

Problème Chromium : 1325751

Regrouper les fichiers par créés / déployés dans le panneau "Sources"

Activez la nouvelle option Grouper les fichiers par auteur / déploiement pour organiser vos fichiers dans le panneau "Sources". Lorsque vous développez des applications Web avec des frameworks (par exemple, React, Angular), il peut être difficile de parcourir les fichiers sources en raison des fichiers minimisés générés par les outils de compilation (par exemple, Webpack, Vite).

Cette case à cocher vous permet de regrouper les fichiers dans deux catégories pour les retrouver plus rapidement :

• Auteur : Semblable aux fichiers sources que vous consultez 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éels lus par le navigateur. Ces fichiers sont généralement minimisés.

Essayez-le vous-même avec cette démonstration React !

Problème Chromium : 960909

Nouvelle piste "Timing utilisateur" dans le panneau "Informations sur les performances"

Visualisez les repères performance.measure() dans votre enregistrement grâce à la nouvelle piste Timing utilisateur du panneau Insights sur les performances.

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

Lorsque vous commencez à mesurer le chargement de la page, la piste Timing utilisateur s'affiche dans l'enregistrement. Cliquez sur l'élément de timing pour afficher ses détails dans le volet latéral.

Problème Chromium : 1322808

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

Les éléments insérés dans le panneau Éléments sont désormais associés à un badge slot. Lorsque vous déboguez des problèmes de mise en page, utilisez cette fonctionnalité pour identifier plus rapidement l'élément qui affecte la mise en page du nœud.

Cet exemple contient des cartes avec quelques emplacements nommés. Inspectez le slot person-occupation d'une fiche, puis cliquez sur le badge slot à côté pour afficher le slot 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.

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 de threads Emscripten. Cette fonctionnalité permet aux développeurs de tester les performances de leur application avec différents nombres de cœurs.

Problème Chromium : 1297439

Prévisualiser une valeur non colorée lors de la saisie automatique de variables CSS

Lors de la saisie semi-automatique des variables CSS, les outils de développement renseignent désormais la variable non colorée avec une valeur pertinente afin que vous puissiez prévisualiser le type de modification que la valeur aura sur le nœud.

Problème Chromium : 1285091

Identifier les frames bloquants dans le volet "Cache amélioré"

Le volet Cache Précédent/Suivant du panneau Application comporte une nouvelle section Frames (Frames) pour vous aider à identifier les frames bloquants qui peuvent empêcher la page d'être éligible à bfcache.

Problème Chromium : 1288158

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

L'autocomplétion des propriétés d'objet JavaScript s'affiche désormais selon l'ordre suivant :

1. Propriétés énumérables propres
2. Propriétés propres 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 plus de mal à trouver les propriétés pertinentes, car la suggestion ne favorisait que les propriétés propres par rapport aux propriétés héritées, et toutes les propriétés héritées avaient la même priorité.

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 dans les <script> intégrés avec les annotations sourceURL.
• Le débogueur résout désormais les variables à portée de bloc dans la vue Portée avec les cartes sources.
• Le débogueur résout désormais les variables dans les fonctions fléchées de la vue Portée avec les cartes sources.

Problèmes Chromium : 1329113, 1322115

Autres points importants

Voici quelques corrections importantes apportées 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 lorsque le paramètre était désactivé. (1323286)
• L'onglet Manifeste du panneau Application a été mis à jour pour analyser le dernier format de palette de couleurs. (1318305)
• Amélioration des suggestions pour les problèmes de blocage du rendu <script async> dans le panneau Insights sur les performances. Auparavant, les outils de développement suggéraient d'ajouter add async attribute to the script tag même si le script était déjà marqué comme asynchrone. (1334096)
• Le panneau Insights 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 sélectionnez Ouvrir le fichier dans le menu de commandes, les fichiers créés (fichiers générés par les cartes sources) sont désormais mieux classés et apparaissent au-dessus des scripts déployés portant un nom similaire. (1312929)

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les outils pour les développeurs".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.