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

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

Jecelyn Yeen

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

Le lien Grouper les fichiers par créés / déployés s'affiche désormais dans le menu à trois points. Auparavant, il apparaissait directement dans le volet de navigation.

Ouvrez cette démonstration. Activez le paramètre Grouper les fichiers par créés / déployés pour afficher en premier votre code source d'origine (Créé) et y accéder plus rapidement.

Regrouper les fichiers par Créés / Déployés

Bug Chromium: 1352488

Traces de pile améliorées

Traces de pile liées pour les opérations asynchrones

Lorsque certaines opérations sont planifiées pour se produire de manière asynchrone, les traces de la pile dans les outils de développement racontent désormais toute l'opération. Auparavant, elles ne racontaient qu'une partie de l'histoire.

Par exemple, ouvrez cette démonstration et cliquez sur le bouton d'incrémentation. Développez le message d'erreur dans la console. Dans notre code source, l'opération inclut une opération timeout asynchrone.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Auparavant, la trace de la pile n'affichait que l'opération de délai avant expiration. Elle n'a pas montré la « cause racine » de l'opération.

Avec les dernières modifications, les outils de développement montrent désormais que l'opération provient de l'événement onClick dans le composant du bouton, puis de la fonction increment, et enfin de l'opération d'expiration du délai.

Traces de pile liées pour les opérations asynchrones

En arrière-plan, les outils de développement ont lancé une nouvelle fonctionnalité appelée "Async Stack Tagging" (Ajout de tags asynchrones de la pile). Vous pouvez raconter toute l'histoire de l'opération en liant les deux parties du code asynchrone à la nouvelle méthode console.createTask(). Pour en savoir plus, consultez la section Débogage moderne dans les outils de développement.

Est-ce que cela vous semble compliqué ? Pas du tout. La plupart du temps, le framework que vous utilisez gère la planification et l'exécution asynchrone. Dans ce cas, c'est au framework d'utiliser l'API. Vous n'avez pas à vous en soucier. (par exemple, Angular a implémenté ces modifications)

Bug Chromium: 1334585

Ignorer automatiquement les scripts tiers connus

Identifiez plus rapidement les problèmes dans votre code pendant le débogage, car les outils de développement ajoutent désormais automatiquement les scripts tiers connus à la liste des éléments à ignorer.

Ouvrez cette démonstration et cliquez sur le bouton d'incrémentation. Développez le message d'erreur dans la console. La trace de la pile n'affiche que votre code (par exemple, app.component.ts button.component.ts). Cliquez sur Afficher plus de cadres pour afficher la trace de la pile complète.

Auparavant, la trace de la pile incluait des scripts tiers tels que zone.js et core.mjs. Il ne s'agit pas de votre code source. Ils sont générés par des bundlers (par exemple, Webpack) ou des frameworks (par exemple, Angular). L'identification de la cause racine d'une erreur a pris plus de temps.

Ignorer automatiquement les scripts tiers connus dans la trace de la pile

En arrière-plan, les outils de développement ignorent les scripts tiers basés sur la nouvelle propriété x_google_ignoreList dans les mappages sources. Les frameworks et les bundlers doivent fournir ces informations. Consultez Étude de cas: Améliorer le débogage Angular avec les outils de développement.

Si vous préférez toujours afficher les traces de la pile complète, vous pouvez désactiver le paramètre en accédant à Paramètres > Liste d'omissions > Ajouter automatiquement des scripts tiers connus à la liste des éléments à ignorer.

Paramètre permettant d'ajouter automatiquement des scripts tiers connus à la liste des éléments à ignorer

Bug Chromium: 1323199

Amélioration de la pile d'appels lors du débogage

Avec le paramètre Ajouter automatiquement des scripts tiers connus à la liste des éléments à ignorer, la pile d'appel n'affiche désormais que les cadres pertinents pour votre code.

