Le débogage peut être fastidieux et encore plus frustrant lorsque vous ne pouvez pas localiser facilement le bogue. Les outils de développement Chrome 106 (devtools) sont configurés pour simplifier le processus de débogage, le rendant plus simple et rapide.

Vous pouvez désormais trier facilement 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 essentiels, en particulier 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 :

Pour profiter pleinement des nouvelles mises à jour sur Chrome 106, téléchargez le Chrome Canari, Développeur, ou Bêta versions comme navigateur de développement par défaut. Vous aurez accès aux derniers outils de développement qui permettent de tester les API de la plate-forme Web et d'identifier rapidement les problèmes ou les bogues sur votre site pour garantir à vos utilisateurs la meilleure expérience client.

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 dans créé/déployé sur le source panneau. Aller à Source > Menu à 3 points > Grouper par création/déploiement. 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 la navigation panneau, ce qui rend difficile la recherche d'un seul fichier.

2. Recherche de fichiers simplifiée

Vous pouvez restreindre 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 s'affichaient dans les résultats de la recherche, ce qui rendait difficile l'identification de l'élément de recherche.

Cette mise à jour est la version devtools pour optimiser votre recherche sur les navigateurs web avec Feuilles de triche de recherche Google. Pour configurer ce paramètre, accédez à la Menu à 3 points > Masquer les sources de la liste ignorée.

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 fonction, rendez-vous sur Paramètres > Ignorer la liste > Ajouter automatiquement des scripts tiers connus à la liste des ignorés. Lorsque vous rouvrirez les fichiers, la console n'affichera que les fichiers pertinents associés à votre application. Vous pouvez maintenant voir votre code sans distraction.

4. Traces de pile détaillées

Vous mettrez moins de temps à identifier une erreur sur la console, grâce à une nouvelle fonctionnalité sur Chrome 106. Les outils de développement Chrome vous offrent 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é un console.createTask() méthode dans Chrome 106. Cette méthode permet aux frameworks d'effectuer des traces de pile sur la console. Déboguer JavaScript à l'aide de devtools est aussi simple que débogage CSS avec chrome.

5. Suivre les interactions dans le panneau de performances

Suivre les nouvelles interactions dans le Performance panneau pour identifier les problèmes potentiels de réactivité 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 aide à identifier la source et à l'intercepter en conséquence.

6. Informations sur la synchronisation LCP dans le panneau de performances

Le La plus grande peinture de contenu (LCP) les détails des horaires sont maintenant disponibles sur le panneau d'informations sur les performances. PCL est une mesure de performance Web essentielle qui rend compte du temps de rendu des images ou des blocs de texte pour se charger sur la page Web. Un 2.5sec ou moins est un bon score de performance.

Pour voir les informations, accédez à panneau de performances > menu à 3 points - plus d'outils > informations sur les performances. Lorsque vous rejouez un enregistrement, le Détails Le panneau affichera les temps 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 Enregistreur panneau. Le bouton d'exportation avait un problème dans les versions précédentes.
  • Vous avez maintenant un sélecteur de couleurs dans le modes volet éléments SVG.
  • Vous pouvez identifier les scripts déformant votre mise en page dans le Informations sur les performances panneau.
  • Vous pouvez afficher les chemins des polices Web LCP dans le Informations sur les performances panneau.

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 détaillée de votre application lorsque 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.