Adriano Lisboa Blog
Pensamentos, histórias e ideias.

Debugando Javascript (sem console.log)

É isso mesmo, se você utiliza o console.log para debugar sua aplicação web javascript, muito provavelmente você está perdendo um tempão com o processo todo.

Os navegadores modernos (como Chrome e Firefox) oferecem ferramentas incríveis e que facilitam a vida da pessoa desenvolvedora, mas então por qual motivo continuamos utilizando console.log para debugar nosso código Javascript ?

O problema da utilização do console.log

Não quero ser radical e dizer que você não deva utilizar os famosos console, mas com as idas e vindas a sua IDE para adicionar/remover você está perdendo um tempão.

Além do mais, para conseguir debugar uma aplicação você precisa saber em qual parte do código possivelmente o problema está acontecendo, ou pelo menos ter um indício de por onde começar. Com isso acabamos quase sempre entupindo nosso código de console.log (Reflita: você já fez algum commit esquecendo de remove-los ?) o que até torna difícil a visualização dos outputs no console de do navegador.

Se você ainda não está convencido de que talvez possam existir maneiras melhores de se debugar uma aplicação javascript, pare para pensar por alguns minutos em qual é o processo que você utiliza atualmente para a depuração de um código. Muito provavelmente você estará com um processo parecido com o descrito acima.

O que são os Developer Tools ?

Como dito no começo do artigo os navegadores modernos (como Chrome e Firefox) oferecem as famosas Developer Tools, e nesse artigo vamos utilizar a do Firefox. Se você utiliza outro navegador como o Chrome, não se preocupe, pois essas ferramentas são bem parecidas e o modo de se debugar é praticamente o mesmo (salvo algumas nomenclaturas que mudam).

Firefox Developer Tools

Para esse artigo vamos utilizar a aplicação de exemplo TODOs feita em React, abra a aplicação e passe um tempinho brincando com ela para entender o seu funcionamento.

Muito bem, agora que você já conhece a aplicação vamos debuga-la utilizando o nosso Developer Tools.

Com a página aberta aperte as teclas de atalho Ctrl``Shift``S (no OSX Command``Option``S) ou vá em no menu -> Ferramentas -> Web Developer-> Debugger.

Uma tela parecida com a seguinte vai ser aberta:

imagem-1

Figura 1: Firefox Developer Tools aberto

A esquerda em Sources você vai ver uma lista de arquivos que foram carregados junto com a página e que estão separados por domínio. Em Outline você verá uma lista de funções do arquivo aberto.

Experimente ir em -> todomvc.com -> examples/react -> js e clique no arquivo todoModel.js

imagem-2

Figura 2: Arquivo todoModel.js aberto no Firefox Developer Tools

Com o arquivo aberto você poderá adicionar breakpoints como em qualquer outra IDE, para adicionar um breakpoint simplesmente clique em qualquer número de linha (atalho Ctrl B ou Command B no OSX).

Vamos adicionar um breakpoint na linha 32 na função addTodo, isso significa que cada vez que essa linha for executada a execução vai ser pausada onde o breakpoint foi definido, e com essa pausa você poderá entender quais valores de variáveis que estão sendo passados ou ir linha por linha para entender o fluxo e onde o seu código está quebrando.

Adicione o breakpoint, vá na aplicação e digite um TODO e aperte enter:

imagem-3

Figura 3: Pausa do Debugger na linha 32 do arquivo todoModel.js aberto no Firefox Developer Tools

Nesse momento você terá as seguintes opções:

imagem-4

Figura 4: Atalhos do Debug Firefox Developer Tools - Cortesia: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Step_through_code

Pause/Resume (atalho F8): Como o nome diz, ele irá pausar ou seguir para o próximo breakpoint definido.

Step Over (atalho F10): Passo a passo, você vai passar linha por linha na função atual.

Step In (atalho F11): Vai para a próxima linha da função, caso seja uma chamada a outra função irá entrar nela.

Step Out (atalho Shift + F11): Vai para o final da função.

imagem-5

Figura 5: Atalhos do Firefox Developer Tools

Você também pode adicionar breakpoints baseados em condições, ou seja, caso uma condição seja aceita a execução será pausada no ponto definido.

imagem-6

Figura 6: Adicionando Condicional Breakpoint no Firefox Developer Tools

imagem-7

Figura 7: Condicional Breakpoint no Firefox Developer Tools

As possibilidades são enormes, e utilizando o Developer Tools você não precisará modificar o código de sua aplicação e esperar que seja feito um Hot Reload por exemplo, ter o trabalho de remover todos os console.log depois, ou até mesmo fazer o commit por engano de algum (quem nunca? :P).

Sugiro que você passe um tempo experimentando essa ferramenta e descobrindo maneiras de melhorar seu fluxo de trabalho atual.

Conclusão

O intuito desse artigo foi apenas apresentar essa poderosa ferramenta e lhe dar opção para que teste e tire conclusões se deveria continuar ou não utilizando console.log, ou até mesmo em qual situação qual ferramenta se encaixa melhor.

Caso queira aprofundar nas ferramentas de desenvolvimento do Firefox, recomendo a leitura da documentação oficial, nela além de você se aprofundar na aba de Debug você vai aprender outras super importantes como Inspector, Console, Network, além das outras.

Referências

https://developer.mozilla.org/en-US/docs/Tools

Author image
Brasil
I'm a Full-Stack Developer with good experience on design and architecture of software projects, agile methodologies, continuous integration, continuous deployment and continuous delivery.