Flutter DevTools : Déboguer et optimiser des applications

Outils de débogage et de profilage de Flutter pour des applications plus performantes

Flutter DevTools est l’outil indispensable pour chaque développeur Flutter, offrant un ensemble puissant d’outils de débogage et d’analyse des performances qui vous aident à créer des applications de haute qualité efficacement.

dart-dev-tools

Qu’est-ce que Flutter DevTools ?

Flutter DevTools est un ensemble complet d’outils de profilage des performances et de débogage, spécifiquement conçu pour les applications Flutter et Dart. Il fournit aux développeurs des informations approfondies sur le comportement de leur application, ses caractéristiques de performance et ses problèmes potentiels – tout cela via une interface web intuitive.

Imaginez DevTools comme votre centre de contrôle de mission pour le développement Flutter. Que vous traquiez un bug complexe, optimisiez les performances, analysiez l’utilisation de la mémoire ou inspectiez votre arborescence de widgets, DevTools vous donne la visibilité et le contrôle nécessaires pour créer des applications exceptionnelles.

L’ensemble d’outils inclut plusieurs vues spécialisées :

  • Widget Inspector - Visualisez et explorez votre arborescence de widgets
  • Performance View - Profilage du rendu des frames et identification des ralentissements
  • Memory View - Suivi de l’allocation de mémoire et détection des fuites de mémoire
  • Network Monitor - Inspection des requêtes et réponses HTTP
  • Debugger - Définir des points d’arrêt et parcourir le code pas à pas
  • Logging View - Affichage des logs d’application et messages diagnostiques
  • App Size Tool - Analyse de ce qui contribue à la taille de votre application

Démarrage avec Flutter DevTools

Installation et configuration

Flutter DevTools est fourni avec le SDK Flutter, donc si vous avez Flutter installé, vous avez déjà DevTools. Toutefois, vous pouvez également l’installer comme outil autonome. Si vous êtes nouveau dans Flutter ou si vous devez configurer votre environnement de développement à partir de zéro, notre guide d’installation et de configuration de Flutter peut vous aider à vous assurer que tout est correctement configuré.

Lorsque vous travaillez avec des environnements de développement modernes, une bonne configuration est cruciale. Si vous utilisez VS Code comme éditeur principal, DevTools s’intègre de manière fluide – vous pouvez le lancer directement depuis l’éditeur. Apprendre les raccourcis et commandes essentiels de VS Code peut considérablement accélérer votre flux de travail. Pour ceux qui souhaitent créer des environnements de développement cohérents à travers les équipes, l’utilisation de Dev Containers propose une excellente solution pour des configurations reproductibles.

Pour vérifier si DevTools est disponible :

flutter doctor

Pour activer DevTools globalement :

flutter pub global activate devtools

Pour lancer DevTools depuis la ligne de commande :

flutter pub global run devtools

Lancement de DevTools

Il existe plusieurs façons d’accéder à Flutter DevTools :

Depuis VS Code ou Android Studio : Lorsque vous exécutez une application Flutter en mode débogage, votre IDE fournit généralement un bouton ou une option de menu pour DevTools. Dans VS Code, cherchez l’option “Open DevTools” dans la barre d’outils de débogage.

Depuis la ligne de commande : Lorsque vous exécutez votre application Flutter, vous verrez un message comme :

Flutter DevTools, running on http://127.0.0.1:9100

Ouvrez simplement cette URL dans votre navigateur.

Lancement autonome :

flutter pub global run devtools

Puis connectez-le à votre application Flutter en cours d’exécution en utilisant l’URL du service VM affichée dans votre terminal.

Widget Inspector : Comprendre la structure de votre interface utilisateur

Le Widget Inspector est probablement la fonctionnalité la plus utilisée de DevTools. Il fournit une représentation visuelle de votre arborescence de widgets, facilitant ainsi la compréhension de la structure et du layout de votre application.

Fonctionnalités clés du Widget Inspector

