Uma das ferramentas mais simples que temos para debugar nosso código é utilizar as informações que recebemos pelo console (pelo terminal do vscode). E podemos fazer isso, desde simplesmente observar a saída do erro, como fizemos na aula passada e descobrir a solução, até utilizar o “console.log()” em algum elemento para identificar a saída dele no console e descobrir se a execução do código está chegando até aquele ponto, ou não. Esse processo é feito geralmente quando temos erro de lógica, pois o erro de sintaxe, o próprio console já mostra o trecho e conseguimos identificar mais rápido.

Antes de começarmos com os exemplos, vamos entender o que é o console.log(). Aqui temos um objeto (console) utilizando um método (log()). Ele poderia utilizar outros métodos, como: error(), count(), table(), entre outros.

Esse objeto console, se comunica diretamente com o console, avisando que a saída deve ser enviada para lá, onde o usuário vai poder ver o conteúdo de algum elemento diretamente no console. Isso serve tanto para quando você está trabalhando com o navegador, e nesse caso, a saída aparece lá no console do navegador, quanto no nosso caso, que estamos fora do navegador.

O método log() vai trazer o conteúdo de algum elemento, que pode ser uma variável por exemplo, para que possamos ir acompanhando o valor e saber se está imprimindo corretamente e para ver se na execução, ele está passando por esse elemento. Por exemplo: caso você coloque console.log(teste), no console, deveria aparecer o conteúdo dessa váriável. Se não aparecer, é porque alguma coisa está acontecendo antes, que ele não está chegando nesse ponto ou a variável não está armazenando o valor correto. Então partindo dessa ideia, você já sabe o que pode ser e aonde você deve buscar as informações.

É possível também fazer o debug pelo console do navegador. No seu console, com a aplicação rodando, digite “m” conforme indicado pelo expo nas opções que ele dá quando iniciado. Dessa forma vai abrir um menu. Você pode escolher a opção remote Debug Remote JS, para começar a exibir a saída no navegador ao inves de no console.

Utilizando o Debug Remote Js, vamos trabalhar com o Dev Tools, que é uma ferramenta do Google Chrome, que vai nos ajudar nesse processo. Com ela podemos ver todos os detalhes dos elementos da página.

Depois de fazer todas as verificações com o console.log, você pode remover do código, pois não é necessário mantê-lo como parte dele. É apenas uma ferramenta para que possamos identificar o erro, então finalizando esse processo, podemos remover.