Google facilite le débogage avec les nouvelles fonctionnalités de Devtools Chrome 106

Les outils de développement de Chrome 106 ont été améliorés et de nouvelles fonctionnalités ont été ajoutées.

Le débogage peut être fastidieux et encore plus frustrant lorsque vous ne parvenez pas à localiser facilement le bug. Les outils de développement Chrome 106 (devtools) sont conçus pour simplifier le processus de débogage, le rendant plus facile et rapide.

Vous pouvez désormais facilement trier les fichiers, optimiser votre recherche, masquer les scripts tiers, accéder à des rapports de performances détaillés et bien plus encore dans cet article. Ces outils de développement sont indispensables, notamment pour les développeurs travaillant avec des frameworks JavaScript tels que Angular, React et Vue.js, qui disposent désormais d'une console interactive et simplifiée pour visualiser et déboguer leur code.

Examinons de plus près certaines de ces nouvelles fonctionnalités :

1. Fichiers regroupés par créés/déployés

Vous pouvez désormais accéder directement aux composants de votre application en regroupant les fichiers sous créés/déployés sur le panneau source. Accédez à Source > Menu à 3 points > Regrouper par Auteur/Déployé. Désormais, lorsque vous ouvrez les fichiers, vous ne pouvez voir que vos fichiers déployés sur le panneau.

Dans les versions précédentes de Chrome, tous les fichiers de code source étaient visibles dans le panneau de navigation , ce qui rendait difficile la recherche d'un seul fichier.

2. Recherche de fichiers simplifiée

Vous pouvez limiter votre recherche sur le panneau source aux seuls fichiers pertinents. Dans les versions précédentes de Chrome, les fichiers générés par le framework et d'autres tiers apparaissaient dans les résultats de recherche, ce qui rendait difficile l'identification de l'élément de recherche.

Cette mise à jour est la version devtools permettant d'optimiser votre recherche sur les navigateurs Web avec les aide-mémoire de recherche Google. Pour configurer ce paramètre, accédez au menu à 3 points > Masquer les sources de la liste ignorée.

3. Masquer les scripts tiers

Des scripts tiers remplissent votre console ? Chrome 106 a ajouté une extension de liste ignorée dans la carte source pour vous permettre de masquer les scripts générés automatiquement par les frameworks et d'autres tiers.

Pour activer cette fonctionnalité, accédez à Paramètres > Liste des ignorés > Ajouter automatiquement les scripts tiers connus à la liste des ignorés. Lorsque vous ouvrirez à nouveau les fichiers, la console affichera uniquement les fichiers pertinents associés à votre application. Vous pouvez désormais voir votre code sans distraction.

4. Traces de pile détaillées

Vous prendrez moins de temps pour identifier une erreur sur la console, grâce à une nouvelle fonctionnalité sur Chrome 106. Les outils de développement Chrome vous donnent une vue détaillée des opérations asynchrones et de leurs causes profondes. Dans les versions précédentes, seuls les événements ayant conduit à l’opération étaient visibles. Les derniers devTools montrent toute la chaîne des opérations et leurs causes profondes.

Google a configuré une méthode console.createTask() dans Chrome 106. Cette méthode permet aux frameworks d'effectuer des traces de pile sur la console. Le débogage de JavaScript à l'aide de devtools est tout aussi simple que le débogage de CSS à l'aide de Chrome.

5. Suivez les interactions dans le panneau Performances

Suivez les nouvelles interactions dans le panneau Performances pour identifier les problèmes de réactivité potentiels de votre application. Dans Chrome 106, toutes les interactions s'affichent dans la piste Interactions après une opération. La piste montre la source des interactions et leurs identifiants. Le suivi permet d'identifier la source et de l'intercepter en conséquence.

6. Informations sur le timing LCP dans le panneau Performances

Les détails de synchronisation du Largest Contentful Paint (LCP) sont désormais disponibles dans le panneau d'informations sur les performances. LCP est une mesure de performances Web essentielle qui rend compte du temps de rendu nécessaire aux images ou aux blocs de texte pour se charger sur la page Web. Un temps de 2,5 secondes ou moins est un bon score de performance.

Pour consulter les informations, accédez au panneau des performances>3-dot-menu-more tolls>informations sur les performances. Lorsque vous réécoutez un enregistrement, le panneau Détails affiche les horaires de chargement.

Mises à jour supplémentaires dans Chrome 106

Les autres améliorations apportées à Chrome 106 incluent :

• Vous pouvez exporter vos enregistrements de script sans problème à partir du panneau Enregistreur. Le bouton exporter avait un problème dans les versions précédentes.
• Vous disposez désormais d'un sélecteur de couleurs dans les éléments SVG du volet Styles.
• Vous pouvez identifier les scripts déformant votre mise en page dans le panneau Performance Insights.
• Vous pouvez afficher les chemins d'accès aux polices Web LCP dans le panneau Performance Insights.

Ces fonctionnalités peuvent améliorer la façon dont vous utilisez les outils de développement du navigateur.

Ce que vous obtenez de Chrome 106

Les dernières améliorations apportées aux outils de développement dans Chrome 106 accélèrent le processus de débogage. Les nouvelles mises à jour facilitent la visualisation des opérations grâce à une console simplifiée et dynamique qui vous permet de masquer des fichiers, de désactiver des scripts, d'enregistrer et d'avoir une vue approfondie de votre application lors du débogage.

Les ajouts de Chrome 106 vous permettront de gérer votre application et d'optimiser ses performances. Allez-y et profitez de ces avantages en mettant à jour vers la dernière version de Chrome 106.