Quando troquei de linguagem de Java para JavaScript minha maior “dor“ foi entender como debuggar sem ter uma IDE por trás me ajudando!
Mas sabe qual a parte mais engraçada? Sequer quando estava com Java eu debugava da melhor forma…
Vem comigo hoje na VOLTA DO TECHINSIGHTS WEEKLY aprender alguns macetes para você evitar de enviar código que não funciona pro ambiente de dev, e também aprender a ser uma pessoa que entende os problemas pois sabe aplicá-los localmente!
It’s so simple! I can prove to you 🫡
Primeiro que debuggar um código é uma prática que oriunda de vários pequenos ou grandes passo a passo num software que fazem toda diferença pra obter um resultado final.
Debugging pode ser considerado a mesma coisa que “depurar“ em português. Mais a frente te conto como usar depuradores.
É um processo a fim de indentificar um problema ou corrigir erros ou bugs no código do seu projeto. É uma prática super essencial para garantir funcionamento de código, semântica e prevenir um ambiente de testes coeso!
Separei aqui pra vocês um passo a passo de como usar a prática de debug da melhor forma, me conta depois nos comentários se você utiliza alguma dessas:
1 - Identificação de um bug ou necessidade de entendimento de um método (sendo num teste ou não)
Primeira coisa, validar que você tem todas as variáveis de ambiente pra trabalhar local.
E depois disso seja um bug do seu código, ou entendimento de um teste de unidade que não esteja passando.
Esse é o primeiro passo pra pegar seu cinto de utilidades e começar a debuggar
2 - Uso de ferramentas de Debugging:
Uma das ferramentas mais poderosas para depuração de código JavaScript é o Chrome DevTools. Utilizando breakpoints, você pode pausar a execução do código em pontos específicos para inspecionar o estado das variáveis e o fluxo do programa. Adicionar logs é outra técnica eficaz para rastrear o que está acontecendo durante a execução do código.
Além disso, depuradores integrados em IDEs como Visual Studio Code também são úteis, mas quero destacar o Chrome DevTools por sua eficiência e recursos robustos.
Eu, particularmente, uso muito o Chrome DevTools desde que mudei minha stack para JavaScript. Conheci a Jacelyn Yeel, que trabalha no time de Dev Web Tools do Google, no evento BrazilJS deste ano. Assisti a uma palestra incrível dela, cheia de truques de depuração.
Recomendo fortemente seguir Jacelyn no Twitter (https://x.com/jecfish), onde ela compartilha vídeos educativos com truques úteis para quem trabalha com JavaScript e NodeJS, tanto no front-end quanto no back-end. Aproveite essa dica para aprender algo novo essa semana!
3 - O óbvio precisa ser dito: ANALISE SEU CÓDIGO!
Sabe aquele ditado que o código fala por si? Então use isso a seu favor!
Calmaaaaaa eu sei que nem sempre o código fala por si, na verdade muitas das vezes ele ta falando um latin hahaha
Mas quero deixar aqui meus centavos que analisar o código através de debug me salvou de muitos perrengues com código legado e dificil de entender, principalmente pra entender possíveis melhorias nele!
Leia os erros que vierem no terminal, e entenda o que stacktraces estão te dizendo do que não esta funcionando.
Revisar a coesão do código através de uma lógica reversa com o stacktrace do erro é muito divertido e pode te salvar muito!
Não esqueça de testar hipóteses e fazer alterações no código (do seu método ou do seu teste), entenda onde que falha e por que falha.
4 - Preveja o futuro
Sabe qual a melhor forma de evitar um debug chato de novo?
Escrevendo teste, rs!
Se bem que na maioria das vezes o debug é por conta do teste né hahaha eu sei…
Mas caso vocÊ queira debuggar para entender e resolver um bug, escreva testes de unidade, esses são essenciais para prevenir dor de cabeça futura quanto a lógica de métodos!
Como eu debugo 😬
Imagine que eu tenho uma função em JavaScript que processa dados de uma API e realiza várias operações. No entanto, está retornando resultados incorretos:
Exemplo Prático de Debugging
Imagine que você tem uma função em JavaScript que processa dados de uma API e realiza várias operações. No entanto, está retornando resultados incorretos:
async function processarDados() {
const resposta = await fetch('https://api.exemplo.com/dados')
const dados = await resposta.json()
let resultado = 0
for (let item of dados) {
resultado += calcular(item)
}
return resultado
}
function calcular(item) {
return item.valor * 2
}
processarDados().then(console.log)Eu quero identificar esse bug senão não tenho nada pra corrigir, concluo que os resultados estão incorretos então vou debuggar pra entender o que tá rolando.
Dalhe breakpoints nisso, eu costumo usar Visual Studio Code e pra isso preciso garantir que meu projeto esta configurado pra rodar em modo debug.
Dado que meu projeeto não está, basta configurar o arquivo
launch.jsondentro da pasta.vscodedo meu projeto:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Node.js",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/seuArquivo.js"
}
]
}
Debugging com Chrome DevTools:
Vou no o DevTools no Chrome (F12 ou Ctrl+Shift+I), para a aba "Sources" e navego até seu script. Adiciono breakpoints clicando na linha do código onde deseja pausar a execução.
Rodando p código no Node.js usando o comando
node --inspect-brk seuArquivo.js. Abrachrome://inspectno navegador e conecte-se ao seu processo Node.js.
Segue exemplo de um outro código de como ativar debug com chrome web dev tools:
Para análisar melhor o código eu coloco um breakpoint na função processarDados e na função calcular.
Vou executar e inspecionar os valores das varáveis dados, item e resultado
Um dica massa também é usar o evaluate que fica no debug console, ele te ajuda a validar lógicas isoldas dentro das expressões
CORRIJO O BUG!!!!!
Suponhando que o problema está na estrutura dos dados retornados pela API. Adiciono logs para verificar:
Utilize log estruturados com uma lib isso é só um exemplo!
async function processarDados() {
const resposta = await fetch('https://api.exemplo.com/dados')
const dados = await resposta.json()
console.log(dados) // log para inspecionar os dados
let resultado = 0
for (let item of dados) {
console.log(item) // log para inspecionar cada item
resultado += calcular(item)
}
return resultado
}
function calcular(item) {
console.log(item.valor) // log para verificar o valor do item
return item.valor * 2
}Prevenir pra não acontecer mais
Vou criar um teste automatizado:
const assert = require('assert')
async function testProcessarDados() {
const resultado = await processarDados()
assert.strictEqual(resultado, 100, 'Teste falhou: processarDados()')
}
testProcessarDados().then(() => console.log('Todos os testes passaram'))
Sim dá muito trampo mas sabe o que isso me ensinou?
Ao longo da minha carreira, aprender a debugar de forma eficaz foi uma das habilidades mais valiosas que desenvolvi. Usar ferramentas como o Chrome DevTools e configurar o ambiente de depuração no VS Code me permitiu identificar e resolver problemas complexos com muito mais eficiência. Esse processo não só me ajudou a corrigir bugs rapidamente, mas também a entender profundamente o funcionamento do meu código, prevenindo problemas futuros e melhorando a qualidade geral dos meus projetos.
Debuggar pode ser desafiador no início, mas com prática e paciência, você verá como essa habilidade pode transformar sua abordagem para desenvolvimento e manutenção de software.
Me conta aí nos comentários de como o debugging ajudou você a resolver problemas? Deixe sua experiência nos comentários abaixo.
Vamos compartilhar conhecimento e aprender juntos! 💖
Dica de ouro 💖
A gente só sabe o valor de bons conteúdos quando passamos por perrengues reais e nenhum link da internet ajuda a gente, rs
Então fica a dica de estudo pra você!
Dicas da semana 🔥
[INGLÊS] - Quem me acompanha por aqui sabe como inglês transformou minha carreira! E esse mês de Junho a plataforma que eu super recomendo a FLUENCYPASS está com 47% de desconto + aulas particulares em dobro + garantia de um ano!
[EVENTO] - Front in Sampa - https://evento.frontinsampa.com.br/