Flex - aplicativo de depuração

O Flex oferece excelente capacidade de depuração de código flexível e o Flash Builder 4 possui um excelente depurador integrado e suporte à perspectiva de depuração.

Durante o modo de depuração, o Flex Application é executado na versão Flash Player Debugger integrada no Flash Builder 4, que oferece suporte ao recurso de depuração.
Assim, os desenvolvedores obtêm uma configuração de depuração fácil e integrada no Flash Builder

Neste artigo, demonstraremos o uso da depuração de código do Flex Client usando o Flash Builder. Faremos as seguintes tarefas

Defina os pontos de interrupção no código e veja-os no Breakpoint Explorer.
Percorra o código linha por linha durante a depuração.
Veja os valores da variável.
Inspecione os valores de todas as variáveis.
Inspecione o valor de uma expressão.
Exibe o quadro de pilha para threads suspensos.

Exemplo de depuração

Degrau	Descrição
1	Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo .
2	Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.

A seguir está o conteúdo do arquivo mxml modificado 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>

Quando você estiver pronto com todas as mudanças feitas, vamos compilar no modo normal como fizemos no capítulo Flex - Criar aplicativo .

Etapa 1 - Coloque pontos de interrupção

Coloque um ponto de interrupção na primeira linha do manipulador de inicialização do aplicativo HelloWorld.mxml

Etapa 2 - Depurar aplicativo

Agora clique no

menu do aplicativo de depuração e selecioneHelloWorld aplicativo para depurar o aplicativo.

Se tudo estiver bem, o aplicativo será iniciado no navegador e você verá os seguintes logs de depuração no console do 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

Assim que o aplicativo for iniciado, você verá o foco no ponto de interrupção do Flash Builder, pois colocamos o ponto de interrupção na primeira linha do método application_initialize Handler.

Você pode ver o rastreamento de pilha para threads suspensos.

Você pode ver os valores das expressões.

Você pode ver a lista de pontos de interrupção colocados.

Agora continue pressionando F6 até chegar à última linha do método application_initializeHandler (). Como referência para as teclas de função, F6 inspeciona o código linha por linha, F5 dá um passo adiante e F8 retoma o aplicativo. Agora você pode ver a lista de valores de todas as variáveis do método application_initializeHandler ().

Agora você pode ver que o código flexível pode ser depurado da mesma maneira que um aplicativo Java pode ser depurado. Coloque pontos de interrupção em qualquer linha e brinque com os recursos de depuração do flex.