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 dans le menu à trois points. Auparavant, il s'affichait directement dans le panneau de navigation.

Ouvrez cette démonstration. Activez le paramètre Regrouper les fichiers par auteur / déploiement pour afficher d'abord votre code source d'origine (Auteur) et y accéder plus rapidement.

Bug Chromium : 1352488

Amélioration des traces de 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 pile dans les outils de développement racontent désormais l'histoire complète de l'opération. Auparavant, elle ne fournissait qu'une partie des informations.

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 pile n'affichait que l'opération de délai avant expiration. Elle n'a pas affiché la "cause première" de l'opération.

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

En arrière-plan, les outils de développement ont introduit une nouvelle fonctionnalité de marquage de la pile asynchrone. Vous pouvez raconter toute l'histoire de l'opération en associant les deux parties du code asynchrone avec la nouvelle méthode console.createTask(). Pour en savoir plus, consultez Débogage moderne dans les outils de développement.

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 lors du 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ément. Développez le message d'erreur dans la console. La trace de pile n'affiche que votre code (par exemple, app.component.ts button.component.ts). Cliquez sur Afficher plus de frames pour afficher la trace de 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, mais de code généré par des bundlers (par exemple, webpack) ou des frameworks (par exemple, Angular). Il a fallu plus de temps pour identifier la cause première d'une erreur.

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 bundlers doivent fournir ces informations. Consultez l'é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 pile complètes, vous pouvez désactiver ce paramètre en accédant à Paramètres > Liste d'éléments à ignorer > 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 à une liste d'éléments à ignorer, la pile d'appels n'affiche désormais que les frames 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 sur la page pour déclencher le point d'arrêt. La pile d'appel n'affiche que les frames de votre code (par exemple, app.component.ts et button.component.ts).

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

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 uniquement sur votre code.

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 ignorées pour les masquer dans le volet.

Bug Chromium : 1352488

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

Le paramètre Masquer les sources ignorées vous permet de trouver plus rapidement votre fichier dans le menu de commandes. Auparavant, la recherche de fichiers dans le menu de commandes renvoyait des fichiers tiers qui n'étaient peut-être pas pertinents pour vous.

Par exemple, activez le paramètre Masquer les sources ignorées, 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 provenant de node_modules, l'un des fichiers node_modules apparaissant même en premier.

Bug Chromium : 1336604

Nouvelle piste "Interactions" dans le panneau "Performances"

Utilisez la nouvelle piste Interactions dans le 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 la piste Interactions. Les deux interactions ont les mêmes ID, ce qui indique qu'elles sont déclenchées par la même interaction utilisateur.

Bug Chromium : 1347390

Répartition des temps 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 de timing pour comprendre et identifier une opportunité d'améliorer les performances LCP.

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.

Bug Chromium : 1351383

Autres points importants

• 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)
• Identifiez les scripts à l'origine du thrashing 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 Informations sur les performances. (1350390)

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 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 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 de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés des outils pour les développeurs.