Arborescence visuelle des widgets : Naviguez à travers la hiérarchie des widgets de votre application, voyez exactement comment les widgets sont imbriqués et composés. Cela est précieux lors de l’utilisation de l’approche compositionnelle de Flutter pour construire des interfaces utilisateur.

Explorateur de mise en page : Visualisez comment l’algorithme de mise en page de Flutter positionne et dimensionne les widgets. Vous pouvez voir les contraintes, les dimensions et les informations de positionnement pour tout widget dans l’arborescence.

Panneau des détails du widget : Sélectionnez tout widget pour afficher des informations détaillées, notamment :

  • Propriétés du widget et leurs valeurs
  • Emplacement de création dans votre code source
  • Détails de l’objet de rendu
  • Propriétés diagnostiques

Mode de sélection des widgets : Cliquez sur l’icône de croix, puis cliquez sur tout élément dans votre application en cours d’exécution pour sauter directement à ce widget dans l’inspecteur. Cela est parfait pour investiguer des questions comme “Quel est ce widget ?”.

Debug Paint : Activez des superpositions de débogage visuel qui montrent :

  • Les limites des widgets
  • Les marges et les paddings
  • Les baselines
  • Les limites de repaint

Lorsque vous construisez des mises en page complexes, le Widget Inspector devient indispensable. La représentation visuelle vous aide à comprendre exactement comment Flutter construit votre interface utilisateur – une connaissance essentielle à mesure que vos applications deviennent plus complexes.

Conseils pratiques pour le Widget Inspector

  1. Utilisez l’option “Afficher les lignes directrices” pour voir les problèmes d’alignement et d’espacement
  2. Activez “Mettre en surbrillance les repaints” pour identifier les widgets qui se reconstruisent inutilement
  3. Vérifiez “Inverser les images trop grandes” pour trouver les images qui sont plus grandes que leur taille d’affichage
  4. Utilisez “Afficher les baselines” lors de l’alignement précis du texte

Vue des performances : Optimiser le rendu des frames

Flutter vise 60 fps (frames par seconde) sur la plupart des appareils et 120 fps sur les appareils à taux de rafraîchissement plus élevé. La Vue des performances vous aide à maintenir ces objectifs en identifiant les goulots d’étranglement des performances.

Comprendre le chronogramme des performances

La Vue des performances affiche un chronogramme montrant :

  • Graphique de rendu des frames : Représentation visuelle du timing du thread UI et du thread GPU
  • Temps de frame : Mesures en millisecondes pour chaque frame
  • Frames bâclés : Les frames qui ont pris plus de temps que le budget de frame cible (surlignés en rouge)

Thread UI vs Thread GPU :

  • Thread UI (code Dart) : Où votre code Flutter s’exécute, les widgets sont construits et la mise en page se produit
  • Thread GPU (rendu) : Où les opérations de dessin réelles ont lieu

Les deux threads doivent s’accomplir dans votre budget de frame pour une performance fluide.

Utilisation efficace de la Vue des performances

Identifier les bâclés : Les barres rouges indiquent les frames qui ont manqué la cible. Cliquez sur un frame bâclé pour voir les informations de timing détaillées et identifier les opérations qui ont causé le retard.

Le mode profil est essentiel : Profillez toujours les performances en mode profil, pas en mode débogage. Le mode débogage inclut des vérifications supplémentaires et ne représente pas la performance en production.

flutter run --profile

Événements du chronogramme : Le chronogramme montre des événements spécifiques comme :

  • Opérations de construction de widgets
  • Calculs de mise en page
  • Opérations de peinture
  • Compilation de shaders GPU

La compréhension de l’optimisation des performances est cruciale pour offrir une expérience utilisateur fluide. La gestion efficace de l’état de l’application peut avoir un impact significatif sur les performances de rendu, car les reconstructions inutiles sont une source courante de bâclés. Choisir la bonne approche de gestion de l’état pour votre application Flutter est essentiel – différentes approches comme Provider, BLoC, Riverpod et d’autres ont des caractéristiques de performance variables qui affectent directement la fréquence des reconstructions de widgets.

