Google reconstruit Dart DevTools à partir de zéro dans Flutter

Flutter est un cadre de programmation multiplateforme, visant à résoudre les problèmes liés au développement d'applications multiplateformes sans le désordre du code non natif. Avec la connaissance du langage de programmation Dart, un développeur peut créer des applications pour Android, iOS, Web et ordinateur de bureau avec une interface utilisateur unifiée pour tous. Flutter 1.9 a apporté le support de macOS et Catalina dans un état alpha tandis que le La version v1.12 a fait mûrir leur support au-delà de l'état pré-alpha et le v1.17 de Flutter et v2.8 de Dart ont marqué leurs premières versions stables en 2020. Aujourd'hui, Google publie une nouvelle version de DevTools pour le code Dart et Flutter, qui a été reconstruite à partir de zéro dans Flutter et comporte plusieurs améliorations.

Dans l'annonce précédente, Google avait mentionné son intention de remplacer la version actuelle de Dart DevTools par une nouvelle version de Flutter. C'est désormais chose faite puisque les nouveaux DevTools ont été reconstruits à partir de zéro dans Flutter. Cette nouvelle version de DevTools ajoute des améliorations telles que des modifications des pages de performances et de mémoire, ainsi qu'une toute nouvelle page réseau.

Mais pourquoi reconstruire quelque chose quand cela fonctionne encore? L'équipe derrière Flutter affirme que les avantages en termes de productivité sont importants lors de la création de hautes performances. UI, et la meilleure façon de démontrer la confiance dans ces affirmations est d'adopter les mêmes outils pour eux-mêmes. La reconstruction dans Flutter permet également aux développeurs de sélectionner un modèle de distribution après avoir écrit le code, ce qui constitue un écart par rapport à l'organigramme décisionnel actuel dans lequel le modèle de distribution dicterait les code.

DevTools est livré sous la forme d'une application Web qui facilite l'intégration de l'outil dans l'expérience d'outillage existante dans tous les domaines. plates-formes cibles et IDE. DevTools est une suite autonome d'outils qui s'exécute dans le navigateur et fonctionne pour les applications mobiles, les applications de bureau et le Web. applications.

DevTools intègre les fonctionnalités suivantes :

• Inspecteur de flottement: un outil pour visualiser et explorer les arborescences de widgets. Vous pouvez sélectionner des widgets dans votre application en cours d'exécution, ralentir toutes les animations, afficher les lignes de base du texte, etc.
  • L'une des nouvelles fonctionnalités est Layout Explorer que vous pouvez trouver dans l'onglet Flutter Inspector à côté de l'arborescence des détails. Layout Explorer vous permet d'inspecter le modèle de mise en page flexible de Flutter. L'équipe donne un exemple de la façon dont cet outil peut aider à déboguer pourquoi une rangée de widgets ne ressemble pas à ce que le développeur attendait, par exemple.

• Vue chronologique: affiche les temps de construction pour chaque image et un diagramme de flammes. Cela facilite l’identification des cadres problématiques dans leur contexte.
  • Ce volet intègre désormais le nouveau bouton Suivre les constructions de widgets qui ajoute les temps de construction de tous les widgets dans votre application à la chronologie (au détriment des performances de la création de votre profil - elle n'est donc pas activée par défaut). Ceci est pratique lorsque vous essayez de savoir quels widgets se trouvent exactement derrière une image lente.

• Mémoire visuelle: vous montre comment votre application utilise la mémoire à un moment donné.
  • Cette vue affiche désormais une carte thermique de la mémoire allouée et permet également de suivre la mémoire de la plate-forme.

• Vue des performances: Il s'agit d'un profileur de CPU traditionnel. Il vous permet d'enregistrer une session de votre application et de voir dans quelles fonctions le processeur a passé la plupart de son temps. Vous pouvez l'utiliser pour décider où passer votre temps à optimiser.
• DevTools inclut même le sien Débogueur. Cela peut être utile si vous n'utilisez pas d'EDI mais que vous souhaitez tout de même avoir la possibilité d'ajouter des points d'arrêt, de parcourir le code, de consulter les valeurs des variables, etc.

• Vue réseau: c'est complètement nouveau.
  • Comme son nom l'indique, il vous permet d'inspecter le trafic réseau. Vous pouvez voir l'historique complet des demandes effectuées par votre application depuis son démarrage et obtenir des informations détaillées sur chacune d'entre elles. Cela vous évite d'avoir à consigner vous-même ces événements lorsque vous essayez de déboguer un problème de réseau.
  • L'onglet Réseau affiche actuellement le trafic HTTP; les améliorations futures incluent l'affichage Trafic général d'E/S du socket.
  • Les requêtes réseau sont également affichées dans la vue Chronologie afin que vous puissiez les voir dans leur contexte.
• Vue de journalisation: affiche les événements de votre application et du framework. Avec lui, vous pouvez facilement filtrer les messages (par exemple, vous pouvez spécifier "-gc" pour filtrer les événements du Garbage Collector ou "flutter.frame" pour afficher uniquement les événements de frame). Dans Dart, journalisation des messages peut être structuré, et la vue Journalisation l'utilise.

Pour utiliser pleinement DevTools, vous pouvez lire le Documentation. Si vous trouvez des bugs ou si vous souhaitez voter sur de nouvelles fonctionnalités, vous pouvez le faire sur GitHub.