Debug ( ou depuração, em português) é o processo de encontrar e reduzir defeitos num software, por meio de uma análise detalhada do código. No cronapp é possível debugar os blocos de programação, tanto cliente quanto servidor.

Pré-requisitos

Antes de começar é necessário ter certeza de que se possui um ambiente preparado para a realização do exemplo. Abaixo estão os principais requisitos necessários.

Requisitos:

1. Projeto do tipo web ou web-mobile criado. Caso haja dúvidas em relação a como criar esse tipo de projeto acesse o link (Criar novo projeto).

Debug em blocos cliente

Os blocos clientes são blocos front end, que geram código javascript, em projetos mobile ou web.

Alterando a visualização do código

Primeiramente, precisamos verificar se o arquivo index.html, dos projetos mobile ou web (endereços listados abaixo) estão apontando para o arquivo cronapi.js e não para sua versão minificada (cronapi.min.js), em que o código é exibido em uma única linha. Para isso, abra o arquivo index.html (endereço listado abaixo). Em seguida localize a tag script (<script>) que possui plugins/cronapi-js/dist/cronapi.min.js e altere o nome do arquivo, de "cronapi.min.js" para "cronapi.js" (sem aspas), retorne um nível na hierarquia de diretórios, excluindo o "/dist" do endereço e salve o index.html. (figura 1.1)

Localização do index.hrml:

• mobile: src/main/mobileapp/www/index.html
• web: src/main/webapp/index.html

Linha original: <script src="plugins/cronapi-js/dist/cronapi.min.js"></script>
Alterar para:   <script src="plugins/cronapi-js/cronapi.js"></script>

Figura 1.1 - Arquivo index.html do diretório webapp apontando para a versão minificada do cronapi

Iniciando o Debugging

Agora já podemos debugar os blocos cliente em nosso navegador. Para isso, vamos precisar ter um bloco de programação criado, caso tenha dúvidas, veja como criar blocos de programação.

Em nosso exemplo foi utilizado um bloco que recebe dois parâmetros e realiza a operação de multiplicação entre eles (figura 1.2).

Figura 1.2 - Calculo realizado no bloco

Figura 1.3 - Estrutura do bloco

Para debugar o código, é necessário rodar o projeto em modo debug e executa-lo em um navegador, no exemplo da figura 1.4 estamos usando o Navegador Chrome.

Com o projeto rodando em modo debug no chrome aperte a tecla F12 para abrir a ferramenta de desenvolvedor do navegador (DevTools) conforme a figura abaixo (figura 1.4). 

Figura 1.4 - Debug na ferramenta do desenvolvedor do google chrome (DevTools)

Passos destacados na figura 1.4:

1. Acesse a aba Sources;
2. Navegue até o local o arquivo (*.blockly.js) na árvore de arquivos na lateral esquerda;
3. Clique no número da linha que deseja adicionar o breakpoint;
4. Após executar no projeto a ação que chama a função que foi marcada com o breakpoint, você poderá visualizar o conteúdo das variáveis na aba lateral Local e
5. Use os botões de execução para avançar os passos do código:
   • Executa o script: Executa todo o código restante sem a necessidade de depuração.
   • Pular a próxima função: Ignora uma função e pula para o próximo passo.
   • Pular para a próxima função: Ignora os comandos e pula para a próxima chamada de função.
   • Sair da função atual: Sai da função corrente e avança para o próximo comando.
   • Próximo passo: Executa o próximo comando.
   • Desativar breakpoints: Desabilita todos os breakpoints da aplicação, e ignora-os quando as funções são chamadas.
   • Pausar em exceções: Deixa o código em modo debug caso alguma exceção seja encontrada.

Debug em blocos servidor

Nesse segundo exemplo vamos aprender a depurar blocos servidor. Os blocos servidor são debugados dentro do Cronapp, logo o processo com esse bloco é mais simples. Em nosso tutorial vamos depurar um bloco servidor que recebe dois parâmetros e realiza uma soma entre eles (Figura 2.1). Veja mais detalhes sobre blocos de programação, caso tenha dúvidas.

Figura 2.1 - Bloco servidor que realiza função soma

Depois de criar e salvar o bloco servidor, observe que são criados dois arquivos:  *.blocky e *.java (figura 2.1). Entretanto, para realizar o debug apenas o arquivo *.java é necessário, pois precisamos acessar diretamente o código fonte Java que é gerado pelo bloco de programação. Por isso, abra o arquivo *.java através do caminho: src / main / java / blockly / . (Figura 2.2)

Figura 2.2 - Arquivos gerados após criar um bloco servidor

Após abrir o arquivo:

1. Clique no lado esquerdo do número da linha que deseja iniciar o debug, marcando-a com uma bola vermelha;
2. Após executar no projeto a ação que chama a função que foi marcada com o breakpoint, a linha marcada com breakpoint ficara marcada em amarelo;
3. Passe o cursor do mouse em cima de uma variável ou objeto para exibir uma janela detalhando seu conteúdo, alguns elementos são expansíveis. (Figura 2.3)

Figura 2.3 - Janela de debug detalhando a variável 'resultado' da figura 2.1

Para seguir debugando o código, utilize os botões destacados na Figura 2.3:

1. Prosseguir execução: Executa todo o código restante sem a necessidade de depuração.
2. Próximo passo: Executa o próximo comando.
3. Entrar: Entra na próxima função.
4. Sair: Sai da função corrente e avança para o próximo comando.