Flex - Applicazione di debug

Flex offre un'eccellente capacità di debug del codice flessibile e Flash Builder 4 ha un eccellente debugger integrato e supporto per la prospettiva di debug.

  • Durante la modalità di debug, Flex Application viene eseguita sulla versione di Flash Player Debugger incorporata in Flash Builder 4 che supporta la funzionalità di debug.

  • Così gli sviluppatori ottengono una configurazione di debug semplice e integrata in Flash Builder

In questo articolo, dimostreremo l'utilizzo del debug del codice Flex Client utilizzando Flash Builder. Faremo le seguenti attività

  • Imposta i punti di interruzione nel codice e visualizzali in Breakpoint Explorer.
  • Scorri il codice riga per riga durante il debug.
  • Visualizza i valori della variabile.
  • Esamina i valori di tutte le variabili.
  • Controlla il valore di un'espressione.
  • Visualizza lo stack frame per i thread sospesi.

Esempio di debug

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2 Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione .

Passaggio 1: posizionare i punti di interruzione

Posizionare un punto di interruzione nella prima riga dell'applicazione Initialize Handler di HelloWorld.mxml

Passaggio 2: eseguire il debug dell'applicazione

Ora fai clic sul menu Debug dell'applicazione e selezionaHelloWorld application per eseguire il debug dell'applicazione.

Se tutto va bene, l'applicazione verrà avviata nel browser e vedrai i seguenti log di debug nella console di 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

Non appena l'applicazione viene avviata, vedrai il focus sul punto di interruzione di Flash Builder poiché abbiamo posizionato il punto di interruzione sulla prima riga del metodo gestore application_initialize.

Puoi vedere lo stacktrace per i thread sospesi.

Puoi vedere i valori per le espressioni.

È possibile visualizzare l'elenco dei punti di interruzione inseriti.

Ora continua a premere F6 fino a raggiungere l'ultima riga del metodo application_initializeHandler (). Come riferimento per i tasti funzione, F6 ispeziona il codice riga per riga, F5 entra ulteriormente e F8 riprenderà l'applicazione. Ora puoi vedere l'elenco dei valori di tutte le variabili del metodo application_initializeHandler ().

Ora puoi vedere che il codice flessibile può essere sottoposto a debug nello stesso modo in cui è possibile eseguire il debug di un'applicazione Java. Posiziona punti di interruzione su qualsiasi linea e gioca con le funzionalità di debug di flex.