Stratégies d’optimisation des performances

  1. Minimiser les reconstructions de widgets : Utilisez les constructeurs const autant que possible
  2. Exploiter RepaintBoundary : Isoler les widgets coûteux pour éviter les repaints inutiles
  3. Éviter les opérations coûteuses dans les méthodes build : Déplacer les calculs en dehors de build
  4. Utiliser ListView.builder pour les listes longues : Construire les éléments de manière paresseuse au lieu de tout à la fois
  5. Profiler sur des appareils réels : Les émulateurs ne représentent pas la performance réelle

Vue de la mémoire : Suivi de l’utilisation de la mémoire

Les fuites de mémoire et l’utilisation excessive de mémoire peuvent provoquer des plantages ou une mauvaise performance des applications. La Vue de la mémoire vous aide à comprendre l’empreinte mémoire de votre application et à identifier les problèmes potentiels.

Métriques clés de mémoire

Aperçu de la mémoire :

  • Mémoire totale utilisée par votre application
  • Tendances d’allocation de mémoire au fil du temps
  • RSS (Resident Set Size) - mémoire physique réelle utilisée

Chronogramme d’allocation de mémoire : Graphique visuel montrant l’utilisation de la mémoire au fil du temps. Recherchez :

  • Augmentations constantes (potentielles fuites de mémoire)
  • Pics importants (opérations coûteuses ou structures de données volumineuses)
  • Formes en dents de scie (allocation normale et collecte de déchets)

Analyse des captures d’écran de mémoire

Prenez des captures d’écran de mémoire pour voir :

  • Objets alloués dans le tas
  • Comptes d’objets par classe
  • Utilisation de mémoire par classe
  • Références maintenant les objets vivants

Comparaison des captures d’écran : Prenez une capture d’écran, effectuez une action, prenez une autre capture d’écran, puis comparez-les pour voir quels objets ont été créés et non libérés.

Problèmes de mémoire courants

Mémoire d’images : Les images, en particulier les images de haute résolution, consomment une quantité importante de mémoire. Utilisez des images de taille appropriée et envisagez d’utiliser des stratégies de mise en cache.

Écouteurs non libérés : Les StreamSubscriptions, AnimationControllers et autres écouteurs qui ne sont pas correctement libérés provoquent des fuites de mémoire.

Grandes listes en mémoire : Charger l’intégralité des grandes données dans la mémoire au lieu d’utiliser le pagination ou le chargement paresseux.

Moniteur réseau : Débogage du trafic HTTP

Le Moniteur réseau fournit une visibilité sur toutes les requêtes et réponses HTTP que votre application effectue, essentiel pour déboguer les problèmes d’intégration API.

Fonctionnalités de la vue réseau

Liste des requêtes : Voir toutes les requêtes réseau incluant :

  • Méthode HTTP (GET, POST, etc.)
  • URL
  • Code d’état
  • Temps de requête et de réponse
  • Taille des données

Détails de la requête : Cliquez sur toute requête pour voir :

  • En-têtes (requête et réponse)
  • Corps de la requête
  • Corps de la réponse
  • Informations de timing

Support WebSocket : Surveiller les connexions WebSocket et les messages en temps réel.

Débogage des problèmes d’API

Le Moniteur réseau vous aide à :

  1. Vérifier que les requêtes sont effectuées avec les bonnes URLs et paramètres
  2. Inspecter les en-têtes d’authentification pour vous assurer que les jetons sont envoyés
  3. Examiner les données de réponse pour voir ce que l’API renvoie effectivement
  4. Identifier les appels d’API lents qui affectent l’expérience utilisateur
  5. Déboguer les problèmes CORS dans les applications Flutter web

