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 lorsqu'il est suspendu dans une fonction. 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 initialement arrêté 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'appels) dans le volet Debugger (Débogueur), effectuez un clic droit sur toggleColorScheme, puis sélectionnez Restart frame (Redémarrer le frame).

Problème Chromium: 1303521

Options de ralenti dans le panneau "Enregistreur"

Vous pouvez désormais recréer les parcours utilisateur à une vitesse plus lente : lente, très lente et extrêmement lente. Ces options vous permettent de mieux observer chaque étape de la relecture à 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 relecture.

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 des scripts de relecture dans votre format préféré. Consultez la documentation de l'API d'extension de l'Enregistreur pour découvrir comment en créer une.

Pour installer une extension de démonstration, suivez cette procédure décrite dans la documentation.

Problème Chromium: 1325751

Regrouper les fichiers par "Créé"/"Déployé" 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 (React, Angular, par exemple), il peut être difficile de naviguer dans les fichiers sources en raison des fichiers minifiés générés par les outils de compilation (Webpack, Vite, par exemple).

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

• Auteur Semblable aux fichiers sources que vous consultez dans votre IDE. DevTools génère ces fichiers en fonction des cartes sources (fournies par vos outils de compilation).
• Déployée. Fichiers réels lus par le navigateur. En règle générale, ces fichiers sont minifiés.

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

Problème Chromium: 960909

Nouvelle fonctionnalité de suivi des temps d'utilisation dans le panneau "Informations sur les performances"

Visualisez les repères performance.measure() dans votre enregistrement avec le nouveau tracé Durées utilisateur dans le panneau Insights sur les performances.

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

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

Problème Chromium: 1322808

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

Les éléments avec des emplacements dans le panneau Éléments sont associés à un nouveau 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 l'emplacement person-occupation d'une fiche, puis cliquez sur le badge slot à 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 renseigner 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 Concurrency 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 leur application avec différents nombres de cœurs.

Problème Chromium: 1297439

Aperçu de la valeur autre que la couleur lors de la saisie semi-automatique des variables CSS

Lors de la saisie semi-automatique des variables CSS, DevTools renseigne désormais la variable non couleur avec une valeur significative afin que vous puissiez prévisualiser le type de modification qu'elle aura sur le nœud.

Problème Chromium: 1285091

Identifier les cadres bloquants dans le volet du cache avant/arrière

Le volet Cache avant/arrière du panneau Application comporte une nouvelle section 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

La saisie semi-automatique des propriétés d'objet JavaScript s'affiche désormais dans l'ordre suivant:

1. Propriétés énumérables propres
2. 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 plus de mal à trouver des propriétés pertinentes, car les suggestions ne favorisaient 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 <script> intégré avec des annotations sourceURL.
• Le débogueur résout désormais les variables de portée de bloc dans la vue Portée avec des cartes sources.
• Le débogueur résout désormais les variables dans les fonctions fléchées dans la vue Champ d'application à l'aide de cartes sources.

Problèmes Chromium: 1329113, 1322115

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

• Correction du paramètre Auto-completion (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 Fichier manifeste du panneau Application pour analyser le dernier format de jeu 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, DevTools suggérait d'utiliser 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 des causes potentielles de décalages de mise en page. Vous pouvez consulter les détails de l'iframe dans le volet Détails. (1328873)
• Lorsque vous ouvrez un fichier dans le menu de commande, les fichiers créés (fichiers générés par les mappages de sources) sont désormais classés plus haut 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 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 plate-forme 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les 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.