Flex - Application de débogage

Flex offre une excellente capacité de débogage du code flex et Flash Builder 4 possède une excellente prise en charge intégrée du débogueur et de la perspective de débogage.

• En mode débogage, Flex Application s'exécute sur la version Flash Player Debugger intégrée à Flash Builder 4 qui prend en charge la fonction de débogage.

• Ainsi, les développeurs bénéficient d'une configuration de débogage simple et intégrée dans Flash Builder

Dans cet article, nous allons montrer l'utilisation du débogage du code Flex Client à l'aide de Flash Builder. Nous effectuerons les tâches suivantes

• Définissez des points d'arrêt dans le code et visualisez-les dans l'Explorateur de points d'arrêt.
• Parcourez le code ligne par ligne pendant le débogage.
• Afficher les valeurs de variable.
• Inspectez les valeurs de toutes les variables.
• Inspectez la valeur d'une expression.
• Affichez le cadre de la pile pour les fils suspendus.

Exemple de débogage

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";
         }
      ]]>
   </fx:Script>

   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application .

Étape 1 - Placer des points d'arrêt

Placez un point d'arrêt sur la première ligne du gestionnaire d'initialisation de l'application de HelloWorld.mxml

Étape 2 - Déboguer l'application

Cliquez maintenant sur le menu de l'application Déboguer et sélectionnezHelloWorld application pour déboguer l'application.

Si tout va bien, l'application se lancera dans le navigateur et vous verrez les journaux de débogage suivants dans la console Flash Builder.

[SWF] \HelloWorld\bin-debug\HelloWorld.swf 
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1 
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2 
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3 
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4 
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5 
- 318,334 bytes after decompression

Dès que l'application est lancée, vous verrez le focus sur le point d'arrêt de Flash Builder car nous avons placé le point d'arrêt sur la première ligne de la méthode application_initialize Handler.

Vous pouvez voir le stacktrace pour les threads suspendus.

Vous pouvez voir les valeurs des expressions.

Vous pouvez voir la liste des points d'arrêt placés.

Continuez maintenant à appuyer sur F6 jusqu'à ce que vous atteigniez la dernière ligne de la méthode application_initializeHandler (). Comme référence pour les touches de fonction, F6 inspecte le code ligne par ligne, F5 avance plus loin et F8 reprend l'application. Vous pouvez maintenant voir la liste des valeurs de toutes les variables de la méthode application_initializeHandler ().

Vous pouvez maintenant voir que le code flex peut être débogué de la même manière qu'une application Java peut être déboguée. Placez des points d'arrêt sur n'importe quelle ligne et jouez avec les capacités de débogage de flex.