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

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 mis en pause 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 initialement mis en pause le 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, puis 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 relire des flux utilisateur à une vitesse plus lente : lent, très lent et extrêmement lent. Ces options vous permettent de mieux observer à l'écran chaque étape répétée.

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

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

extension personnalisée du panneau "Enregistreur"

Problème Chromium: 1325751

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

Activez la nouvelle option Grouper les fichiers par créés / déployés 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 parcourir les fichiers sources en raison de la taille réduite des fichiers générés par les outils de compilation (par exemple, Webpack, Vite).

Cette case à cocher vous permet de regrouper les fichiers en deux catégories pour une recherche plus rapide:

Créé : 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 lus par le navigateur En général, la taille de ces fichiers est réduite.

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

Regrouper les fichiers par création / déployé 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 canal Temps utilisateur du panneau Insights 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 des pages, le titre Temps utilisateur s'affiche 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 "Insights sur les performances"

Problème Chromium: 1322808

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

Les éléments positionné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 plus rapidement l'élément qui affecte la mise en page du nœud.

Cet exemple contient des fiches avec quelques emplacements nommés. Inspectez l'emplacement person-occupation d'une carte et 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'emplacement attribué d'un élément

Problème Chromium: 1018906

Simuler la simultanéité matérielle pour les enregistrements Performance

Le nouveau paramètre Simultanéité matérielle du panneau Performances permet aux développeurs de configurer la valeur renvoyé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). Cette fonctionnalité permet aux développeurs de tester les performances de leur application avec différents nombres de cœurs.

Simuler la simultanéité matérielle pour les enregistrements Performance

Problème Chromium: 1297439

Prévisualiser les valeurs qui ne sont pas de couleur lors de la saisie semi-automatique des variables CSS

Lors de la saisie semi-automatique des variables CSS, les outils de développement insèrent désormais une valeur significative dans la variable qui n'est pas de couleur. Vous pouvez ainsi prévisualiser le type de modification qui sera apportée à la valeur sur le nœud.

Prévisualiser les valeurs qui ne sont pas de 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 Frames 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:

Propriétés énumérables qui lui sont propres.
Posséder des propriétés non énumérables
Propriétés énumérables héritées
Propriétés héritées non énumérables

Auparavant, les développeurs trouvaient plus difficile de trouver des propriétés pertinentes, car la suggestion ne préférait que les propriétés héritées par rapport aux propriétés héritées, et toutes les propriétés héritées avaient 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 mappages source pour améliorer l'expérience de débogage globale:

Les points d'arrêt fonctionnent désormais dans <script> avec les annotations sourceURL.
Le débogueur résout désormais les variables à champ d'application de bloc dans la vue Scope (Champ d'application) avec les mappages sources.
Le débogueur résout désormais les variables dans les fonctions fléchées de la vue Scope (Champ d'application) avec les mappages sources.

Problèmes Chromium: 1329113, 1322115

Points forts divers

Voici quelques correctifs importants dans cette version:

Correction du paramètre Saisie semi-automatique dans 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 Manifest dans le panneau Application pour analyser le dernier format du jeu de couleurs. (1318305).
Amélioration des suggestions concernant les problèmes de blocage de l'affichage de <script async> dans le panneau Insights sur les performances. Auparavant, les outils de développement suggéraient à add async attribute to the script tag, même si le script est 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 cliquez sur Ouvrir un fichier dans le menu Commande, les fichiers créés (fichiers générés par les cartes sources) sont désormais mieux classés et apparaissent désormais au-dessus des scripts déployés du même nom. (1312929).

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.