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éation / déployé dans le panneau "Sources"

L'option Group files by Authored/Deployeded (Regrouper les fichiers par créés/déployés) s'affiche désormais dans le menu à trois points. Auparavant, elles s'affichaient directement dans le volet de navigation.

Ouvrez cette démonstration. Activez le paramètre Group files by Authored / Deployed (Regrouper les fichiers par créés/déployés) pour afficher d'abord votre code source d'origine et y accéder plus rapidement.

Regrouper les fichiers par création / déployé

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 la pile dans les outils de développement racontent désormais toute l'histoire de l'opération. Auparavant, il ne raconte 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. Il n'a pas montré la "cause racine" 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 du composant Button, puis de la fonction increment, et enfin de l'opération du 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é de taggage asynchrone des piles. Vous pouvez raconter toute l'histoire de l'opération en associant 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.

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, il appartient 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é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 comprenait 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 première 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 cartes sources. Les frameworks et les bundlers doivent fournir ces informations. Consultez l'article É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 via Paramètres > Liste des éléments à ignorer > 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'appel pendant le débogage

Avec le paramètre Ajouter automatiquement des scripts tiers connus pour 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 toutes les images, activez l'option 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'appel pendant le débogage

Bug Chromium: 1352488

Masquage des 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 de navigation. De cette façon, vous pouvez 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 et sélectionnez Masquer les sources de la liste des éléments à ignorer pour les masquer dans le volet.

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

Bug Chromium: 1352488

Masquer les 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 votre fichier plus rapidement grâce au menu Commandes. Auparavant, la recherche de fichiers dans le menu Commandes renvoyait des fichiers tiers qui pouvaient ne pas vous intéresser.

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

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

Bug Chromium: 1336604

Nouveau suivi des interactions dans le panneau "Performances"

Le nouveau suivi Interactions du panneau Performances vous permet de visualiser les interactions et d'identifier d'éventuels problèmes de réactivité.

Par exemple, démarrez l'enregistrement des performances sur cette page de démonstration. Cliquez sur un café et arrêtez l'enregistrement. Deux interactions apparaissent dans la piste Interactions. Les deux interactions ont les mêmes ID, ce qui signifie qu'elles sont déclenchées à partir de la même interaction utilisateur.

Suivi des interactions dans le panneau "Performances"

Bug Chromium: 1347390

Répartition des durées LCP dans le panneau "Insights sur les performances"

Le panneau Performance Insights (Insights sur les performances) affiche à présent la répartition des périodes du Largest Contentful Paint (LCP). Utilisez ces informations temporelles pour comprendre et identifier une opportunité d'améliorer les performances du LCP.

Répartition des durées 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 pour les enregistrements dans le panneau "Enregistreur"

Bug Chromium: 1351383

Points forts 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 Performance Insights, identifiez les scripts à l'origine du thrashing de la 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

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.