Depurar JavaScript no Android: breakpoints, passo a passo e pilha de chamadas

Depurar JavaScript no Android: breakpoints, passo a passo e pilha de chamadas

O PocketCode inclui um depurador que funciona direto no seu dispositivo Android, ao lado do código que você executa. Este post conta exatamente o que ele faz hoje — e o que não faz.

Depuração real para Node.js

Abra um arquivo JavaScript (.js, .mjs, .cjs ou .jsx) e escolha Depurar (Shift + F5 com um teclado físico). O PocketCode inicia o Node.js com o inspector e se conecta a ele pelo Chrome DevTools Protocol, então tudo abaixo roda contra um processo Node real no seu celular:

• Pausa — o programa para na primeira linha, nos seus breakpoints e quando é lançada uma exceção que ninguém captura
• Continuar, Step Over / Into / Out — avance pelo código uma linha, uma chamada ou um retorno por vez
• Pausar, Reiniciar, Parar — controle a sessão diretamente; Reiniciar executa o arquivo de novo sob o depurador
• Variáveis — uma lista plana dos valores locais do frame do topo (os objetos não se expandem, e as variáveis de outros frames não aparecem)
• Pilha de chamadas — a cadeia de frames que levou ao ponto atual; escolher outro frame só leva você à linha dele
• Console — eventos da sessão junto com a saída do seu programa

Breakpoints, condições e logpoints

Toque em um número de linha para colocar um breakpoint: aparece um ponto vermelho na margem, e outro toque o remove. Quando o programa para ali, essa linha fica destacada. A aba Breakpoints do painel de depuração lista todos; você pode desativar cada um (ponto vazado) ou editá-lo pelo lápis:

• Condição — uma expressão JavaScript como i > 10; o programa só pausa quando ela é verdadeira
• Mensagem de log — transforma o breakpoint em um logpoint: em vez de pausar, escreve uma linha no console. Coloque expressões entre chaves para imprimir valores: user = {user.name}, total = {total}. Com uma condição também, só registra quando ela é cumprida

Breakpoints que você adiciona, remove ou edita com o programa rodando valem na hora, sem reiniciar.

Hot Reload

Ative o Hot Reload (o botão da barra de depuração, que só aparece com uma sessão em andamento; vem desativado) e, a cada vez que você salvar um arquivo do projeto, a sessão reinicia com o código novo — sem precisar parar e depurar de novo.

Outras linguagens

O depurador é só para JavaScript no Node.js. Com qualquer outro arquivo, TypeScript incluído, Depurar apenas o executa e avisa que não há suporte a depurador; os breakpoints não fazem nada. Não há um depurador passo a passo para Python, Java nem as demais linguagens — para elas, imprima valores no console e leia a saída.

Uma observação honesta sobre o escopo

Isto ainda não existe, então não vamos anunciar como se existisse:

• Conectar a um host remoto pela rede e profiling de desempenho
• Avaliar uma expressão: o console tem um campo «Evaluate expression», mas ele sempre responde undefined
• Breakpoints de exceção: o depurador para sozinho nas exceções não capturadas, mas você não pode adicionar as suas
• Os breakpoints ficam no número da linha: se você inserir linhas acima, eles não acompanham o código, e não são mantidos quando você fecha o app
• Parar desconecta o depurador; o processo em si pertence ao painel Run

---

Breakpoints, logpoints, passo a passo e variáveis já funcionam contra um Node real no seu celular.

O PocketCode está chegando à Google Play. Participe da pré-inscrição para estar entre os primeiros a experimentá-lo no seu próprio dispositivo.