Como usar o console de depuração do aplicativo?

Publicado em 12. dezembro 2023 por Jan Bunk


Se você é um desenvolvedor web, provavelmente está familiarizado com as ferramentas de desenvolvimento do navegador:

Uma captura de tela das ferramentas de desenvolvimento de um navegador.

Provavelmente, é a ferramenta mais importante para a depuração de erros em seu site.

Os aplicativos criados com o webtoapp.design geralmente funcionam imediatamente, pelo menos eles se comportam de forma quase idêntica à forma como o seu site se comporta no Chrome no Android e no Safari no iOS. Portanto, se o seu site funcionar bem lá, você não deverá encontrar muitos problemas.

No entanto, ocasionalmente você ainda pode sentir a necessidade de investigar algum comportamento inesperado em seu aplicativo. Para casos como esse, você pode abrir o Console interno do aplicativo.

Como abrir o console

A abertura do Console é intencionalmente oculta, para que os usuários comuns do aplicativo não o abram acidentalmente e fiquem confusos. Mas mesmo que você se depare com ele, basta fechar e reabrir o aplicativo para se livrar dele.

Abrindo o Console na tela de configurações

  1. Comece abrindo as configurações do seu aplicativo.
  2. Clique no cartão "Sobre". Uma captura de tela da tela de configurações de um aplicativo.
  3. Toque duas vezes na pequena imagem na caixa de diálogo para abrir o Console do desenvolvedor. Uma captura de tela da caixa de diálogo "Sobre" de um aplicativo.
  4. Agora você pode fechar a caixa de diálogo e as configurações e usar o Console enquanto navega pelo aplicativo. Uma captura de tela do Console do navegador aberto.

Abrindo o Console a partir da caixa de diálogo de relatório de erros

Se o seu aplicativo não tiver uma maneira de acessar as configurações, você também poderá abrir o Console por meio da caixa de diálogo de informações de diagnóstico:

  1. Abra a caixa de diálogo de relatório de erros sacudindo o dispositivo.
  2. Toque duas vezes no título da caixa de diálogo. Uma captura de tela da caixa de diálogo de relatório de erro com o título destacado.
  3. Agora você pode fechar a caixa de diálogo e usar o console enquanto navega pelo aplicativo.

Recursos do Console do aplicativo

Abrir URL

Abra qualquer site inserindo o URL na caixa de diálogo. Isso pode ser útil para navegar para páginas de teste secretas (não há link para elas no site principal) ou ambientes de teste que você possa ter.

Executar JS

Esse recurso executa qualquer JavaScript que você inserir e imprime o resultado no console.

Adicionar Eruda

Isso adiciona um pequeno botão que abre o Console do Eruda JavaScript para a página atual que você está visualizando. Ele fornece quase todos os recursos que você conhece do console do navegador no seu computador, por exemplo, o explorador de elementos da árvore DOM. Você pode ler mais sobre o Eruda em seu projeto no GitHub.

Uma captura de tela do Console do Eruda.

Copiar arquivos de log

Como as mensagens registradas podem ser um pouco difíceis de ler e analisar, você pode usar esse botão para copiar todo o texto registrado e colá-lo onde quiser. Por exemplo, você pode enviá-lo para o seu computador, onde talvez tenha um editor de texto melhor.

Autor Jan Bunk
Escrito por
Jan Bunk

Oi, eu sou o Jan! Criei o webtoapp.design em 2019 enquanto estudava ciência da computação na universidade. Muita coisa mudou desde então - não só me formei, como também não sou mais só eu gerenciando o webtoapp.design. Crescemos para uma equipe global, totalmente remota e acumulamos muita experiência em desenvolvimento e publicação de apps. Criamos e publicamos centenas de apps nas lojas de aplicativos, onde foram baixados milhões de vezes.