Share
De nombreux développeurs Flash utilisent la classe Alert pour le débogage ou des instructions de trace en raison d'associations avec Flash. Flex a un vrai débogueur et c'est un excellent outil. Je vais vous montrer comment comprendre ce didacticiel..
Les erreurs du compilateur sont faciles à repérer et à corriger. Vous recevez un point rouge avec un X, vous indiquant où et quel est le problème..
Les erreurs d'exécution sont plus difficiles à détecter. Le débogueur aide les développeurs en traçant les erreurs d'exécution, en donnant à la fenêtre une vue de ce qui se passe pendant l'exécution de l'application, des valeurs définies pour, de ce qui se passe dans une boucle ou de la raison pour laquelle l'instruction if ne fonctionne pas..
OK, commençons - mais avant de commencer, voici quelques outils dont vous aurez besoin:
Téléchargez ceci ici. Au cours de ce tutoriel, j'utilise «le débogueur de contenu du plug-in Macintosh Flash Player 10 (Mac à processeur Intel (ZIP), 6,03 Mo)». Pour tester quelle version de Flash Player que vous avez installée, jetez un œil à cet outil pratique de Peter deHaan, qui a d'ailleurs un super blog;)
Voir en taille réelle Bien sûr, vous en aurez besoin. Si vous ne l'avez pas, vous pouvez toujours en obtenir un exemplaire gratuit:
Échantillons avec code
Référence du langage Adobe® Flex ™ 3.3
Les captures d’écran de ce menu sont réalisées sur Mac, mais doivent être identiques à celles du PC. Ma perspective de fenêtre peut être différente de ce que vous voyez, mais vous pouvez trouver tous les onglets dans le menu de la fenêtre..
SI vous êtes prêt, commençons!
J'ai créé un nouveau projet Flex. très simple, un panneau avec deux boutons. Chaque bouton appellera sa fonction clic; b1_click () lancera une boucle, appelez la fonction update_Label (). b2_click () créera une erreur d'exécution, car la valeur n_error n'existe pas.
/> Voir en taille réelle Qu'est-ce qu'un point d'arrêt? Un point d'arrêt est défini sur une ligne exécutable d'un programme. Si le point d'arrêt est activé lors du débogage, l'exécution est suspendue avant que cette ligne de code ne soit exécutée. Pour suspendre l'application pendant son exécution, vous devez définir un point d'arrêt. C'est facile à faire. double-cliquez sur l'espace vide à côté du numéro de ligne. Double-cliquez dessus à nouveau pour supprimer.
Je fixe deux points d'arrêt; lignes 10 et 20 (deux points bleus apparaissent dans la marge). Si je clique sur button1, il s’arrêtera sur la ligne 10, cliquez sur button2 il s’arrêtera sur la ligne 20.
Vous pouvez voir tous vos points d'arrêt dans l'onglet «Points d'arrêt» et vous pouvez les ajouter ou les supprimer à tout moment. De plus, vous pouvez utiliser les cases à cocher pour les activer / désactiver temporairement.
Si vous souhaitez voir comment le nombre change au fil du temps, mettez en surbrillance la valeur, cliquez avec le bouton droit de la souris, sélectionnez «Regarder 'num'»..
«Num» est maintenant ajouté à l'onglet Expressions.
/> Voir en taille réelle Maintenant que tout est configuré, commençons la section de débogage. Cliquez sur l'icône qui ressemble à un bug
/> Voir en taille réelle ou sélectionnez-le dans le menu:
/> Voir en taille réelle Lorsque l'application démarre, vous pouvez la voir dans le navigateur, mais rien ne se passe, que faire ensuite? Le point de rupture est défini dans la fonction, nous devons donc l'exécuter.
/> Voir en taille réelle Pour déclencher le point d'arrêt, cliquez sur “Bouton 1” pour appeler la fonction b1_click (). L’application s’arrête alors à la ligne 10 et num est toujours égal à 0 puisque le code "num + = 1;" n'a pas encore exécuté. Regardez l'onglet Debug. certaines icônes s'allument et certaines valeurs sont maintenant visibles.
/> Voir en taille réelle Voyons d'abord l'onglet Variables. quelques points à noter:
/> Voir en taille réelle Ouvrez «ceci», une longue liste apparaîtra. La liste ne cessera de s'allonger, vous remarquerez alors que votre ordinateur ralentit;)
Puisque je sais que je veux me concentrer sur “button2.label”, trouvons-le et clique-droit pour sélectionner “Créer une expression de surveillance”.
Maintenant, jetez un coup d'oeil à l'onglet Expressions, simple et propre, juste comme je l'aime. Deux variables que nous examinons maintenant, «num» que nous avons créé plus tôt et «this.button2.label».
Regardons maintenant l'onglet de débogage. Dans cet onglet, vous verrez que certaines icônes sont maintenant activées, une liste de noms de fonctions et des noms de composants. La capture d'écran ci-dessous montre que nous sommes actuellement dans la fonction myLoop et que le composant «button2» a effectué un «clic» pour appeler cette fonction..
/> Voir en taille réelle Ces icônes que nous avons remarquées (vous pouvez les trouver dans menu> exécuter aussi), à quoi servent-elles??
/> Voir en taille réelle Lorsqu'un thread est suspendu, les contrôles pas à pas peuvent être utilisés pour exécuter l'exécution du programme ligne par ligne..
Souvent, vous pouvez également utiliser des raccourcis - mémorisez-les!
F6 et F8 seront vos meilleurs amis, souvenez-vous d'eux!
Appuyez sur F6 à quelques reprises. Gardez un œil sur l'onglet Expression, voyez en quoi la valeur change.
/> Voir en taille réelle Continuez à appuyer sur F6! La valeur de num est en train de changer dans l'onglet Expressions.
/> Voir en taille réelle Si votre boucle ne se termine jamais, se termine tôt ou même ne commence jamais, vous pouvez regarder l'action de près pour voir ce qui se passe. Une fois la boucle terminée, la deuxième fonction update_Label () est appelée. Si vous appuyez sur F6, vous passerez au-dessus, mais nous voulons voir ce qui se passe. dans le update_Label (). Appuyez sur F5 "Pas à pas".
/> Voir en taille réelle Nous sommes maintenant dans la fonction update_Label ().
/> Voir en taille réelle Vous pouvez appuyer sur F7 pour revenir à myLoop (). La valeur de «this.button2.label» a été modifiée.
/> Voir en taille réelle Appuyez sur F8 pour reprendre l'application. Maintenant, l'étiquette de button2 a été mise à jour.
/> Voir en taille réelle OK, maintenant, testons le bogue dans l'application. Nous savons qu'il y a un bogue dans la fonction b2_click (), voyons-le donc en action. Cliquez sur «Bouton 2», la fonction b2_click () sera appelée et l'application s'arrêtera à l'erreur..
/> Voir en taille réelle Examinez l'onglet Débogage. Ici, il vous dit quelle est l'erreur et qui appelle.
/> Voir en taille réelle Voici ce qui est affiché dans l'onglet Console. Il vous donne plus d'informations sur l'erreur et le numéro de ligne où l'erreur s'est produite.
/> Voir en taille réelle Vous pouvez toujours modifier la valeur des variables lorsque l'application est suspendue. Par exemple, si je souhaite remplacer button2.label de «num = 10» par «nouvelle étiquette», procédez comme suit: commencez par rechercher la variable «étiquette», cliquez avec le bouton droit de la souris et sélectionnez Modifier la valeur..
La fenêtre Set Value apparaît et affiche la valeur actuelle..
Je vais changer cette chaîne en "nouveau label", puis appuyer sur OK.
Maintenant, dans l'onglet Variables, la nouvelle valeur est définie.
Reprendre l'application, vous verrez que l'étiquette a été mise à jour.
/> Voir en taille réelle Bon, maintenant vous savez utiliser le débogueur! Voici un résumé rapide:
Si vous pensez être prêt à tester vos compétences de débogage maintenant, essayez-les sur votre propre application.!
Un dernier conseil pour ceux qui découvrent Flex: n'oubliez pas de toujours exporter une version validée, pas la version de débogage, qui est beaucoup plus volumineuse. J'espère que vous avez aimé lire!
Accentsconagua