...
Primeiramente, precisamos verificar se o arquivo index.html, na pasta mobileapp, está com dos projetos mobile ou web (endereços listados abaixo) estão apontando para o arquivo cronapi.js em e não para sua versão minificada (cronapi.min.js), exibindo todo em que o código é exibido em uma única linha. Para isso, acesse o caminho mostrado na figura abaixo (figura 1.1) e 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 de mobileappdo 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, 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 (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.
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 (multiplicacao.blocky em nosso exemplo) (figura 1.5), em seguida selecione-o dentre os resultados.
Figura 1.4 - Ferramenta Debug na ferramenta do desenvolvedor do google chrome (DevTools)
...
Passos destacados na figura 1.4
...
:
- Acesse a aba Sources;
- Navegue até o local o arquivo (*.blockly.js) na árvore de arquivos na lateral esquerda;
- Clique no número da linha que deseja adicionar o breakpoint;
- 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
- Use os botões de execução para avançar os passos do código:
- Executa o
...
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
- Resumir a execução do
- 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 cronappCronapp, 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), caso não saiba como criar um bloco clique aqui (criando .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 o bloco servidor, observe que são criados dois arquivos são gerados ( : *.blocky e *.java) (figura 2.1). Entretanto, entretanto ao para realizar o debug apenas o arquivo *.java é utilizadonecessário, pois precisamos nesse momento acessar diretamente o código fonte do blocoJava, gerado pelo bloco de programação. Por fimisso, abra o arquivo *.java através do caminho mostrado abaixo (figura 2.12).
Figura 2.1 2 - Arquivos gerados após criar um bloco servidor
Após abrir o arquivo, vamos definir a partir de qual linha o código será analisado com mais detalhes. Para isso, passe o mouse a esquerda do número da linha e um ponto vermelho irá aparecer. Para definir o local desejado como breakpoint, clique no ponto vermelho que então a linha referente ao ponto será marcada (figura 2.2).
Figura 2.2 3 - Arquivos gerados após criar um bloco servidor
...