Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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
...
depurar e definir os pontos de paradas diretamente nos blocos de programação
...
(Servidor), através do Debug visual, ou da forma tradicional, aplicando diretamente no código gerado pelos blocos de programação (cliente ou Servidor).
Dica | ||
---|---|---|
| ||
Acesse o tópico Debug visual na documentação Bloco de programação para ver como depurar de forma low-code, diretamente pelos blocos de programação. |
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:
- Projeto do tipo web ou web-mobile criado. Caso haja dúvidas em relação a como criar esse tipo de projeto acesse
...
- a documentação Criar
...
- projeto.
- Conhecimento na criação de bloco de programação. Caso tenha dúvidas acesse a documentação Bloco de programação.
- É necessário que o botão Modo Avançado esteja habilitado.
Blocos cliente
Os blocos clientes são blocos front-end, que geram código JavaScript, em projetos mobile e web.
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 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
...
Debug em blocos cliente
...
sua versão minificada (cronapi.min.js
). Para isso,
...
abra o arquivo index.html
...
(endereço listado abaixo) e em seguida localize a tag script (<script>
) que possui
...
node_modules/cronapi-js/dist/cronapi.min.js
, altere de cronapi.min.js
para cronapi.js
...
e remova /dist
, retornando um nível na hierarquia de diretórios. Por fim, salve o index.html (Figura 1).
Localização do arquivo index.html:
- mobile:
src/main/mobileapp/www/index.html
- web:
src/main/webapp/index.html
Linha original: <script src="node_modules/cronapi-js/dist/cronapi.min.js"
...
></script>
Linha alterada: <script src="node-modules/cronapi-js/cronapi.js"
...
></script>
Image Added
Figura 1 - Arquivo index.html
...
alterado
Iniciar a depuração
Agora já podemos
...
depurar os blocos
...
cliente em nosso navegador e, para isso, vamos precisar
...
criar um bloco de programação
...
. Em nosso exemplo foi utilizado um bloco que recebe dois parâmetros
...
(a, b), realiza a operação de multiplicaçã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 1.1). Esses parâmetros provêm dos campos Valor de a e Valor de b, obtidos através do bloco Obter valor do Campo, por fim, 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.2).
...
Image Added
Figura 1.
...
1 - Estrutura do Bloco Cliente
Image Added
...
Figura 1.
...
2 - Formulário que chama o bloco 'mult' da Figura 1.1
Para depurar o código, é necessário rodar o projeto
...
e
...
executá-lo
...
em um navegador, como o Chrome. Aperte a tecla F12
para abrir a ferramenta de desenvolvedor do navegador, o DevTools (Figura 1.3).
Image Added
Figura 1.3 - Debug na ferramenta do desenvolvedor do Google Chrome (DevTools)
...
Para acessar a área de depuração, siga os passos abaixo:
- Acesse a aba Sources.
- Clique em Page > aplicação > js > blockly e selecione o arquivo com a função (
<nome_do_arquivo>.blockly.js
). - Clique no número da linha que deseja adicionar o breakpoint.
- Na janela da aplicação, execute a ação que chama a função selecionada (Figura 1.2). Você poderá visualizar o conteúdo das variáveis na aba lateral Local.
- 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.
Blocos servidor
Dica | ||
---|---|---|
| ||
Acesse o tópico Debug visual na documentação Bloco de programação para ver como depurar de forma low-code, diretamente pelos blocos de programação. |
Nesse segundo exemplo vamos aprender a depurar blocos servidor. Esses blocos são depurados dentro do Cronapp, logo, o processo com esse bloco é mais simples. Em nosso exemplo foi utilizado um bloco que recebe dois parâmetros (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). Esses parâmetros provêm dos campos Valor de a e Valor de b, obtidos através do bloco Obter valor do Campo, por fim, 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.1).
Image Added
Figura 2 - Estrutura do Bloco Servidor
Image Added
Figura 2.1 - Formulário linkado ao bloco de programação servidor
Depois de criar e salvar o bloco servidor, observe que são criados três arquivos: *.blocky
, *.java
e *.map
(destaque 1 da Figura 2.2). Entretanto, para realizar 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 seu endereço, exemplo: src/main/java/blockly/Calculo.java
.
Image Added
Figura 2.2 - Arquivos gerados após criar um bloco servidor
Após abrir o arquivo,
- Clique no lado esquerdo do número da linha que deseja iniciar o debug, marcando-a com uma bola vermelha.
- Execute na janela da aplicação a ação que chama a função selecionada (figura 2.1), isso fará com que a linha com breakpoint fique marcada em amarelo.
- Passe o cursor do mouse sobre de uma variável ou objeto para exibir uma janela detalhando seu conteúdo, alguns elementos são expansíveis (Figura 2.3).
- Para seguir depurando o código, utilize os botões destacados:
- Prosseguir execução: executa todo o código restante sem a necessidade de depuração;
- Próximo passo: executa o próximo comando;
- Entrar: entra na próxima função;
- Sair: sai da função corrente e avança para o próximo comando.
Image Added
Figura 2.3 - Janela de debug detalhando a variável 'resultado' da figura 2
Nesta página:
Índice |
---|
...
Image Removed
Figura 1.4 - Ferramenta do desenvolvedor do google chrome(DevTools)
Image Removed
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 q 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 e ao chamar esse bloco dentro da aplicação (rodando em modo debug) uma janela com as opções de debug irão aparecer.
Image Removed
...