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. Veja abaixo como:

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).
2. Navegador Google Chrome instalado.

Debug em blocos cliente

Nesse tutorial vamos aprender a maneira de debugar blocos cliente. Primeiramente, precisamos verificar se o arquivo index.html da pasta mobileapp está com o arquivo cronapi.js em sua versão minificada (cronapi.min.js). Para isso, acesse o caminho mostrado na figura abaixo (figura 1) e abra o arquivo index.html. Em seguida localize a tag script (<script>) que possui plugins/cronapi-js/dist/cronapi.min.js e substitua o termo "cronapi.min.js" por "cronapi.js" (sem aspas) e salve o arquivo.

Figura 1 - Arquivo index.html de mobileapp

Agora já podemos debugar os blocos cliente em nosso navegador, para isso vamos precisar ter um bloco de programação criado, caso você não saiba como criar um bloco de programação clique aqui (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 no google 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).  Após isso, aperte as teclas Ctrl + P e digite o nome do seu bloco de programação (figura 1.5), em seguida selecione-o dentre os resultados.

Figura 1.4 - Ferramenta do desenvolvedor do google chrome(DevTools)

Figura 1.4 - Bloco de programação no DevTools 

Depois de selecionar o bloco desejado precisamos pôr um breakpoint (ponto de pausa) em nosso código, para isso deve-se clicar no número que representa a linha desejada. Neste exemplo, vamos clicar no número que representa a linha 11 para que o código pause nessa linha, dessa forma estamos dizendo ao devtools que queremos analisar o código com mais detalhes a partir daquela linha ( linha 11 ) e ao chamar esse bloco dentro da aplicação (rodando em modo debug) uma janela com as opções de debug irá aparecer. Nesse exemplo, definimos como parâmetro os números 4 e 6. 

Figura 1.5 - Código do bloco sendo depurado (modo debug)

Para debugar o código precisamos utilizar os botões de comando, esses botões são usados para definir quais caminhos devemos prosseguir durante a analise do código. É possível também visualizar o valor das variáveis durante o debug, para isso podemos ver os valores exibidos ao lado do comando no código ou passando o mouse sob a variável. Os botões de comando, respectivamente, são:

Figura 1.6 - Botões de comando

1. Resumir a execução do script: Executa todo o código restante sem a necessidade de depuração.
2. Pular a próxima função: Ignora uma função e pula para o próximo passo.
3. Pular para a próxima função: Ignora os comandos e pula para a próxima chamada de função.
4. Sair da função atual: Sai da função corrente e avança para o próximo comando.
5. Passo: Executa o próximo comando.
6. Desativar breakpoints: Desabilita todos os breakpoints da aplicação, e ignora-os quando as funções são chamadas.
7. Pausar em exceções: Deixa o código em modo debug caso alguma exceção seja encontrada.