Lorsque vous construise心 des applications avec des services backend, comprendre comment votre application communique avec les API est crucial. Que vous travailliez avec des services RESTful, implémentez des API en Go ou intégriez AWS Amplify pour votre backend Flutter, le Moniteur réseau fournit la visibilité nécessaire pour déboguer et optimiser les communications réseau.

Débogueur : Exécution pas à pas du code

Le débogueur intégré vous permet de suspendre l’exécution, d’inspecter les variables et de parcourir votre code ligne par ligne.

Capacités du débogueur

Points d’arrêt : Définissez des points d’arrêt en cliquant dans la marge de votre IDE ou en utilisant l’interface du débogueur. L’exécution s’arrête lorsqu’un point d’arrêt est atteint.

Inspection des variables : Lorsque vous êtes arrêté, inspectez :

  • Les variables locales et leurs valeurs
  • Les propriétés des objets
  • La pile d’appel
  • L’évaluation d’expressions

Contrôles de débogage :

  • Passer à la ligne suivante : Exécuter la ligne actuelle et passer à la suivante
  • Entrer dans la fonction : Entrer dans une appel de fonction pour déboguer à l’intérieur
  • Sortir de la fonction : Terminer la fonction actuelle et retourner à l’appelant
  • Continuer : Reprendre l’exécution jusqu’au prochain point d’arrêt

Points d’arrêt conditionnels : Définissez des points d’arrêt qui ne se déclenchent que lorsque des conditions spécifiques sont remplies, utiles lors du débogage de problèmes qui surviennent dans des scénarios spécifiques.

Bonnes pratiques de débogage

  1. Utilisez des noms de variables significatifs pour une inspection plus facile
  2. Ajoutez des instructions print descriptives en combinaison avec des points d’arrêt
  3. Utilisez la pile d’appel pour comprendre le flux d’exécution
  4. Utilisez des points d’arrêt conditionnels pour les problèmes qui surviennent après de nombreuses itérations
  5. Inspectez l’état des widgets pendant les reconstructions pour comprendre les changements d’état
  6. Gardez à portée de main une feuille de calcul Dart/Flutter pour une référence rapide à la syntaxe et aux modèles courants pendant le débogage

Vue des logs : Diagnostics de l’application

La Vue des logs agrège toutes les sorties de log de votre application, y compris :

  • print() statements
  • debugPrint() output
  • developer.log() messages
  • Messages de diagnostic du framework
  • Messages d’erreur et traces de pile

Stratégies de log efficaces

Log structuré : Utilisez des formats de message de log cohérents pour faciliter le filtrage et la recherche :

developer.log(
  'Action utilisateur effectuée',
  name: 'UserService',
  error: error,
  stackTrace: stackTrace,
);

Niveaux de log : Différenciez entre différents niveaux de gravité :

  • Informations de débogage
  • Messages informatifs
  • Avertissements
  • Erreurs

Filtrer et chercher : Utilisez les capacités de filtrage de la Vue des logs pour vous concentrer sur certains types de messages ou composants spécifiques.

Outil de taille de l’application : Analyse de la taille de la build

Comprendre ce qui contribue à la taille de votre application est important pour maintenir une taille de téléchargement raisonnable et éviter les restrictions des magasins d’applications.

Fonctionnalités d’analyse de la taille

L’outil de taille de l’application décompose votre application compilée en :

  • Code Dart : Votre code d’application et dépendances
  • Actifs : Images, polices et autres ressources
  • Code natif : Code et bibliothèques spécifiques à la plateforme

Réduction de la taille de l’application

  1. Supprimez les dépendances inutilisées du fichier pubspec.yaml
  2. Optimisez les images : Utilisez des formats et résolutions appropriés
  3. Activez le rétrécissement du code avec l’indicateur --split-debug-info
  4. Chargez paresseusement les fonctionnalités qui ne sont pas immédiatement nécessaires
  5. Analysez les contributions des packages et envisagez des alternatives plus légères
  6. Considérez les builds conteneurisés : Dockerisez votre application web Flutter peut vous aider à créer des builds de production optimisés avec des tailles de sortie cohérentes

