Created

22 March 2010

Requirements

User level
All
 

 
Déboguer le code côté client

 
 

 
Code

 
 

<?xml version="1.0" encoding="utf-8"?> <s:Application …> <fx:Script> <![CDATA[ (…) protected function empDg_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void { trace(employee.firstname); trace(employee); trace(empDg.dataProvider); trace((empDg.dataProvider as AsyncListView).list); employeeService.updateEmployee(employee); ]]> </fx:Script> (…) </s:Application>

 
Didacticiel

Dans ce didacticiel, vous allez utiliser le débogueur de Flash Builder pour déboguer le code Flex. Vous commencerez par suivre des variables afin d'en afficher les valeurs dans la vue Console de Flash Builder au moment de l'exécution. Vous allez ensuite ajouter des points d'arrêt dans un gestionnaire d'événements pour interrompre l'exécution du code et examiner les valeurs de variables dans le débogueur de Flash Builder.
 
Pour que vous puissiez déboguer des applications, la version de débogage de Flash Player doit être installée sur votre navigateur. Cette opération s'effectue lors de l'installation de Flash Builder.
 
 
Étape 1 : Suivez des variables.
À l'intérieur du gestionnaire gridItemEditorSessionSave du DataGrid, empDg_gridItemEditorSessionSave, utilisez la fonction trace() pour afficher les variables employee.firstname, employee, empDg.dataProvider et (empDg.dataProvider as AsyncListView).list.
 
Le gestionnaire doit se présenter comme suit :
 
protected function empDg_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void { trace(employee.firstname); trace(employee); trace(empDg.dataProvider); trace((empDg.dataProvider as AsyncListView).list); employeeService.updateEmployee(employee); }
 
Étape 2 : Déboguez l'application.
Cliquez sur le bouton Déboguer pour déboguer l'application. Modifiez le prénom d'un employé, revenez dans Flash Builder et affichez la vue Console.
 
Pour le premier suivi (employee.firstname), le prénom que vous avez modifié est affiché (voir Figure 1). Pour le deuxième suivi (employee), vous obtenez [object Employee], ce qui indique qu'il s'agit d'un objet complexe de type Employee. En revanche, aucune des valeurs de propriété n'est affichée. Pour le troisième suivi (empDg.dataProvider), vous êtes informé que l'objet est de type AsyncListView et comporte 13 éléments. Pour le quatrième suivi, vous obtenez une liste d'objets Employee délimités par des virgules, ce qui indique qu'il s'agit d'un tableau d'objets Employee, mais là encore, aucune valeur de propriété n'apparaît.
 
 Examinez le suivi des variables liées aux employés dans la vue Console.

Figure 1. Examinez le suivi des variables liées aux employés dans la vue Console.

 
Étape 3 : Arrêtez le débogueur et alternez entre les perspectives.
Cliquez sur l'un des boutons rouges Arrêter, puis sur les boutons Flash et Flash Debug situés dans l'angle supérieur droit pour alterner entre les perspectives de développement et de débogage. Terminez par la perspective de développement.
 
Si les deux boutons ne sont pas visibles simultanément, cliquez sur le bord gauche de l'onglet et faites-le glisser vers la gauche jusqu'à ce que les deux boutons soient visibles (voir Figure 2).
 
 Alternez entre les perspectives de développement et de débogage.

Figure 2. Alternez entre les perspectives de développement et de débogage.

 
Étape 4 : Ajoutez un point d'arrêt.
Double-cliquez sur la barre de marqueurs (à gauche des numéros de ligne) en regard de la première ligne de code à l'intérieur du gestionnaire gridItemEditorSessionSave du DataGrid, empDg_gridItemEditorSessionSaveHandler (voir Figure 3). Déboguez l'application et modifiez une cellule.
 

Figure 3. Ajoutez un point d'arrêt.

Après avoir modifié une cellule dans le navigateur, vous revenez automatiquement dans Flash Builder (il se peut que le bouton du logiciel clignote dans la barre de lancement rapide ou la barre des tâches et que vous deviez y accéder manuellement). La première ligne de code du gestionnaire y est désormais précédée d'une flèche, ce qui indique que l'exécution du code s'est arrêtée à ce niveau (voir Figure 4).
 
 Repérez l'endroit où l'exécution du code a été interrompue.

Figure 4. Repérez l'endroit où l'exécution du code a été interrompue.

 
Étape 5 : Examinez les variables dans la vue Variables.
Effectuez un zoom avant sur l'objet event et repérez la propriété columns.dataField.
 
Elle doit contenir deux variables : this et event (voir Figure 5) — this fait référence à l'application elle-même ; event est la variable transmise à empDg_gridItemEditorSessionSaveHandler(). Repérez la propriété event.column.dataField, c'est-à-dire la référence au champ modifié dans le DataGrid.
 
Examinez les variables dans la vue Variables.

Figure 5. Examinez les variables dans la vue Variables.

 
Étape 6 : Examinez les propriétés héritées de l'objet event.
Effectuez un zoom avant sur les propriétés héritées de l'objet event, puis sur la propriété currentTarget (voir Figure 6).
 
currentTarget fait référence au DataGrid empDg, c'est-à-dire à l'objet qui écoute l'événement diffusé. Effectuez un zoom avant sur les propriétés de l'objet currentTarget et repérez la propriété dataProvider. dataProvider est une classe AsyncListView dont la propriété list désigne une classe ArrayCollection d'objets Employee. Examinez les valeurs de l'un des objets Employee.
 
 Effectuez un zoom avant sur la propriété currentTarget héritée de l'objet event.

Figure 6. Effectuez un zoom avant sur la propriété currentTarget héritée de l'objet event.

Remarque : vous pouvez double-cliquer sur l'onglet Variables (ou sur n'importe quel onglet de Flash Builder) pour l'afficher en mode plein écran, ce qui est très utile pour afficher plusieurs variables à la fois. Pour rétablir la taille initiale de l'onglet, double-cliquez de nouveau dessus.
 
 
Étape 7 : Avancez d'un pas avec entrée dans le code.
Cliquez au moins dix fois sur le bouton Avancer d'un pas avec entrée (voir Figure 7) et contrôlez les variables pendant que le débogueur exécute le code pas à pas. Arrêtez l'exécution lorsque vous atteignez un autre fichier et cliquez sur le bouton Exécuter jusqu'à l'instruction de retour pour reprendre l'exécution du code au niveau du fichier MXML.
 
