Debug (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 depurar e definir os pontos de paradas diretamente nos blocos de programação , tanto cliente quanto servidor(Servidor), através do Debug visual, ou da forma tradicional, aplicando diretamente no código gerado pelos blocos de programação (cliente ou 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).

1. .
2. Conhecimento na criação de bloco de programação. Caso tenha dúvidas, acesse o link: Blocos de programação.

Blocos cliente

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

Alterando a visualização do código

Desminificar código

Por ser uma boa prática e melhorar a performance, os códigos cliente são minificados, dessa forma precisamos exibir o código de forma legível para permite que o breakpoint seja adicionado no código e facilita a visualização. Assim, verifique se nos arquivos index.html dos Primeiramente, precisamos verificar se o arquivo index.html, dos projetos mobile ou web (endereços listados abaixo em visualização de pasta) 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 e em seguida localize a tag script (<script>) que possui pluginsnode_modules/cronapi-js/dist/cronapi.min.js e altere o nome do arquivo, de ", altere de cronapi.min.js" para "cronapi.js" (sem aspas), retorne js e remova /dist, retornando um nível na hierarquia de diretórios, excluindo o "/dist" do endereço e . Por fim, salve o index.html .  (figura Figura 1.1).

Localização do arquivo index.hrmlhtml:

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

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

Image Modified

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

alterado

Iniciar a depuração

Agora já podemos debugar depurar os blocos cliente em nosso navegador . Para e, para isso, vamos precisar ter criar 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 (a, b), realiza a operação de multiplicação entre eles (figura 1.2esses parâmetros, guardando o valor na variável resultado e em seguida altera o valor de um campo no formulário (Figura 1.2). Esses parâmetros provêm dos campos Valor de a e Valor de b e altera o valor do campo Resultado com o resultado da operação no bloco através da ação no botão Calcular (Figura 1.3).

Image Modified

Figura 1.2 - Cálculo realizado pelo blocoEstrutura do Bloco Cliente

Image Modified

Figura 1.3 - Estrutura do blocoFormulário que chama o bloco 'mult' da Figura 1.2

Para debugar depurar o código, é necessário rodar o projeto em modo debug (destaque 1 da figura 1.2) 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 como o Chrome. Aperte a tecla F12 para abrir a ferramenta de desenvolvedor do navegador (DevTools) conforme a figura abaixo (figura Figura 1.4), o DevTools (Figura 1.4). 

Image Modified

Figura 1.4 - Debug na ferramenta do desenvolvedor do Google Chrome (DevTools)

Passos destacados na figura 1.4Para acessar a área de depuração, siga os passos abaixo:

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

Blocos servidor

Nesse segundo exemplo vamos aprender a depurar blocos servidor. Os Esses blocos servidor são debugados depurados dentro do Cronapp, logo o processo com esse bloco é mais simples. Em nosso tutorial vamos depurar exemplo foi utilizado um bloco servidor que recebe dois parâmetros e realiza uma soma entre eles (a, b), realiza a operação de adição entre esses parâmetros, guardando o valor na variável resultado e em seguida altera o valor de um campo no formulário (Figura 2.1). Veja mais detalhes sobre blocos de programação, caso tenha dúvidasEsses parâmetros provêm dos campos Valor de a e Valor de b e altera o valor do campo Resultado com o resultado da operação no bloco através da ação no botão Calcular (Figura 2.2).

Image Modified

Figura 2.1 - Estrutura do Bloco servidor que realiza função somaServidor

Image Added

Figura 2.2 - Formulário linkado ao bloco de programação servidor

Depois de criar e salvar o bloco servidor, observe que são criados dois três arquivos:  *.blocky e , *.java e *.map (figura Figura 2.13). Entretanto, para realizar o debug a depuração, 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) Código Fonte > Principal > Códigos Fonte Servidor > Bloco de Programação, se for visualização por categoria (Figura 2.3), ou src > main > java > blockly, se for visualização por pasta.

Image Modified

Figura 2.2 3 - 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;
Após executar no projeto
2. Execute na janela da aplicação a ação que chama a função
que foi marcada com o breakpoint,
3. selecionada, isso fará com que a linha
marcada
4. com breakpoint
ficara
5. fique marcada em amarelo;
6. Passe o cursor do mouse
em cima
7. sobre de uma variável ou objeto para exibir uma janela detalhando seu conteúdo, alguns elementos são expansíveis
.
8. (Figura 2.
3)

Image Removed

1. 4);
2. Para seguir

1. depurando o código, utilize os botões destacados

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

Image Added

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