Intégration avec les environnements de développement

Intégration avec VS Code

VS Code offre une excellente intégration de Flutter DevTools. Lorsque vous configurez votre environnement de développement, VS Code offre une expérience fluide pour le développement Flutter avec un accès intégré à DevTools.

L’extension Flutter pour VS Code propose :

  • Lancement d’un clic de DevTools
  • Débogage intégré
  • Support du hot reload
  • Inspection des widgets directement dans l’éditeur

Pour les développeurs souhaitant aller plus loin dans la configuration de VS Code, maîtriser les raccourcis clavier et les configurations de l’espace de travail peut considérablement améliorer la productivité. Comprendre quels outils et frameworks sont les plus populaires peut également vous aider à prendre des décisions éclairées sur les technologies dans lesquelles investir votre temps.

Intégration avec Android Studio

Android Studio propose également une intégration native de DevTools :

  • Bouton DevTools dans la barre d’outils
  • Intégré avec le panneau Flutter Inspector
  • Flux de travail de débogage fluide

Bonnes pratiques pour utiliser Flutter DevTools

Intégration dans le flux de travail de développement

Tôt et souvent : Ne tardez pas à avoir des problèmes. Utilisez régulièrement DevTools pendant le développement :

  • Vérifiez la structure des widgets pendant la construction
  • Profil de performance progressivement
  • Suivi de l’utilisation de la mémoire pendant le développement des fonctionnalités

Testez sur des appareils réels : Les émulateurs et simulateurs ne représentent pas correctement les performances réelles. Profil toujours sur des appareils physiques, surtout sur des appareils bas de gamme que vos utilisateurs pourraient avoir.

Mode de profil pour les performances : N’oubliez pas d’utiliser le mode de profil lors de la mesure des performances. Le mode de débogage inclut des vérifications qui ralentissent considérablement votre application.

flutter run --profile

Documentez les métriques de base : Enregistrez les métriques de performance pour les écrans clés et les flux d’utilisateurs. Cela vous aide à remarquer lorsque les changements dégradent les performances.

Collaboration d’équipe

Partagez les URLs DevTools : Lorsque vous déboguez avec des membres d’équipe, vous pouvez partager l’URL DevTools pour des sessions de débogage collaboratives (assurez-vous que les applications sont en cours d’exécution sur des réseaux accessibles).

Prenez des captures d’écran comme preuve : DevTools facilite la capture de captures d’écran des arborescences de widgets, des chronogrammes de performances et des graphiques de mémoire pour les rapports de bugs et la documentation.

Établissez des budgets de performance : En tant qu’équipe, définissez des métriques de performance acceptables :

  • Temps maximum de rendu de frame
  • Utilisation maximale de mémoire
  • Taille d’application acceptable
  • Plages de temps de réponse d’API

Fonctionnalités avancées de DevTools

Liens profonds du chronogramme

Vous pouvez partager des chronogrammes de performances spécifiques en enregistrant et en chargeant les données du chronogramme. Cela est utile pour :

  • Comparer les performances entre différentes versions de code
  • Partager des problèmes de performance avec des membres d’équipe
  • Documenter les améliorations de performance

Propriétés diagnostiques personnalisées

Ajoutez des propriétés diagnostiques personnalisées à vos widgets pour un meilleur débogage :

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
  super.debugFillProperties(properties);
  properties.add(StringProperty('userId', userId));
  properties.add(IntProperty('itemCount', items.length));
}

Ces propriétés apparaissent dans le Widget Inspector, rendant le débogage plus informatif.

Extensions de DevTools

L’équipe Flutter continue d’ajouter de nouvelles fonctionnalités et outils à DevTools. Mettez à jour votre SDK Flutter pour accéder aux dernières capacités :

flutter upgrade

Problèmes courants et solutions

Problème : DevTools ne se connecte pas

