...
...
...
...
...
...
...
Debug em blocos cliente
...
...
...
...
...
...
></script>
Linha alterada: <script src="node-modules/cronapi-js/cronapi.js"></script>
...
...
...
...
...
...
...
Figura 1.
...
1 - Estrutura do Bloco Cliente
...
...
...
...
...
...
...
...
...
...
...
...
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 a execução, 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 - Código do bloco sendo depurado (modo debug)
...
...
...
...
...
...
...
...
...
...
...
...
...
...
- 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).
Figura 2 - Estrutura do Bloco Servidor
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.
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.
Figura 2.3 - Janela de debug detalhando a variável 'resultado' da figura 2
Nesta página:
| Índice |
|---|