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

Jecelyn Yeen

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

L'option Regrouper les fichiers par créés / déployés s'affiche désormais sous 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 auteur / déploiement pour afficher d'abord votre code source d'origine (auteur) et y accéder plus rapidement.

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

Bug Chromium: 1352488

Amélioration des traces de la pile

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

Lorsque certaines opérations sont planifiées de manière asynchrone, les traces de la pile dans DevTools racontent désormais l'histoire complète de l'opération. Auparavant, il ne racontait 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 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. Il n'a pas indiqué la "cause racine" de l'opération.

Avec les dernières modifications, DevTools indique désormais que l'opération provient de l'événement onClick dans le composant de bouton, puis de la fonction increment, suivie de l'opération de délai avant expiration.

Traces de pile associé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 associant les deux parties du code asynchrone à l'aide de la nouvelle méthode console.createTask(). Pour en savoir plus, consultez la section Débogage moderne dans les outils de développement.

Cela vous semble-t-il 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 lors du débogage, car DevTools ajoute désormais automatiquement les scripts tiers connus à la liste d'éléments à ignorer.

Ouvrez cette démonstration et cliquez sur le bouton d'incrémentation. Développez le message d'erreur dans 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). Il a fallu plus de temps pour identifier l'origine d'une erreur.

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

En coulisses, les outils de développement ignorent les scripts tiers en fonction de la nouvelle propriété x_google_ignoreList dans les cartes sources. Les frameworks et les outils de compilation doivent fournir ces informations. Consultez l'étude de cas : Mieux déboguer Angular avec DevTools.

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

Paramètre permettant d'ajouter automatiquement des scripts tiers connus à une liste d'é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 d'éléments à ignorer, la pile d'appels n'affiche désormais que les frames pertinentes pour votre code.

Ouvrez cette démonstration et définissez un point d'arrêt à 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 frames, activez Afficher les frames de la liste des éléments à ignorer. Auparavant, DevTools affichait tous les cadres par défaut.

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

Bug Chromium : 1352488

Masquer les sources de 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, puis sélectionnez Masquer les sources de la liste d'ignorer pour les masquer dans le volet.

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

Bug Chromium: 1352488

Le paramètre Masquer les sources de la liste d'ignorer vous permet de trouver votre fichier plus rapidement dans le menu de commande. 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 d'ignorer, puis 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, dont l'un apparaissait même en premier.node_modules

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 du panneau Performances pour visualiser les interactions et identifier les problèmes de réactivité potentiels.

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.

Trajet des interactions dans le panneau "Performances"

Bug Chromium: 1347390

Détail des délais de LCP dans le panneau "Informations sur les performances"

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

Détail des délais de LCP dans le panneau "Informations 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

Autres points forts

  • Auparavant, les extensions de l'Enregistreur n'apparaissaient pas toujours dans le panneau de l'Enregistreur. (1351416)
  • Le volet Styles affiche désormais un sélecteur de couleur pour la propriété stop-color de l'élément <stop> SVG. (1351096)
  • Identifiez les scripts à l'origine de déplacements de mise en page comme causes potentielles des décalages de mise en page dans le panneau Insights sur les performances. (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

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 plates-formes 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.

Nouveautés des outils pour les développeurs

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