O que todo programador Flex deve saber - Parte 02
Leia o artigo anterior:
Debug
O ato de debugar uma aplicação consiste em analisar o que está acontecendo em cada linha do seu código no momento de execução. Para qualquer de programador, em qualquer tecnologia, é imprescindível
saber debugar. É através do debug que conseguimos encontrar os erros mais críticos de uma aplicação.
saber debugar. É através do debug que conseguimos encontrar os erros mais críticos de uma aplicação.
O Adobe Flex Builder 3 possui ótimas ferramentas de Debug. Inicialmente ele possui uma perspectiva própria, acessada através do menu Window > Perspective > Flex Debuging.
Quanto ativamos esta tela surgem diversas novas abas, deixando o código em segundo plano, em uma área menor. Dentre estas perspectivas temos:
- Debug: Esta janela mostra quais aplicações estão sendo debugadas. Através dela também podemos executar os passos chamados Step Into, Step Over e Step Return.
- Variables: Mostra o conteúdo de variáveis que estão declaradas naquele momento do debug.
- Breakpoints: Adiciona 'pontos' no seu código em que o processamento do código irá parar, para que você possa analisar aquela linha especificamente.
- Expressions: pode-se adicionar expressões e avaliar os seus resultados. Por exemplo você pode colocar algo do tipo (idade>20).
- Console: Imprime informações sobre o Debug, além de mostrar a saída do comando 'trace' que veremos a seguir.
- Problemns: Exibe os erros de compilação.
Exemplo
Agora vamos a um exemplo para testarmos como o debug funciona. Crie um projeto e no arquivo mxml principal adicione o seguinte código:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="OnCreationComplete(event)">
<mx:Script>
<![CDATA[
private function OnCreationComplete(e:Event):void
{
for (var i:int =0;i<100;i++)
{
if (i%2==0)
{
continue;
}
ImprimirNoTrace(i);
}
}
private function ImprimirNoTrace(i:int):void
{
trace('valor do trace: ' + i.toString());
}
]]>
</mx:Script>
</mx:Application>Nesta simples aplicação, estamos executando o método OnCreationComplete na inicialização da aplicação. Este método faz um for de 0 a 99 e imprimindo o seu valor se ele for ímpar.
Adicionando um breakpoint
A primeira tarefa é adicionar um breakpoint na linha que contém o for. Para adicioná-lo, clique duas vezes ao lado do número da linha, fazendo surgir uma bolinha azul. Você pode também colocar o cursor na linha e apertar 'ctrl+shift+b'.
Executando o debug
Agora que adicionou o breakpoint, podemos testar nosso Debug. É importante que você rode a aplicação no modo Debug, clicando neste ícone:
Quando você clica no ícone de debug, a sua aplicação irá iniciar, e como o breakpoint está no código do creationComplete, instantaneamente o browser irá perder o foco e o Flex Builder irá surgir, conforme a figura a seguir.
Compreendendo Step Into, Step Over e Step Return
A partir deste ponto, poderemos simular o processamento da aplicação através de 3 modos. Aqui voltamos no Step Into, Step Over e Step Return.
- Step Into (F5) : Se a linha atual for um método, o Step Into irpa 'entrar' neste método, e executar as suas linhas. Experimente usar o Step Into na linha 17, quando chamamos o método ImprimirNoTrace. Se a linha atual não for um método, passa para a próxima linha.
- Step Over (F6): Sempre passa para a próxima linha, independente se a linha atual é um método ou não.
- Step Return (F7): Independente da linha em que está, o Step Return sempre retorna para o método que chamou a linha atual, voltando um item no 'Stack' de chamadas. Por exemplo, pressione F5 (Step Into) até entrar no método ImprimirNoTrace. Assim que chegar nele, pressione F7. Todo o código do método ImprimirNoTrace será executado e o debug retorna para o método que o chamou.
Conhecendo o Thread de chamadas
Agora que você já sabe navegar no código, consegue compreender como funciona o 'stack trace' ou 'thread' da janela Debug:
Este stack mostra, de baixo para cima, todas as chamadas que a aplicação está fazendo até a linha onde o debug está. No caso da figura acima, sabemos que o método OnCreationComplete chamou o método ImprimirNoTrace. Esta informação é importante quando estamos debugando aplicações que fazem várias chamadas, ou seja, um método chama outro método que chama outro método...
O comando trace
O comando trace() foi utilizado no método ImprimirNoTrace (que deveria ter se chamado: ImprimirNoConsole..). Ele é responsável em imprimir alguma informação na Janela Console, conforme a figura a seguir:
É válido lembrar que o trace somente irá imprimir informações quando está sendo executado no modo de debug. Se estiver sendo executada no modo normal (Run), nenhuma informação é gerada na tela de Console.
Janela Variables
Esta janela é importantíssima! Ela mostra as variáveis que estão disponíveis na linha em que o debug está parado. Algumas variáveis são objetos, e apresentam um sinal de mais, para que possamos expandir as suas propriedades. Nesta janela podemos, por exemplo, verificar como os dados estão sendo retornados do servidor, ou quais são as propriedades de um evento qualquer. Use e abuse desta funcionalidade!
Agora é a sua vez!
Agora chegou a sua hora de treinar. Execute a aplicação no modo debug, use Step Into e Step Over, entenda a janela de debug, o trace e a janela de variáveis. Eles são importantíssimos para debugar uma aplicação e descobrir o que está acontecendo de errado com ela.
"
Comentários