Plusieurs fichiers s'ouvrent et se ferment à mesure que le code d'autres classes s'exécute.
 
 Utilisez les boutons de la barre d'outils de la vue Débogage pour exécuter le code pas à pas.

Figure 7. Utilisez les boutons de la barre d'outils de la vue Débogage pour exécuter le code pas à pas.

Vous pourriez continuer à exécuter le code pas à pas et à contrôler les valeurs des variables dans la vue Variables, mais si la valeur d'une variable particulière vous intéresse, vous pouvez la contrôler de manière explicite.
 
Développeurs PHP utilisant Flash Builder 4.5 pour PHP : vous pouvez également insérer des points d'arrêt dans les fichiers PHP présents dans le projet PHP Flash Builder pour déboguer et parcourir le code côté client et serveur à·la·fois. Pour déboguer le code côté serveur, vous devez le déboguer en tant qu'application web (PHP), et non comme une application web, car le débogueur PHP doit démarrer à partir d'une session de navigation PHP. Pour être certain d'exécuter l'application en tant qu'application web (PHP), choisissez Déboguer en tant que dans le menu du bouton Déboguer ou l'option de menu principal Exécuter, ou créez une configuration d'exécution spécifique.
 
 
Étape 8 : Contrôlez les variables.
Sélectionnez employee dans le gestionnaire empDg_gridItemEditorSessionSaveHandler(), puis Créer une expression de contrôle. Dans la vue Expressions, ajoutez une nouvelle expression à contrôler : employee.firstname (voir Figure 8). Cliquez sur le bouton Reprendre du débogueur de Flash Builder (voir Figure 7), revenez à l'application dans la fenêtre du navigateur, modifiez une autre valeur du DataGrid, puis revenez dans Flash Builder et observez les nouvelles valeurs dans la vue Expressions (voir Figure 9).
 
 Créez une expression de contrôle

Figure 8. Créez une expression de contrôle

Contrôlez une variable.

Figure 9. Contrôlez une variable.

Arrêtez le débogueur.
 
Dans ce module, vous avez appris à utiliser l'opération de test de Flash Builder pour tester le code côté serveur, le moniteur de réseau pour suivre le trafic réseau entre l'application Flex et le serveur, et le débogueur pour déboguer l'application Flex.
 
Dans le module suivant, vous allez apprendre à déployer une application.
 

 
Pour en savoir plus

Pour en savoir plus sur cette rubrique, consultez les ressources suivantes :
 
 
Documentation: Utilisation de Flash Builder 4.5
 
Documentation : Utilisation de Flex 4.5
 
Pôle de développement Flex