É hora de parar com o ‘console.log’

Durante anos, o console.log tem sido o melhor amigo do desenvolvedor javascript.

Para quem não sabe, essa ‘técnica’, também conhecida como printf() debugging (nome que vem do C), consiste em usar uma função que exiba alguma informações em determinados pontos da execução, com o objetivo de tentar entender o que esta terrivelmente errado no seu código.

No caso do javascript, essa função é o console.log.

E, apesar de alguns defenderem essa técnica de debug (alguma forma de síndrome de Estocolmo, talvez?), não há como negar que ela é um tanto quanto arcáica.

O node já tem suporte a debugging a bastante tempo, mas por muito tempo esse suporte foi bem ruim, e quando ele deixou de ser ruim ele continuou tudo, menos conveniente.

Mas já faz bastante tempo que o VS Code tem um suporte bem bacana para debug no node (e até no Chrome), de forma que a cada dia fica mais dificil justificar continuar usando o famigerado console.log.

A última desculpa era a dificuldade de configuração. Não mais… 😉

Nesse post (e em outros no futuro) eu vou explicar como usar o debugger do VS Code para facilitar a sua vida na hora de debugar seu código.

O VS Code é um ótimo editor, que eu considero obrigatório para quem trabalha com Javascript nos dias de hoje. Se você ainda não está usando, heis mais um motivo para mudar.

Lembrando que a documentação da parte de debug dele é muito boa. Recomendo a leitura.

Hello, Debugger

Vamos começar com um exemplo bem simples:

Salve esse código em em arquivo .js qualquer ('app.js', por exemplo).

Abra o arquivo no VS Code, coloque um breakpoint na linha 2 clicando ao lado do número da linha e rode o debugger, clicando na seta verde dentro da aba do debug ou apertando F5.

Você deve ver algo parecido com isso:

A execução esta pausada na linha dois, e do lado esquerdo você pode ver os valores de todas as variáveis que estão no escopo e mais algumas coisas. O VS Code também deve ter aberto o console de debug, onde você pode executar qualquer código.

Molezinha.

Um exemplo mais realista

No mundo real, nossos projetor são formados por diversos arquivos, e esse método de executar o arquivo atual não funciona. [Expandir]

Quando seu projeto tiver mais de um arquivo você vai precisar dizer para o VS Code por onde começar a execução do código. Para isso você tem que criar o arquivo launch.json na pasta .vscode do seu projeto.

Você pode criar o arquivo na mão, ou clicar no ícone da engrenagem na aba do debugger e escolher node no dropdown.

O conteúdo do arquivo, inicialmente, vai ser parecido com:

Por enquanto a gente vai focar em apenas uma dessas configurações, o program.

É nessa propriedade que você vai colocar o caminho para o arquivo que inicia a execução do seu código.

Vamos criar um exemplo básico utilizando o express para testar essa configuração.

Crie uma pasta chamada express-sample, e dentro dela crie os arquivos server.js e handler.js, com os seguintes conteúdos:

Dentro da parta express-sample, execute esses dois comandos:

Rode o servidor com:

Acesse localhost:3000 no seu navegador veja a mensagem Hello World.

Pronto, tudo funcionando. Agora para debugar.

Crie o arquivo launch.json clicando no ícone da engrenagem na aba do debugger, e troque o program para "${workspaceFolder}/server.js".

Coloque um breakpoint na linha 3 do handler.js e execute o debugger (F5).

Não esqueça de interromper o node se ele ainda estiver rodando no terminal. Caso tudo dê certo, a barra de status do VS Code vai mudar para laranja para indicar que o debugger está rodando.

Agora recarregue a página no seu navegador e veja que a execução vai parar na linha onde você colocou o breakpoint.

Pronto, agora você já pode debugar seu código como uma pessoa civilizada. 😂