Flex - Debug-Anwendung

Flex bietet hervorragende Möglichkeiten zum Debuggen von Flex-Code und Flash Builder 4 bietet eine hervorragende integrierte Unterstützung für Debugger und Debugging-Perspektiven.

• Im Debug-Modus wird Flex Application auf der in Flash Builder 4 integrierten Flash Player Debugger-Version ausgeführt, die die Debugging-Funktion unterstützt.

• So erhalten Entwickler eine einfache und integrierte Debugging-Konfiguration in Flash Builder

In diesem Artikel wird die Verwendung des Debuggens von Flex Client-Code mit Flash Builder demonstriert. Wir werden die folgenden Aufgaben erledigen

• Legen Sie Haltepunkte im Code fest und sehen Sie sie im Haltepunkt-Explorer.
• Gehen Sie beim Debuggen zeilenweise durch den Code.
• Zeigen Sie die Werte der Variablen an.
• Überprüfen Sie die Werte aller Variablen.
• Überprüfen Sie den Wert eines Ausdrucks.
• Zeigen Sie den Stapelrahmen für hängende Threads an.

Debugging-Beispiel

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht.

Es folgt der Inhalt der geänderten mxml-Datei 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>

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns im normalen Modus kompilieren, wie wir es im Kapitel Flex - Anwendung erstellen getan haben .

Schritt 1 - Haltepunkte setzen

Platzieren Sie einen Haltepunkt in der ersten Zeile der Anwendung. Initialisieren Sie den Handler von HelloWorld.mxml

Schritt 2 - Debug-Anwendung

Klicken Sie nun auf das

Menü Debug-Anwendung und wählen SieHelloWorld Anwendung zum Debuggen der Anwendung.

Wenn alles in Ordnung ist, wird die Anwendung im Browser gestartet und in der Flash Builder-Konsole werden die folgenden Debug-Protokolle angezeigt.

[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

Sobald die Anwendung gestartet wird, wird der Fokus auf den Flash Builder-Haltepunkt angezeigt, da wir den Haltepunkt in der ersten Zeile der application_initialize-Handler-Methode platziert haben.

Sie können die Stapelverfolgung für angehaltene Threads sehen.

Sie können die Werte für Ausdrücke sehen.

Sie können die Liste der platzierten Haltepunkte sehen.

Drücken Sie nun F6, bis Sie die letzte Zeile der application_initializeHandler () -Methode erreicht haben. Als Referenz für Funktionstasten prüft F6 den Code Zeile für Zeile, F5 tritt weiter ein und F8 setzt die Anwendung fort. Jetzt können Sie die Werteliste aller Variablen der application_initializeHandler () -Methode anzeigen.

Jetzt können Sie sehen, dass der Flex-Code genauso debuggt werden kann wie eine Java-Anwendung. Platzieren Sie Haltepunkte auf einer beliebigen Linie und spielen Sie mit den Debugging-Funktionen von Flex.