...
...
...
...
...
...
...
...
...
Alterando a visualização do código
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
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
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Figura 2.2 - Arquivos gerados após criar um bloco servidor
Nesse momento, já podemos depurar o nosso bloco. Para isso, basta chamar o bloco durante a execução do sistema em modo debug que ao entrar no código do bloco, a execução será pausada e a depuração iniciada. Para prosseguir com o debug do bloco é necessário utilizar os botões de comando (figura 2.3), são eles, respectivamente:
Figura 2.3 - Botões de comando bloco servidor
...
...
...
...
...
...
...
...
É possível visualizar os valores das variáveis durante o debug, basta passar o mouse sob a variável e um menu com várias informações sobre ela irá aparecer. Após isso, basta expandir a propriedade object que é possível ver o valor atual da variável. O bloco abaixo recebeu dois parâmetros (1 e 2) e a variável item recebeu o resultado da soma entre eles. Por fim, é possível ver o valor da variável item durante o debug abaixo (figura 2.4).
...