3 dicas para melhorarmos na arte de "debugar" — Frontend

Esse é um post curto apenas para repassar algumas dicas sobre como debugar melhor enquanto desenvolvemos para o Frontend.

Photo by Shane Aldendorff on Unsplash

Muitas vezes, tentando resolver bugs ou desenvolvendo novas funcionalidades, precisamos entender melhor o código e uma maneira de fazê-lo de forma eficiente é checando valores de variáveis. Para isso, o Developer Tools de seu browser é fundamental e acredito que muitos já o utilizam bem.

Inclusive, indico de forma veemente aos que estão iniciando no mundo de frontend entenderem bem seu Devtools. Existem vários recursos que nos ajudam muito.

Listarei 3 dicas que facilitam nosso dia-a-dia tentando decifrar o que está acontecendo no código.

1- Utilize a keyword debugger no seu código para setar um breakpoint

Sabe aquele trecho de código que precisamos passar linha por linha para entender o que está acontecendo? Coloque um debugger; na sua função e ao abrir o Devtools e executar seu app, a execução irá pausar neste ponto e você pode checar suas variáveis e seguir a execução passo à passo.

debugger devtools Chrome

2- Utilize Object Literal e Shorthand com console.log

Console.log é muito utilizado para sabermos o valor de variáveis, e é uma maneira mais dinâmica de fazer isso do que com breakpoints. Ao utilizarmos `console.log(myVar)`, quando esta linha é executada, podemos ver na aba console o valor da variável. Ao envelopar essa variável como um objeto, temos o nome desta variável na tela junto com seu valor, simples e efetivo. Me lembrei desta simples técnica no twitter do Daniel Stefanovic, e a dica veio de Wes Bos.

console.log

3- Plugin Turbo Console Log para VSCode

Eu utilizo VSCode no dia-a-dia, mas imagino que exista o mesmo plugin, ou outros semelhantes, para os demais editores e IDEs.
Com ele, após selecionar uma variável, basta usar seu atalho , Ctrl+Alt+L no Mac, e o o plugin cria seu console.log de forma bem descritiva. Dêem uma olhada nas demais features do plugin aqui.

Turbo Console Log

Lembrem-se; pequenos detalhes/recursos/processos podem ajudar muito desenvolvedores(as) a se tornarem mais produtivos(as) e eficientes, e claro, melhorar a experiência de desenvolvimento como um todo.

Edit-1 — Nota: Queria sugerir também esse artigo massa da Paula Faria mais aprofundado nos recursos do console de seu browser.

Abraços!
Meu twitter é @guilhermeled para mais sobre tecnologia ou não.