Introdução ao Debugging em JavaScript
Um console.log pode resolver bugs simples, mas quando o estado muda entre renders ou quando uma promise resolve com valor inesperado, ele se torna um ciclo de printf debugging, que não escala bem. Este artigo aborda ferramentas e técnicas para reduzir o tempo entre 'tem um bug' e 'achei a causa raiz'.
Breakpoints Condicionais
O Chrome DevTools (e navegadores baseados em Chromium) aceita breakpoints com condição. Você pode clicar com o botão direito na linha e escolher 'Add conditional breakpoint', escrevendo uma expressão JavaScript. A execução pausa quando a expressão retorna verdadeiro. No DevTools de Sources, ao pausar, você tem acesso ao Scope completo, variáveis locais, closure e módulo, e pode avaliar expressões no Console.
Logpoints
Logpoints permitem continuar usando console.log sem poluir o código. No Chrome DevTools, clique com o botão direito na linha e escolha 'Add logpoint'. A sintaxe aceita interpolação. A principal vantagem é que logpoints não poluem o código, não precisam de commit acidental e você remove fechando a aba.
Debugger Statement
O debugger statement funciona tanto no navegador quanto no Node.js (com inspector ativo). No Node.js, você precisa iniciar o processo com a flag --inspect ou --inspect-brk. Este permite inserir algo no código para que qualquer pessoa do time possa pausar ali, mesmo em ambientes específicos.
Conclusão
Essas ferramentas e técnicas ajudam a reduzir o tempo de investigação e aumentam a eficiência no processo de debugging em JavaScript, sem depender do console.log. Com essas ferramentas, você pode investigar bugs de maneira mais eficaz e produtiva.