Ouvrez cette démonstration et définissez un point d'arrêt au niveau de la fonction increment() dans app.component.ts. Cliquez sur le bouton d'incrémentation de la page pour déclencher le point d'arrêt. La pile d'appel n'affiche que les cadres de votre code (par exemple, app.component.ts et button.component.ts).

Pour afficher tous les cadres, activez Afficher les cadres de la liste des éléments à ignorer. Auparavant, les outils de développement affichaient tous les cadres par défaut.

Amélioration de la pile d'appels lors du débogage

Bug Chromium: 1352488

Masquage des sources figurant sur la liste des éléments à ignorer dans le panneau "Sources"

Activez l'option Masquer les sources de la liste des éléments à ignorer pour masquer les fichiers non pertinents dans le volet Navigation. Vous pouvez ainsi vous concentrer sur votre code uniquement.

Ouvrez cette démonstration. Dans le panneau Sources. node_modules et webpack sont les scripts tiers. Cliquez sur le menu à trois points et sélectionnez masquer les sources figurant sur la liste des éléments à ignorer pour les masquer du volet.

Masquage des sources figurant sur la liste des éléments à ignorer dans le panneau "Sources"

Bug Chromium: 1352488

Masquage des fichiers de la liste des éléments à ignorer dans le menu de commandes

Le paramètre Masquer les sources de la liste des éléments à ignorer vous permet de trouver plus rapidement votre fichier à l'aide du menu de commandes. Auparavant, la recherche de fichiers dans le menu de commandes renvoyait des fichiers tiers susceptibles de ne pas vous intéresser.

Par exemple, activez le paramètre masquer les sources de la liste des éléments à ignorer et cliquez sur le menu à trois points. Sélectionnez Ouvrir le fichier. Saisissez "ton" pour rechercher des composants de bouton. Auparavant, les résultats incluaient des fichiers de node_modules, l'un des fichiers node_modules s'affichant même comme premier résultat.

Masquage des fichiers de la liste des éléments à ignorer dans le menu de commandes

Bug Chromium: 1336604

Nouveau suivi des interactions dans le panneau "Performances"

Utilisez le nouveau canal Interactions dans le panneau Performances pour visualiser les interactions et détecter d'éventuels problèmes de réactivité.

Par exemple, lancez un enregistrement des performances sur cette page de démonstration. Cliquez sur un café et arrêtez l'enregistrement. Deux interactions s'affichent dans le canal Interactions. Les deux interactions ont les mêmes identifiants, ce qui signifie qu'elles sont déclenchées par la même interaction de l'utilisateur.

Suivi des interactions dans le panneau "Performances"

Bug Chromium: 1347390

Répartition du temps LCP dans le panneau "Insights sur les performances"

Le panneau Performance Insights (Insights sur les performances) affiche désormais la répartition temporelle du Largest Contentful Paint (LCP). Utilisez ces informations sur le calendrier pour comprendre et identifier des opportunités d'amélioration des performances LCP.

Répartition du temps LCP dans le panneau "Insights sur les performances"

Bug Chromium: 1351735

Générer automatiquement un nom par défaut pour les enregistrements dans le panneau "Enregistreur"

Le panneau Enregistreur génère désormais automatiquement un nom pour les nouveaux enregistrements.

Nom par défaut des enregistrements dans le panneau "Enregistreur"

Bug Chromium: 1351383

Points importants divers

Auparavant, les extensions de l'Enregistreur ne s'affichaient pas de temps en temps dans le panneau Enregistreur. (1351416).
Le volet Styles affiche désormais un sélecteur de couleur pour la propriété stop-color de l'élément SVG <stop>. (1351096).
Dans le panneau Insights sur les performances, identifiez les scripts à l'origine du thrashing de mise en page comme causes potentielles de décalages de mise en page. (1343019).
Affichez le chemin critique des polices Web LCP dans le panneau Insights sur les performances. (1350390).

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.