Solution :

  • Assurez-vous que votre application s’exécute en mode débogage ou en mode profil
  • Vérifiez qu’il n’y a pas de problèmes de pare-feu bloquant le port DevTools
  • Essayez de lancer DevTools avec l’URL du service VM explicite

Problème : Les données de performance semblent incorrectes

Solution :

  • Confirmez que vous exécutez en mode profil, pas en mode débogage
  • Testez sur un appareil physique, pas sur un émulateur
  • Redémarrez DevTools et votre application

Problème : Le Widget Inspector ne montre pas tous les widgets

Solution :

  • Activez “Afficher le bandeau de mode débogage” pour confirmer que vous êtes en mode débogage
  • Essayez de désactiver et d’activer le mode de sélection des widgets
  • Redémarrez l’application si le hot reload a causé des problèmes d’état

Conclusion

Flutter DevTools est un élément indispensable de l’écosystème de développement Flutter. En maîtrisant ses différentes fonctionnalités – du Widget Inspector à la Vue des performances, de la profilage de mémoire à la surveillance réseau – vous serez équipés pour construire efficacement des applications de haute performance sans bugs.

La clé pour tirer le meilleur parti de DevTools est de le rendre un élément régulier de votre flux de travail de développement, pas seulement un outil que vous utilisez lorsque des problèmes surviennent. L’utilisation régulière vous aide à comprendre profondément le comportement de votre application et à détecter les problèmes potentiels avant qu’ils ne deviennent des problèmes.

Que vous débogiez un problème de mise en page complexe, optimisiez les performances pour des animations fluides à 60fps, traquiez une fuite de mémoire ou enquêtiez sur des problèmes d’intégration API, Flutter DevTools vous fournit la visibilité et les informations nécessaires pour réussir.

Commencez à intégrer DevTools dans votre développement Flutter quotidien dès maintenant, et vous vous demanderez rapidement comment vous avez pu développer sans lui.

Quand utiliser chaque fonctionnalité de DevTools

Widget Inspector :

  • Créer de nouvelles mises en page UI
  • Comprendre les structures de widgets existants
  • Déboguer les problèmes de mise en page
  • Optimiser les performances de reconstruction des widgets

Vue des performances :

  • Profil de rendu des frames
  • Identifier les ralentissements et les frames perdus
  • Optimiser les animations
  • Assurer une performance de 60fps

Vue de la mémoire :

  • Investiguer les plantages de l’application
  • Trouver les fuites de mémoire
  • Optimiser l’utilisation de la mémoire
  • Comprendre les schémas d’allocation de mémoire

Moniteur réseau :

  • Déboguer les intégrations API
  • Vérifier les données de requête/réponse
  • Identifier les appels réseau lents
  • Résoudre les problèmes d’authentification

Débogueur :

  • Investiguer les erreurs logiques
  • Comprendre le flux d’exécution
  • Inspecter l’état des variables
  • Suivre les exceptions

Vue des logs :

  • Surveiller le comportement de l’application
  • Suivre les actions utilisateur
  • Déboguer les problèmes dans les builds en production (avec un logging approprié)
  • Comprendre les messages du framework

Où en savoir plus

Flutter DevTools évolue continuellement avec de nouvelles fonctionnalités et améliorations. Restez à jour avec :

  • La documentation officielle Flutter
  • Les notes de version de Flutter DevTools
  • Les forums et discussions de la communauté Flutter
  • Les conférences et tutoriels sur le développement Flutter

Lorsque vous poursuivez votre parcours de développement Flutter, souvenez-vous que DevTools n’est qu’une partie d’un ensemble complet d’outils. Comprendre les fondamentaux du langage Dart, maîtriser votre IDE, implémenter des modèles de gestion d’état appropriés et suivre les bonnes pratiques de déploiement travaillent ensemble pour créer un flux de travail de développement solide.

Références externes et ressources

Cet article a été rédigé à l’aide des informations provenant des sources suivantes :

Liens utiles